amp-fx-collection

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

用法

amp-fx-collection 组件提供了一系列预设视觉效果，例如可以通过属性轻松在任何元素上启用的视差。

应用视觉效果

要为元素指定视觉效果，请添加 amp-fx 属性，其值为视觉效果。

以下是 amp-fx-collection 支持的视觉效果

视差

parallax 效果允许元素移动，就像它相对于页面内容的前景更近或更远一样。当用户滚动页面时，元素会根据分配给 data-parallax-factor 属性的值更快或更慢地滚动。

data-parallax-factor

指定一个十进制值，该值控制元素相对于滚动速度的滚动速度快多少或慢多少

• 当用户向下滚动页面时，大于 1 的值会向上滚动元素（元素滚动得更快）。
• 当用户向下滚动时，小于 1 的值会向下滚动元素（元素滚动得更慢）。
• 值为 1 时，行为正常。
• 值为 0 时，实际上会使元素随页面固定滚动。

在此示例中，当用户滚动页面时，h1 元素相对于页面内容滚动得更快。

<h1 amp-fx="parallax" data-parallax-factor="1.5">
  A title that moves faster than other content.
</h1>

淡入

当目标元素在视口中可见时，fade-in 效果允许元素淡入。

data-duration（可选）

这是动画发生的时间长度。默认值为 1000ms。

在下面的示例中，动画持续超过 2000ms。

<div amp-fx="fade-in" data-duration="2000ms">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-easing（可选）

此参数允许您在动画的持续时间内更改其速度。默认值为 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您可以从可用的预设中选择一个

• "linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00)
• "ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00)
• "ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00)（默认）
• "ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00)
• 指定 custom-bezier() 输入。

在下面的示例中，动画加速曲线是自定义指定的 cubic-bezier(...) 曲线。

<div amp-fx="fade-in" data-easing="cubic-bezier(0.40, 0.00, 0.40, 1.00)">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-margin-start（可选）

此参数确定何时触发定时动画。<percent> 中指定的值表示当元素已跨越视口的该百分比时应触发动画。默认值为 5%。

在下面的示例中，动画直到元素已从底部跨越视口的 20% 才开始。

<div amp-fx="fade-in" data-margin-start="20%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

淡入滚动

fade-in-scroll 效果允许您在元素在视口中滚动时更改元素的不透明度。这将创建一个依赖于滚动的淡入动画。默认情况下，一旦元素完全可见，我们就不再对不透明度进行动画处理。

data-margin-start（可选）

此参数确定何时触发定时动画。<percent> 中指定的值表示当元素已跨越视口的该百分比时应触发动画。默认值为 0%。

data-margin-end（可选）

此参数确定何时停止动画。<percent> 中指定的值表示当目标元素的指定量可见时，动画应已完成。默认值为 50%。

在下面的示例中，<div> 在从底部跨越视口的 80% 时完全可见。

<div amp-fx="fade-in-scroll" data-margin-end="80%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-repeat（可选）

默认情况下，一旦元素完全可见，我们就不再对不透明度进行动画处理。如果您希望不透明度随滚动而变化，即使元素已完全加载，请在动画中指定此变量。

在下面的示例中，动画完全依赖于滚动，并且当用户滚动时，<div> 会淡入和淡出。

<div amp-fx="fade-in-scroll" data-repeat>
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

float-in-top、float-in-bottom

当文档向上或向下滚动时，float-in-top 和 float-in-bottom 效果将 position: fixed 元素滑入和滑出视图。

具有 amp-fx="float-in-top" 或 amp-fx="float-in-bottom" 的元素必须具有以下 CSS 属性

• position: fixed
• overflow: hidden
• 如果是 top，则 top: 0
• 如果是 bottom，则 bottom: 0

如果未设置其中任何一个，则不会应用该效果，并且会在 开发模式下抛出警告。

fly-in-bottom、fly-in-left、fly-in-right、fly-in-top

fly-in-bottom、fly-in-left、fly-in-right 和 fly-in-top 效果允许元素的位置在视口中时按指定的量进行平移。

data-duration（可选）

这是动画发生的时间长度。默认值因设备而异，如下所示：在 480 px（移动设备的最小宽度）和 1000px（笔记本电脑屏幕的最小宽度）之间，我们将默认持续时间在 400ms 和 600ms 之间缩放。

以下是一些示例，可帮助您更好地理解这一点

1. 屏幕宽度 - 610px，fly-in-bottom 的默认持续时间为 450ms。
2. 屏幕宽度 - 675px，fly-in-bottom 的默认持续时间为 475ms。
3. 屏幕宽度 - 740px，fly-in-bottom 的默认持续时间为 500ms。
4. 屏幕宽度 - 805px，fly-in-bottom 的默认持续时间为 525ms。
5. 屏幕宽度 - 870px，fly-in-bottom 的默认持续时间为 550ms。

如果用户将此 data-duration 的默认值覆盖为 Xms，则相同的默认值将应用于所有设备。

data-easing（可选）

此参数允许您在动画的持续时间内更改其速度。默认值为 ease-out，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您可以从可用的预设中选择一个

• "linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00)
• "ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00)
• "ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00)
• "ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00)（默认）
• 指定 custom-bezier() 输入。

data-fly-in-distance（可选）

此参数确定要进行的平移。该值以视口的 <percent> 指定。默认值如下

在下面的示例中，元素沿着 Y 轴平移了视口的 20%。

<div amp-fx="fly-in-bottom" data-fly-in-distance="20%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-margin-start（可选）

此参数确定何时触发定时动画。<percent> 中指定的值表示当元素已跨越视口的该百分比时应触发动画。默认值为 5%。

组合视觉效果

开发人员还可以将 amp-fx 预设组合在一起以创建组合动画。

在下面的示例中，元素沿着 Y 轴平移，并且在 1000ms 的持续时间内将其不透明度从 0 更改为 1。

<div amp-fx="fade-in fly-in-bottom" data-duration="1000ms">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

但是，有一些预设组合在一起不会产生很好的结果。在这种情况下，我们接受列出的第一个预设，忽略冲突的预设并在控制台中发出警告。

在下面的示例中，元素通过两个冲突的预设 parallax 和 fly-in-bottom 沿着 Y 轴平移。在这种情况下，我们仅允许 parallax 动画并忽略 fly-in-bottom 预设。

<div amp-fx="parallax fly-in-bottom" data-parallax-factor="1.5">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

以下是不建议组合使用的预设组列表，AMP 建议您不要组合使用

1. parallax、fly-in-top、fly-in-bottom、
2. fly-in-left、fly-in-right、
3. fade-in、fade-in-scroll。

验证

请参阅 AMP 验证器规范中的 amp-fx-collection 规则。