Web Animations API（WAAPI）和SCROLLTIMELINE与滚动链接的动画

本文探讨了卷联动画，这是一种将动画进度与滚动联系起来的新的Web技术。虽然以前仅用CSS就可以实现，但本文专注于使用Web Animations API（WAAPI）和ScrollTimeline类的JavaScript方法。

我们将简要回顾Waapi，然后潜入使用ScrollTimeline创建卷轴驱动动画。这为仅CSS解决方案提供了强大的替代方法，尤其是考虑到当前浏览器兼容性限制。

Waapi：快速复习

WAAPI允许对动画进行JavaScript控制。考虑一个简单的CSS动画：从红色转变为深红色的条栏，同时横向扩展。 waapi等效既简洁又灵活：

新动画（
  新的KeyFrameFect（
    document.queryselector（'。progressbar'），
    {
      背景彩色：['红色'，'darkred']，
      变换：['scalex（0）'，'scalex（1）']，
    }，，
    {
      持续时间：2500，
      填充：“向前”，
      轻松：“线性”，
    }
  ）
）。玩（）;

或者，更简洁地使用Element.animate() 。

 document.queryselector（'。progressbar'）。动画（
  {
    背景彩色：['红色'，'darkred']，
    变换：['scalex（0）'，'scalex（1）']，
  }，，
  {
    持续时间：2500，
    填充：“向前”，
    轻松：“线性”，
   }
）；

两个示例都定义了关键帧（动画属性）和选项（持续时间，宽松等）。

集成卷轴线

为了使动画依赖于卷轴，我们集成了ScrollTimeline 。该课程创建了一个动画时间表，该时间表链接到滚动容器的进度。关键配置选项包括：

• source （或铬中的scrollSource ）：可滚动元素。默认为document.scrollingElement 。
• orientation ：滚动方向（例如，垂直的“块”）。默认为垂直。
• scrollOffsets ：定义时间表处于活动状态的进度间隔。

例子：

 const myscrolltimeline = new scrolltimeline（{{
  资料来源：document.scrollingelement，
  方向：“块”，
  滚动点：[
    新的cssunitvalue（0，'％'），
    新的cssunitvalue（100，“百分比”），
  ]，，
}）;

将其附加到Waapi动画中：

新动画（
  新的KeyFrameFect（
    document.queryselector（'＃progress'），
    {transform：['scalex（0）'，'scalex（1）']，}，
    {持续时间：1，填充：'forwards'}
  ），
  myscrolltimeline
）。玩（）;

或with Element.animate() ：

 document.queryselector（“＃progress”）。动画（
  {
    变换：[“ scalex（0）”，“ scalex（1）”]
  }，，
  { 
    持续时间：1， 
    填充：“向前”， 
    时间轴：myscrolltimeline
  }
）；

这使得动画卷轴驱动。请注意，Chromium当前使用scrollSource 。

浏览器兼容性和多填充

当前，只有基于铬的浏览器完全支持ScrollTimeline ，通常需要特征标志。罗伯特·弗拉克（Robert Flack）的卷轴式聚填充提供了更广泛的兼容性：

导入'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

高级用法：基于元素的偏移

除了绝对偏移之外， scrollOffsets还可以使用基于元素的偏移量，并根据元素在滚动容器中的位置进行动画。这些偏移构成：

1. target ：跟踪元素。
2. edge ：目标手表的目标边缘（例如，'start'，'end'）。
3. threshold ：可见度百分比（0.0-1.0）。

例子：

 {
  目标：document.queryselector（'＃targetel'），
  边缘：'end'，
  阈值：0.5，
}

可以使用多个偏移对象。

CSS与JavaScript：比较

CSS和JavaScript方法都可以实现与卷轴链接的动画。 CSS是可取的，为简单性和渐进性增强而言是可取的，但是当前的浏览器支持受到限制。 JavaScript提供了更广泛的兼容性，但需要仔细考虑JavaScript禁用的用户。选择取决于项目需求和优先级。提供的示例展示了使用WAAPI和ScrollTimeline JavaScript方法的灵活性和功能。

以上是Web Animations API（WAAPI）和SCROLLTIMELINE与滚动链接的动画的详细内容。更多信息请关注PHP中文网其他相关文章！