Web Animations 1.0 は Editor's Draft 26 May 2014 なのでまだ策定の途中なのだけれど、web-animations.js というのを使うとモダンブラウザで動くらしいので試してみた。

アニメーションは DOM や SVG でも可能なのに、なんでわざわざもう一個別の仕様があるのかというと、DOM、SVG アニメーションを抽象的にタイムラインベースで制御可能にするためにあるっぽい。

構文は jQuery.animate() に似ているので取っ付き易い。勿論、 jQuery.animate() よりも強力な API になっている。

プロパティを指定してアニメーション

var wanAnim = new Animation( document.querySelector('#wan'), [ { offset: 0.0, background: '#f00' }, { offset: 0.5, background: '#ff0' }, { offset: 1.0, background: '#fff' } ], { direction: 'alternate', duration: 500, iterations: Infinity } ); dcument.timeline.play(wanAnim);

SVG Path アニメーション

<svg> <path id="animPath" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M4.745,62.605c0,0,33.324-34.099,55.799-13.173 c22.474,20.924,48.824,7.749,50.374-23.25c1.549-31,39.524-17.049,44.174,0"/> </svg>

var pathEffect = new MotionPathEffect( document.querySelector('#animPath').pathSegList ); document.timeline.play(new Animation( document.querySelector("#wan-path"), pathEffect, {duration: 1000, iterations: 200, direction: 'alternate' } ) );

タイムライン制御

複数のアニメーションの制御

グループ化

var group = new AnimationGroup([new Animation(...), new Animation(...)]); document.timeline.play(group);

シーケンス処理

var sequence = new AnimationSequence([new Animation(...), new Animation(...)]); document.timeline.play(group);