Alexa APL: Как воспроизвести зацикленную GIF-анимацию? - PullRequest
Новая
       68

Alexa APL: Как воспроизвести зацикленную GIF-анимацию?

0 голосов
/ 28 апреля 2020

Я создаю навык Alexa и использую APL для визуальных элементов. Я пытаюсь l oop показывать / скрывать изображения внутри контейнера для воспроизведения анимированного GIF.

У меня в настоящее время первый ' l oop 'работа с использованием AnimateItem для изменения видимости каждого изображения после заданной задержки, например: 

{
  "type": "APL",
  "version": "1.3",
  "settings": {},
  "theme": "dark",
  "import": [],
  "resources": [],
  "styles": {},
  "onMount": [],
  "graphics": {},
  "commands": {
    "fadeIn": {
      "parameters": ["duration", "delay"],
      "commands": [
        {
          "type": "AnimateItem",
          "duration": "${duration}",
          "delay": "${delay || 0}",
          "value": [
            {
              "property": "opacity",
              "from": 0,
              "to": 1
            }
          ]
        }
      ]
    },
    "fadeOut": {
      "parameters": ["duration", "delay"],
      "commands": [
        {
          "type": "AnimateItem",
          "duration": "${duration}",
          "delay": "${delay || 0}",
          "value": [
            {
              "property": "opacity",
              "from": 1,
              "to": 0
            }
          ]
        }
      ]
    }
  },
  "layouts": {},
  "mainTemplate": {
    "parameters": ["payload"],
    "items": [
      {
        "type": "Container",
        "height": "100vh",
        "width": "100vw",
        "items": [
          {
            "type": "Image",
            "width": "100vw",
            "height": "100vh",
            "source": "https://via.placeholder.com/100",
            "position": "absolute",
            "onMount": [
              {
                "type": "Sequential",
                "commands": [
                  {
                    "type": "fadeOut",
                    "delay": 0,
                    "duration": 0
                  },
                  {
                    "type": "fadeIn",
                    "delay": 1,
                    "duration": 0
                  },
                  {
                    "type": "fadeOut",
                    "delay": 300,
                    "duration": 0
                  }
                ]
              }
            ]
          },
          {
            "type": "Image",
            "width": "100vw",
            "height": "100vh",
            "source": "https://via.placeholder.com/200",
            "position": "absolute",
            "onMount": [
              {
                "type": "Sequential",
                "commands": [
                  {
                    "type": "fadeOut",
                    "delay": 0,
                    "duration": 0
                  },
                  {
                    "type": "fadeIn",
                    "delay": 300,
                    "duration": 0
                  },
                  {
                    "type": "fadeOut",
                    "delay": 600,
                    "duration": 0
                  }
                ]
              }
            ]
          },
          {
            "type": "Image",
            "width": "100vw",
            "height": "100vh",
            "source": "https://via.placeholder.com/300",
            "position": "absolute",
            "onMount": [
              {
                "type": "Sequential",
                "commands": [
                  {
                    "type": "fadeOut",
                    "delay": 0,
                    "duration": 0
                  },
                  {
                    "type": "fadeIn",
                    "delay": 600,
                    "duration": 0
                  },
                  {
                    "type": "fadeOut",
                    "delay": 900,
                    "duration": 0
                  }
                ]
              }
            ]
          },
        ]
      }
    ]
  }
}

Каков наилучший подход для повторения этого процесса после завершения итерации? Я пытался использовать пейджеры и RepeatCount в AnimateItem, но не повезло

РЕДАКТИРОВАТЬ:

Обновил приведенный выше код на примере полного документа APL (источники поменялись местами и уменьшено количество изображений до 3, а не до 60+, но логика c такая же); файл источника данных пуст, поэтому не предоставляется

1 Ответ

0 голосов
/ 29 апреля 2020

Я могу помочь вам, если вы сможете поделиться полным документом apl и источником данных, чтобы я понял, чего вы пытаетесь достичь.

...