CSS HoudiniのアニメーションAPI &アニメーションタイムライン

このポストはoriginally published on Smashing Magazine そして、私はそれがより消化できるように部品に分割することを決めた.私はポストをMarkdownに変えて、それの一部を毎週devに公開します.あなたがそれをすぐに全体で読むことを望むならば、すべてのパーツがDEVで利用できるまで、雑誌を壊すことに関してそれを読んでください.

アニメーションAPI

アニメーションAPIは様々なイベント(スクロール、ホバー、クリックなど)を聞くためにオプションでWebアニメーションを拡張し、アニメーションのワークレットを使用して独自のスレッドでアニメーションを実行してパフォーマンスを向上させます.これは、ユーザーアクションを実行するには、実行中のアニメーションの流れを制御することができます非ブロッキング方法.
任意のワークレットのように、アニメーションワークレットを最初に登録する必要があります.

registerAnimator("animationWorkletExample", class {
  constructor(options) {
    /* ... */
  }
  animate(currentTime, effect) {
    /* ... */
  }
});

このクラスは2つの関数から成ります:

constructor : 新しいインスタンスが作成されたときに呼び出されます.一般的なセットアップに使用します.

animate : アニメーションロジックを含む主な関数.以下の入力引数を提供します:

currentTime : 定義されたタイムラインからの現在の時刻の値

effect : このアニメーションが使用する効果の配列

アニメーションWorkletが登録された後に、それは主なJavaScriptファイルに含まれる必要があります、アニメーション(要素、keyframe、オプション)は定義される必要があります、そして、アニメーションは選択されたタイムラインで例示されます.タイムラインの概念とWebアニメーションの基礎を次のセクションで説明します.

/* Include Animation Worklet */
await CSS.animationWorklet.addModule("path/to/worklet/file.js");;

/* Select element that's going to be animated */
const elementExample = document.getElementById("elementExample");

/* Define animation (effect) */
const effectExample = new KeyframeEffect(
  elementExample,  /* Selected element that's going to be animated */
  [ /* ... */ ],   /* Animation keyframes */
  { /* ... */ },   /* Animation options - duration, delay, iterations, etc. */
);

/* Create new WorkletAnimation instance and run it */
new WorkletAnimation(
  "animationWorkletExample"  /* Worklet name */
  effectExample,             /* Animation (effect) timeline */
  document.timeline,         /* Input timeline */
  {},                        /* Options passed to constructor */
).play();                    /* Play animation */

タイムラインマッピング

Webアニメーションタイムラインと効果の現地時間のタイムラインに現在の時刻のマッピングに基づいています.たとえば、3つのキーフレーム(スタート、ミドル、ラスト)を繰り返し繰り返し、1ページがロードされた後、1秒後に、4秒の期間で繰り返しアニメーションを見てみましょう.
例からの効果タイムラインはこのようになります(遅延なしで4秒目の持続時間).
エフェクトタイムライン
キーフレーム
0 ms
最初のキーフレーム
2000 MS
中間キーフレーム-進行中のアニメーション
4000 ms
最後のキーフレーム-アニメーションを終了するか、最初のキーフレームにリセットする
よりよく理解するためにeffect.localTime , その値を3000 ms(アカウント1000 ms遅延を考慮に入れて)に設定することによって、結果として生じるアニメーションは効果タイムライン(中間のキーフレームのための1000 msの遅れ+ 2000 ms)で中間のキーフレームにロックされるでしょう.400 ms間隔(アニメーション継続時間)で繰り返すので、値を7000 msと1100 msに設定することによっても同様の効果が生じる.

animate(currentTime, effect) {
  effect.localTime = 3000; // 1000ms delay + 2000ms middle keyframe
}

一定のときにアニメーションは発生しませんeffect.localTime アニメーションが特定のキーフレームにロックされているため、値.元素を適切にアニメーション化するためにeffect.localTime 動的にする必要があります.値は、currentTime 引数やその他の変数を入力します.
次のコードは、タイムラインの1 : 1(線形関数)マッピングのローカル表現を有効にする関数表現を示します.

animate(currentTime, effect) {
  effect.localTime = currentTime; // y = x linear function
}

タイムラインdocument.timeline )
局所効果時間
キーフレームstartTime + 0 ms (経過時間)startTime + 0 ms
ファーストstartTime + 1000 ms(経過時間)startTime + 1000 ms(遅延)＋0 ms
ファーストstartTime + 3000 ms(経過時間)startTime + 1000 ms(遅延)+ 2000 ms
ミドルstartTime + 5000 ms (経過時間)startTime + 1000 ms(遅延)＋4000 ms
ラストファーストstartTime + 7000 ms(経過時間)startTime + 1000 ms(遅延)＋6000 ms
ミドルstartTime + 9000 ms(経過時間)startTime + 1000 ms(遅延)＋8000 ms
ラストファースト
タイムラインは1 : 1の効果を現地時間に制限されません.アニメーションAPIは、開発者はanimate function 複雑なタイムラインを作成するには、標準のJavaScript関数を使用します.アニメーションはまた、各反復(同じアニメーションが繰り返される)で同じように振る舞う必要はありません.
アニメーションは、ロードされた瞬間からミリ秒を数え始めるだけのドキュメントのタイムラインに依存する必要はありません.スクロールイベントのようなユーザーアクションを使用してアニメーションのタイムラインとして使用することができますScrollTimeline オブジェクト.たとえば、ユーザーが200ピクセルにスクロールしたときに、ユーザーが画面上の800ピクセルにスクロールしたときに終了することができますアニメーションを開始することができます.

const scrollTimelineExample = new ScrollTimeline({
  scrollSource: scrollElement,  /* DOM element whose scrolling action is being tracked */
  orientation: "vertical",      /* Scroll direction */
  startScrollOffset: "200px",   /* Beginning of the scroll timeline */
  endScrollOffset: "800px",    /* Ending of the scroll timeline */
  timeRange: 1200,              /* Time duration to be mapped to scroll values*/
  fill: "forwards"              /* Animation fill mode */
});

アニメーションは自動的にユーザーのスクロール速度に適応し、滑らかで応答性が残っている.アニメーションのワークアウトはメインスレッドをオフに実行され、ブラウザのレンディングエンジンに接続されているので、ユーザーのスクロールに依存してアニメーションがスムーズに実行することができます非常に演奏することができます.

例

次の例では、非線形のタイムラインの実装方法を示します.変更を使用Gaussian function と同じタイムラインで翻訳と回転アニメーションを適用します.完全なソースコードはexample repository .

修正Gauss関数時間マッピングを用いたアニメーションAPIによるアニメーション作成

特徴検出

if (CSS.animationWorklet) {
  /* ... */
}

W 3 C仕様ステータス

First Public Working Draft : コミュニティレビューのための準備、仕様変更を起こしやすい

ブラウザサポート

グーグルクローム
マイクロソフトエッジ
オペラブラウザ
ファイアフォックス
サファ
部分的なサポート(*)
部分的なサポート(*)
部分的なサポート(*)
サポートされない
サポートされない
(*)実験的なWebプラットフォーム機能を有効にします.
データソース:Is Houdini Ready Yet?
これらの商品はコーヒーによって製造されている.それで、あなたが私の仕事を楽しんで、それが役に立つとわかるならば、私にコーヒーを買うことを考えてください!私は本当に感謝します.

このポストを読む時間を割いてくれてありがとう.シリーズの次の部分に目を離さないでください.あなたがこれを見つけたならば、それを与えてください❤️ or 🦄, 共有とコメント.