Как сделать анимированные кнопки на контроллере AirConsole? - PullRequest
Новая
       50

Как сделать анимированные кнопки на контроллере AirConsole?

1 голос
/ 04 мая 2020

Мы использовали анимированные кнопки GIF на наших элементах управления, и это работало нормально, пока мы не приступили к более широкому пользовательскому тестированию, где у некоторых пользователей были iPhone (а не Android, которые были у всех ранее). Они использовали приложение AirConsole для контроля в случае необходимости. Анимированные GIF-изображения, кажется, не оживляют там. Очевидно, мы ищем ответ, который работает на всех поддерживаемых платформах AirConsole. (Анимированные GIF-файлы выглядят как ответ с наименьшим общим знаменателем!)

Есть идеи / помощь? Нужно ли нам что-то указывать c или кодировать определенным образом?

В противном случае (если это не поддерживается), я думаю, нам придется посмотреть, сможем ли мы обнаружить платформу контроллера (информация браузера в 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, который мы используем. Дайте мне знать, если есть что-то, что может помочь, и спасибо заранее!

Animated GIF button showing picking-up and putting-down items

1 Ответ

0 голосов
/ 04 мая 2020

Я попытался показать GIF на старом iPhone (работает iOS 10.3.3) в приложении AirConsole, Chrome и браузерах Safari (с помощью AirConsole Simulator ). Кажется, все они показывают анимированный GIF, как и ожидалось:

enter image description here

Вот код, который я использовал в контроллере. 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 возникла проблема? Я предлагаю вам попробовать код контроллера basi c, который я показываю, чтобы увидеть, изменит ли он что-либо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...