如何使用 timeUpdate 事件的时间值来触发 AMP 动画？

Question

<amp-video> 组件发出记录在 here 中的 timeUpdate 事件。但是完全不清楚如何使用时间值。

我有想要在不同时间触发的 amp 动画。在 JavaScript 中，我会将该时间值传递给我的事件处理程序并根据该时间值触发我的动画。

如何在 AMP 中执行类似操作？

Answer 1

假设动画可以用<amp-animation>表示，那么：

步骤 1

将动画需要触发的时间转换为百分比偏移量。例如，如果您想在 45 秒时触发动画，而您的视频长 1 米 20 秒，那么偏移量将为 45/80 = 0.5625:

<amp-animation id="myAnimation" ...>
  <script type="application/json">
    {
      // ...
      "animations": [{
        "opacity": 1,
        "offset": 0.5625
      }]
    }
  </script>
</amp-animation>

步骤 2

将视频触发的 timeUpdate 事件连接到 <amp-animation> 的 seekTo 操作：

<amp-video on="timeUpdate:myAnimation.seekTo(percent=event.percent)" ...>
</amp-video>

有关详细信息，请参阅 this example。

（请注意，此方法在 AMP 故事的上下文中不起作用，因为 <amp-animation> 组件（截至 2018 年 8 月）not allowed。也不支持操作和事件。）

如何使用 timeUpdate 事件的时间值来触发 AMP 动画？

How do you use the time value of the timeUpdate event to trigger an AMP animation?

amp-html