1

我们在控件上使用动画 GIF 按钮，它运行良好，直到我们进行更广泛的用户测试，其中一些用户拥有 iPhone（而不是之前所有人都拥有的 Android）。他们正在使用 AirConsole 应用程序来控制相关情况。动画 GIF 似乎在那里没有动画。显然，我们正在寻找适用于所有 AirConsole 支持的平台的答案。（动画 GIF 似乎是最低公分母类型的答案！）

有什么想法/帮助吗？我们是否需要做一些特定的事情或以特定的方式编码？

否则（如果不支持），我想我们必须看看我们是否可以检测控制器平台（JS 中的浏览器信息？）并提供替代方案。（我猜可能是 JS 交换图像帧。否则完全回到绘图板：（）如果您知道这些替代方案，请提出建议！

我们正在手动编写 HTML 和 JavaScript（不使用生成器）。这是我希望所有合适的部分。

  .main-button{
      position: absolute;
      top: 35%;
      width: 18%;
      height: 30%;
      background-size: contain;
      background-repeat: no-repeat;
  }

  #interact-button{
      background-image: url("Buttons/AnimatedButton-PickUpPutDown01.gif");
      left: 30%;
      top:25%;
  }

  <div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>

这是我们正在使用的示例 GIF。让我知道是否还有其他可能会有所帮助并提前致谢！

显示拾取和放下物品的 GIF 动画按钮

4

1 回答 1

0

我尝试在旧 iPhone（运行 iOS 10.3.3）的 AirConsole 应用、Chrome 和 Safari 浏览器（使用AirConsole 模拟器）中显示 GIF。它们似乎都按预期显示了动画 GIF：

在此处输入图像描述

这是我在 controller.html 中使用的代码：

<html>
<head>
  <script src='https://www.airconsole.com/api/airconsole-1.7.0.js'></script>
  <script>
    let airconsole;

    /**
     * Sets up the communication to the screen.
     */
    function init() {
      airconsole = new AirConsole({'orientation': 'portrait'});
    }
  </script>
  <style type='text/css'>
    .main-button{
      position: absolute;
      top: 35%;
      width: 18%;
      height: 30%;
      background-size: contain;
      background-repeat: no-repeat;
    }

    #interact-button{
      background-image: url("Images/support/AnimatedButton-PickUpPutDown01.gif");
      left: 30%;
      top:25%;
    }
  </style>
</head>
<body onload='init()'>
  <div class="main-button" id ="interact-button" ontouchstart="App.prototype.selectAction('Interact')"></div>
</body>
</html>

您在哪个版本的 iOS 上遇到问题？我建议您尝试我展示的基本控制器代码，看看它是否有任何改变。

于 2020-05-04T15:27:52.080 回答