WebアニメーションAPI（WAAPI）とScrollTimelineを使用したスクロールリンクアニメーション

この記事では、アニメーションの進捗状況をスクロールにリンクする新しいWebテクノロジーであるスクロールリンクアニメーションについて説明します。以前はCSSだけで達成できましたが、この記事では、WebアニメーションAPI（WAAPI）とScrollTimelineクラスを使用したJavaScriptアプローチに焦点を当てています。

Waapiを簡単に確認し、 ScrollTimelineを使用してスクロール駆動型のアニメーションを作成します。これは、特に現在のブラウザの互換性の制限を考慮して、CSSのみのソリューションの強力な代替品を提供します。

WAAPI：簡単な復習

WAAPIにより、アニメーションをJavaScript制御できます。シンプルなCSSアニメーションを考えてみましょう。水平に拡大しながら赤から暗赤色に移行するバー。 WAAPI同等物は簡潔で柔軟です：

新しいアニメーション（
  新しいkeyframeeffect（
    document.QuerySelector（'。ProgressBar '）、
    {
      BackgroundColor：['Red'、 'Darkred']、
      変換：['Scalex（0）'、 'Scalex（1）']、
    }、
    {
      期間：2500、
      塗りつぶし：「フォワード」、
      緩和：「線形」、
    }
  ））
）。遊ぶ（）;

または、より簡潔にElement.animate()を使用して：

 document.queryselector（'。ProgressBar '）。
  {
    BackgroundColor：['Red'、 'Darkred']、
    変換：['Scalex（0）'、 'Scalex（1）']、
  }、
  {
    期間：2500、
    塗りつぶし：「フォワード」、
    緩和：「線形」、
   }
）;

どちらの例でも、キーフレーム（アニメーションプロパティ）とオプション（期間、緩和など）を定義します。

スクロルチメリンの統合

アニメーションをスクロール依存性にするために、 ScrollTimelineを統合します。このクラスは、スクロールコンテナの進行状況にリンクされたアニメーションタイムラインを作成します。重要な構成オプションは次のとおりです。

• source （またはクロムのscrollSource ）：スクロール可能な要素。デフォルトはdocument.scrollingElementになります。
• orientation ：スクロール方向（例えば、垂直の「ブロック」）。デフォルトは垂直になります。
• scrollOffsets ：タイムラインがアクティブな場合の進行状況間隔を定義します。

例：

 const myscrolltimeline = new Scrolltimeline（{
  出典：document.scrollingelement、
  オリエンテーション：「ブロック」、
  スクロールオフセット：[
    新しいcssunitvalue（0、 'パーセント'）、
    新しいcssunitvalue（100、 'パーセント'）、
  ]、、
}）;

これをWAAPIアニメーションに添付してください：

新しいアニメーション（
  新しいkeyframeeffect（
    document.queryselector（ '＃progress'）、
    {transform：['scalex（0）'、 'scalex（1）']、}、
    {期間：1、fill： 'forwards'}
  ）、、
  myscrolltimeline
）。遊ぶ（）;

またはElement.animate()で：

 document.queryselector（ "＃progress"）。
  {
    変換：["scalex（0）"、 "scalex（1）"]
  }、
  { 
    期間：1、 
    記入：「フォワード」、 
    タイムライン：myscrolltimeline
  }
）;

これにより、アニメーションがスクロール駆動型になります。 Chromiumは現在、 scrollSourceを使用していることに注意してください。

ブラウザの互換性とポリフィル

現在、Chromiumベースのブラウザのみが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アニメーションAPI（WAAPI）とScrollTimelineを使用したスクロールリンクアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。