10_1_6 Web Animations APIアニメーションの特徴

WAAPIアニメーションには、次の特徴があります。

WAAPIのタイムラインは、ドキュメントのタイムラインを受け継いだもの

windowオブジェクトには、高精度のタイム値を提供するwindow.performanceオブジェクトが用意されており、ページが読み込まれたら、ドキュメントのタイムライン(document.timeline)がwindow.performaceのnavigationStartプロパティの値を起点(タイム値0)として、自動的に作成される。

WAAPIのAnimationオブジェクトはこのドキュメントのタイムラインを受け継いで、自身のタイムラインを作成し、その上でアニメーションを再生する。

時間を縮めたり、過去や未来へ自由に行き来できる

タイミングモデルが出力する進捗値は、現実の時間値とは関係のない、その時その時のタイム値にもとづく値なので、それまでのタイム値の影響を受けない、ただの小さな数値の羅列。

この性質により、WAAPIのアニメーションでは、アニメーション中に流れる時間を自在に操ることができる。

たとえば、進捗値の目盛りを1つ飛ばしで再生すると、再生スピードは倍になる(時間が縮む)。また15% -> 0%に移動するとそこは過去であり、逆は未来、ということになる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA