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 规则。