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 支持的视觉效果

视差

视差效果允许元素移动，就像它相对于页面内容的前景更近或更远一样。当用户滚动页面时，元素会根据分配给 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>

淡入

淡入效果允许元素在目标元素在视口中可见后淡入。

data-duration (可选)

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

在下面的示例中，动画持续时间超过 2000 毫秒。

<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>

淡入滚动

淡入滚动效果允许您在元素在视口内滚动时更改其不透明度。这将创建依赖滚动的淡入动画。默认情况下，一旦元素完全可见，我们将不再为不透明度设置动画。

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>

从顶部浮入、从底部浮入

当文档向上或向下滚动时，从顶部浮入和从底部浮入效果会将 position: fixed 元素滑入和滑出视图。

带有 amp-fx="从顶部浮入" 或 amp-fx="从底部浮入" 的元素必须具有以下 CSS 属性

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

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

从底部飞入、从左侧飞入、从右侧飞入、从顶部飞入

从底部飞入、从左侧飞入、从右侧飞入和从顶部飞入效果允许元素的位置在进入视口后平移指定的量。

data-duration (可选)

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

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

1. 屏幕宽度 - 610 像素，从底部飞入的默认持续时间为 450 毫秒。
2. 屏幕宽度 - 675 像素，从底部飞入的默认持续时间为 475 毫秒。
3. 屏幕宽度 - 740 像素，从底部飞入的默认持续时间为 500 毫秒。
4. 屏幕宽度 - 805 像素，从底部飞入的默认持续时间为 525 毫秒。
5. 屏幕宽度 - 870 像素，从底部飞入的默认持续时间为 550 毫秒。

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

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 轴平移，并且其不透明度在 1000 毫秒的持续时间内从 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 规则。