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

如果未设置其中任何一项，则不会应用效果，并且会在 development mode 中发出警告。

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>

然而，有些预设不能组合在一起以创建出色的效果。在这种情况下，我们接受列出的第一个预设，忽略冲突的预设并在控制台中发出警告。

在下面的示例中，元素沿 Y 轴平移，由两个冲突的预设 parallax 和 fly-in-bottom 确定。在这种情况下，我们只允许 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 规则。