amp-anim
Introduction
Use amp-anim
to embed animations (gif, webp) into your AMP HTML files. Animation files should be loaded via HTTPS.
Setup
Import the animation component in the header.
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
Basic usage
A basic embed. The usage of amp-anim
is similar to that of amp-img
.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
</amp-anim>
Placeholder
You can use amp-img
as a placeholder when loading of src
file takes time. The placeholder
attribute must be added to the nested amp-img
in this case.
<amp-anim width="245" height="300" src="https://amp.dev/static/samples/img/gopher.gif" alt="an animation" attribution="The Go gopher was designed by Reneee French and is licensed under CC 3.0 attributions.">
<amp-img placeholder width="245" height="300" src="https://amp.dev/static/samples/img/gopher.png"></amp-img>
</amp-anim>
需要进一步说明?
如果此页面上的说明未能涵盖您的所有问题,欢迎与其他 AMP 用户取得联系,讨论您的具体用例。
前往 Stack Overflow 一项无法解释的功能?AMP 项目强烈鼓励您参与并做出贡献!我们希望您能成为我们开放源代码社区的持续参与者,但我们也欢迎您对所热衷问题做出一次性贡献。
编辑 GitHub 上的示例-
Written by @sebastianbenz