相关资源

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> 下添加一个 <amp-story-animation layout="nodisplay" trigger="visibility"> 标签，其中包含一个包含描述您的动画的 JSON 配置的子 <script type="application/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

描述

必需的脚本

相关资源