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"> 标签，其中包含一个子标签 <script type="application/json">，其中包含描述您的动画的 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

描述

必需脚本

相关资源