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中文網其他相關文章！