AMP 故事动画
简介
AMP 故事开箱即用地支持动画。amp-story-page 内的每个元素都可以定义一个进入动画。您可以在此处找到所有支持的动画列表。
动画可以帮助您的 Web 故事在视觉上更令人兴奋和引人入胜，但请有目的地使用它们。一些用户可能会觉得长时间、连续的动画分散注意力。其他用户可能对运动敏感，并且可能因过度使用运动和视差效果而受到不利影响。为了使内容尽可能易于访问，请保持您的进入动画简短且具有凝聚力。
淡入
动画可以使用 fade-in 效果。
<amp-story-page id="fade-in">
<amp-story-grid-layer template="thirds">
<h1>fade-in</h1>
<div class="square"
animate-in="fade-in"
animate-in-duration="2s">
</div>
</amp-story-grid-layer>
</amp-story-page>
动画持续时间
所有动画都可以使用 animate-in-duration 和 animate-in-delay 属性进行自定义。
<amp-story-page id="delay-duration">
<amp-story-grid-layer template="thirds">
<h1>Wait for it ...</h1>
<div class="square"
animate-in="fade-in"
animate-in-delay="2s"
animate-in-duration="5s">
</div>
</amp-story-grid-layer>
</amp-story-page>
自定义动画
使用 animate-in-duration 和 animate-in-delay 属性自定义进入动画。
<amp-story-page id="sequence">
<amp-story-grid-layer template="vertical">
<amp-img id="image1"
animate-in="fade-in"
animate-in-delay="1s"
animate-in-duration="1s"
src="https://unsplash.it/720/320/?image=10"
width="720"
height="320"
layout="responsive"
alt="..."></amp-img>
<amp-img id="image2"
animate-in="fade-in"
animate-in-duration="1s"
animate-in-delay="0.25s"
animate-in-after="image1"
src="https://unsplash.it/720/320/?image=11"
width="720"
height="320"
layout="responsive"
alt="..."></amp-img>
<amp-img id="image3"
animate-in="fade-in"
animate-in-duration="1s"
animate-in-delay="0.25s"
animate-in-after="image2"
src="https://unsplash.it/720/320/?image=12"
width="720"
height="320"
layout="responsive"
alt="..."></amp-img>
<amp-img id="image4"
animate-in="fade-in"
animate-in-duration="1s"
animate-in-delay="0.25s"
animate-in-after="image3"
src="https://unsplash.it/720/320/?image=13"
width="720"
height="320"
layout="responsive"
alt="..."></amp-img>
</amp-story-grid-layer>
</amp-story-page>
组合动画
您可以通过将多个动画嵌套到多个元素中来组合它们。
<amp-story-page id="combining-animations">
<amp-story-grid-layer template="thirds">
<h1>fly-in-left + fade-in</h1>
<div animate-in="fly-in-left"
animate-in-duration="2s"
grid-area="middle-third">
<div class="square"
animate-in-duration="2s"
animate-in="fade-in">
</div>
</div>
</amp-story-grid-layer>
</amp-story-page>
旋转进入
动画可以使用旋转进入效果。
<amp-story-page id="twirl-in">
<amp-story-grid-layer template="thirds">
<h1>twirl-in</h1>
<div class="square"
animate-in="twirl-in">
</div>
</amp-story-grid-layer>
</amp-story-page>
飞入
动画可以使用从左侧飞入效果。
<amp-story-page id="fly-in-left">
<amp-story-grid-layer template="thirds">
<h1>fly-in-left</h1>
<div class="square"
animate-in="fly-in-left">
</div>
</amp-story-grid-layer>
</amp-story-page>
从右侧飞入
动画可以使用从右侧飞入效果。
<amp-story-page id="fly-in-right">
<amp-story-grid-layer template="thirds">
<h1>fly-in-right</h1>
<div class="square"
animate-in="fly-in-right">
</div>
</amp-story-grid-layer>
</amp-story-page>
从顶部飞入
动画可以使用从顶部飞入效果。
<amp-story-page id="fly-in-top">
<amp-story-grid-layer template="thirds">
<h1>fly-in-top</h1>
<div class="square"
animate-in="fly-in-top">
</div>
</amp-story-grid-layer>
</amp-story-page>
从底部飞入
动画可以使用从底部飞入效果。
<amp-story-page id="fly-in-bottom">
<amp-story-grid-layer template="thirds">
<h1>fly-in-bottom</h1>
<div class="square"
animate-in="fly-in-bottom">
</div>
</amp-story-grid-layer>
</amp-story-page>
从左侧旋转进入
动画可以使用从左侧旋转进入效果。
<amp-story-page id="rotate-in-left">
<amp-story-grid-layer template="thirds">
<h1>rotate-in-left</h1>
<div class="square"
animate-in="rotate-in-left">
</div>
</amp-story-grid-layer>
</amp-story-page>
从右侧旋转进入
动画可以使用从右侧旋转进入效果。
<amp-story-page id="rotate-in-right">
<amp-story-grid-layer template="thirds">
<h1>rotate-in-right</h1>
<div class="square"
animate-in="rotate-in-right">
</div>
</amp-story-grid-layer>
</amp-story-page>
掉落
动画可以使用掉落效果。
<amp-story-page id="drop-in">
<amp-story-grid-layer template="thirds">
<h1>drop-in</h1>
<div class="circle"
animate-in="drop">
</div>
</amp-story-grid-layer>
</amp-story-page>
从左侧嗖嗖进入
动画可以使用从左侧嗖嗖进入效果。
<amp-story-page id="whoosh-in-left">
<amp-story-grid-layer template="thirds">
<h1>whoosh-in-left</h1>
<div class="square"
animate-in="whoosh-in-left">
</div>
</amp-story-grid-layer>
</amp-story-page>
从右侧嗖嗖进入
动画可以使用从右侧嗖嗖进入效果。
<amp-story-page id="whoosh-in-right">
<amp-story-grid-layer template="thirds">
<h1>whoosh-in-right</h1>
<div class="square"
animate-in="whoosh-in-right">
</div>
</amp-story-grid-layer>
</amp-story-page>
放大
您还可以在图像上使用动画来创建视觉效果。
通过组合这些来创建肯·伯恩斯效果！在视觉效果部分中了解如何操作。
<amp-story-page id="zoom-in">
<amp-story-grid-layer template="vertical">
<amp-img animate-in="zoom-in"
animate-in-duration="4s"
layout="responsive"
src="https://picsum.photos/720/320?image=1026"
width="720"
height="320"
alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>zoom-in</h1>
</amp-story-grid-layer>
</amp-story-page>
缩小
动画可以使用缩小效果。
<amp-story-page id="zoom-out">
<amp-story-grid-layer template="vertical">
<amp-img animate-in="zoom-out"
animate-in-duration="4s"
layout="responsive"
src="https://picsum.photos/720/320?image=1026"
width="720"
height="320"
alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>zoom-out</h1>
</amp-story-grid-layer>
</amp-story-page>
向左平移
动画可以使用向左平移效果。
<amp-story-page id="pan-left">
<amp-story-grid-layer template="fill">
<amp-img animate-in="pan-left" id="img-pan-left" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026"
width="720" height="320" alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>pan-left</h1>
</amp-story-grid-layer>
</amp-story-page>
向右平移
动画可以使用向右平移效果。
<amp-story-page id="pan-right">
<amp-story-grid-layer template="fill">
<amp-img animate-in="pan-right" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
height="320" alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>pan-right</h1>
</amp-story-grid-layer>
</amp-story-page>
向上平移
动画可以使用向上平移效果。
<amp-story-page id="pan-up">
<amp-story-grid-layer template="fill">
<amp-img animate-in="pan-up" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
height="320" alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>pan-up</h1>
</amp-story-grid-layer>
</amp-story-page>
向下平移
动画可以使用向下平移效果。
<amp-story-page id="pan-down">
<amp-story-grid-layer template="fill">
<amp-img animate-in="pan-down" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
height="320" alt="...">
</amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="fill">
<h1>pan-down</h1>
</amp-story-grid-layer>
</amp-story-page>
需要进一步解释？
如果此页面上的解释没有涵盖您所有的问题，请随时与其他 AMP 用户联系，讨论您的确切用例。
转到 Stack Overflow 一个未解释的功能？AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您针对您特别关注的问题做出一次性贡献。
在 GitHub 上编辑示例