本文探討了卷聯(lián)動(dòng)畫，這是一種將動(dòng)畫進(jìn)度與滾動(dòng)聯(lián)系起來(lái)的新的Web技術(shù)。雖然以前僅用CSS就可以實(shí)現(xiàn)，但本文專注于使用Web Animations API（WAAPI）和ScrollTimeline類的JavaScript方法。

我們將簡(jiǎn)要回顧Waapi，然后潛入使用ScrollTimeline創(chuàng)建卷軸驅(qū)動(dòng)動(dòng)畫。這為僅CSS解決方案提供了強(qiáng)大的替代方法，尤其是考慮到當(dāng)前瀏覽器兼容性限制。

Waapi：快速?gòu)?fù)習(xí)

WAAPI允許對(duì)動(dòng)畫進(jìn)行JavaScript控制?？紤]一個(gè)簡(jiǎn)單的CSS動(dòng)畫：從紅色轉(zhuǎn)變?yōu)樯罴t色的條欄，同時(shí)橫向擴(kuò)展。 waapi等效既簡(jiǎn)潔又靈活：

新動(dòng)畫（
  新的KeyFrameFect（
    document.queryselector（'。progressbar'），
    {
      背景彩色：['紅色'，'darkred']，
      變換：['scalex（0）'，'scalex（1）']，
    }，，
    {
      持續(xù)時(shí)間：2500，
      填充：“向前”，
      輕松：“線性”，
    }
  ）
）。玩（）;

或者，更簡(jiǎn)潔地使用Element.animate() 。

 document.queryselector（'。progressbar'）。動(dòng)畫（
  {
    背景彩色：['紅色'，'darkred']，
    變換：['scalex（0）'，'scalex（1）']，
  }，，
  {
    持續(xù)時(shí)間：2500，
    填充：“向前”，
    輕松：“線性”，
   }
）；

兩個(gè)示例都定義了關(guān)鍵幀（動(dòng)畫屬性）和選項(xiàng)（持續(xù)時(shí)間，寬松等）。

集成卷軸線

為了使動(dòng)畫依賴于卷軸，我們集成了ScrollTimeline 。該課程創(chuàng)建了一個(gè)動(dòng)畫時(shí)間表，該時(shí)間表鏈接到滾動(dòng)容器的進(jìn)度。關(guān)鍵配置選項(xiàng)包括：

• source （或鉻中的scrollSource ）：可滾動(dòng)元素。默認(rèn)為document.scrollingElement 。
• orientation ：滾動(dòng)方向（例如，垂直的“塊”）。默認(rèn)為垂直。
• scrollOffsets ：定義時(shí)間表處于活動(dòng)狀態(tài)的進(jìn)度間隔。

例子：

 const myscrolltimeline = new scrolltimeline（{{
  資料來(lái)源：document.scrollingelement，
  方向：“塊”，
  滾動(dòng)點(diǎn)：[
    新的cssunitvalue（0，'％'），
    新的cssunitvalue（100，“百分比”），
  ]，，
}）;

將其附加到Waapi動(dòng)畫中：

新動(dòng)畫（
  新的KeyFrameFect（
    document.queryselector（'＃progress'），
    {transform：['scalex（0）'，'scalex（1）']，}，
    {持續(xù)時(shí)間：1，填充：'forwards'}
  ），
  myscrolltimeline
）。玩（）;

或with Element.animate() ：

 document.queryselector（“＃progress”）。動(dòng)畫（
  {
    變換：[“ scalex（0）”，“ scalex（1）”]
  }，，
  { 
    持續(xù)時(shí)間：1， 
    填充：“向前”， 
    時(shí)間軸：myscrolltimeline
  }
）；

這使得動(dòng)畫卷軸驅(qū)動(dòng)。請(qǐng)注意，Chromium當(dāng)前使用scrollSource 。

瀏覽器兼容性和多填充

當(dāng)前，只有基于鉻的瀏覽器完全支持ScrollTimeline ，通常需要特征標(biāo)志。羅伯特·弗拉克（Robert Flack）的卷軸式聚填充提供了更廣泛的兼容性：

導(dǎo)入'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

高級(jí)用法：基于元素的偏移

除了絕對(duì)偏移之外， scrollOffsets還可以使用基于元素的偏移量，并根據(jù)元素在滾動(dòng)容器中的位置進(jìn)行動(dòng)畫。這些偏移構(gòu)成：

1. target ：跟蹤元素。
2. edge ：目標(biāo)手表的目標(biāo)邊緣（例如，'start'，'end'）。
3. threshold ：可見度百分比（0.0-1.0）。

例子：

 {
  目標(biāo)：document.queryselector（'＃targetel'），
  邊緣：'end'，
  閾值：0.5，
}

可以使用多個(gè)偏移對(duì)象。

CSS與JavaScript：比較

CSS和JavaScript方法都可以實(shí)現(xiàn)與卷軸鏈接的動(dòng)畫。 CSS是可取的，為簡(jiǎn)單性和漸進(jìn)性增強(qiáng)而言是可取的，但是當(dāng)前的瀏覽器支持受到限制。 JavaScript提供了更廣泛的兼容性，但需要仔細(xì)考慮JavaScript禁用的用戶。選擇取決于項(xiàng)目需求和優(yōu)先級(jí)。提供的示例展示了使用WAAPI和ScrollTimeline JavaScript方法的靈活性和功能。

以上是Web Animations API（WAAPI）和SCROLLTIMELINE與滾動(dòng)鏈接的動(dòng)畫的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！