amp-story-animation

描述

一个用于在 amp-story 中配置自定义动画的组件。

必需的脚本

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

如果在预设之外需要动画，则可以使用 <amp-story-animation> 组件配置自定义动画。它允许你在 Web Story 中创建<amp-animation>类型的动画。

要使用它，请在 <amp-story-page> 下添加一个带有子 <script type="application/json"> 的 <amp-story-animation layout="nodisplay" trigger="visibility"> 标签，其中包含描述动画的 JSON 配置。在以下示例中，将使用 <amp-story-animation> 中的 json 配置对“自定义动画”文本进行动画处理

...
      <amp-story-page id="cover">
        <amp-story-grid-layer template="vertical">
          <strong class="custom-animation">Custom animation</strong>
        </amp-story-grid-layer>

        <amp-story-animation layout="nodisplay" trigger="visibility">
          <script type="application/json">
            {
              "selector": ".custom-animation",
              "duration": "1s",
              "easing": "ease-in-out",
              "keyframes": [
                {"transform": "translateY(10px)", "opacity": 0},
                {"transform": "translateY(-5px)", "opacity": 1},
                {"transform": "translateX(0)"}
              ]
            }
          </script>
        </amp-story-animation>
      </amp-story-page>

需要更多帮助？

你已经阅读了这篇文档很多次，但它并没有真正涵盖你的所有问题？也许其他人也有同感：在 Stack Overflow 上联系他们。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励你的参与和贡献！我们希望你成为我们开源社区的长期参与者，但也欢迎你对你特别感兴趣的问题做出一次性贡献。

前往 GitHub

amp-story-animation

描述

必需的脚本

相关资源