Web Animationsの基本的な考え方

Web Animationsでは、CSSアニメーションと同じように*キーフレーム(アニメーションの進捗を実際のグラフィックに適用する際の枠組み)*を定めることでオブジェクトを変形したり動かしたりすることができます。
あとは、ブラウザの側でWeb Animationsの仕様に基づきキーフレーム間をトゥイーン(自動補正)します。
例えば、色が「赤から黄色に変わる」というアニメーションであれば、タイミングから算出されたアニメーションの進捗に応じた色(50％であればオレンジ色)でグラフィックを描くことになります。

animation.png

上記の例で言えば、CSSアニメーションのキーフレームは以下のようになります。

@keyframes changeColor {
　　from {
　　　　background-color: red;
　　} to {        
　　　　background-color: yellow;
　　}
}

このキーフレームの設定では、from(0%)に「background-color: red;」、to(100%)に「background-color: yellow;」を設定しており、それを直線的に動かしていることになります。

これをWeb Animations APIを使ってJavaScriptに置き換えると、以下のようになります。

var changeColor = document.getElementById(‘box’).animate([{
　　backgroundColor: ‘red’;
}, {
　　backgroundColor: ‘yellow’;
}], {
　　duration: 3000,
　　iterations: Infinity,
　　easing: ’linear’
});

基本的な構造はCSSアニメーションで組み立てるときと同じですが、キーフレームを指定する代わりに配列を組んだオブジェクトとして表現しています。
fromやtoを宣言する必要はなく、JavaScript側でキーフレームを割り当てます。

しかし、この時点ではアニメーションは再生されません。
以下のように呼び出すことで、再生が行われます。

changeColor.play();

Web Animations APIはCSSではなくJavaScriptベースで動いているため、random関数などJavaScriptでサポートされている関数を組み合わせてアニメーションを作成したり、DOM操作で直接HTML要素を変形・移動させることも可能です。

また、Web Animations APIでは、SVGを使ったアニメーションもサポートしています(Chrome環境でのみ作動します)。

UKsov6FN16.gif

<svg id=“box”><path fill="red" d="M30,100L100,30L170,100L100,170z" class="target"/></svg>

var target = document.getElementById(‘box’).animate([ d:{
　　"path('M30,100L100,30L170,100L100,170z')", 
　　"path('M40,40L160,40L160,160L40,160z')", 
　　"path('M100,30L170,100L100,170L30,100z')"
}], {
　　duration: 2000,
　　iterations: 2
});

以上により、3種類のフレームをセットしながら、なめらかに変形するSVGアニメーションが完成します。

このように、SVGアニメーションを作成する際に、コマとなるPathが分かって入れば、Web Animationsのanimate関数内でそのコマをつなぎ合わせることで、動きのある複雑なSVGアニメーションを実装することも可能です。