Web Animations とは Web 上でアニメーションをするための仕様です。まだ策定途中ですが Chrome と Firefox ではすでに実装され始めている上に polyfill もあるようなので試してみます。
インストール
Polyfill は npm bower の両方でいれられるみたいです。
$ npm install -S web-animations-js背景色をアニメーション
背景色をアニメーションさせてみます。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
<script>
document.body.animate([
{ background: '#FFF' },
{ background: '#000' }
], {
direction: 'alternate',
duration: 1000,
iterations: Infinity
});
</script>
</body>animate が Web Animations で追加されたメソッドです。この HTML を表示すると背景色が #FFF と #000 の間を1秒( 1000 ミリ秒)ごとに交互( 'alternate' )に無限回 Infinity 移り変わります。
direction には 'normal' 'reverse' 'alternate' 'alternate-reverse' が指定できるみたいです。それぞれアニメーションの実行が普通、逆、交互、逆で交互になります。
iteration には数値を入れればその回数アニメーションされます。 Infinity で無限回です。 1.5 のような半端な値も使えます。
複数のアニメーションが終わったら処理を実行
アニメーションが終わったら finish イベントが投げられます。 CSS Animation だと個々のアニメーションの終了を捕まえるのが難しかったですが Web Animations なら簡単にできます。
var a = document.body.animate([
{ background: '#FFF' },
{ background: '#000' }
], {
direction: 'normal',
duration: 1000,
iterations: 1.5
})
a.addEventListener('finish', () => {
console.log('!');
});一時停止・再開
pause play メソッドで一時停止・再開ができます。これも CSS Animations では難しかったはずです。
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<button onclick="a.pause()">停止</button>
<button onclick="a.play()">再開</button>
<script>
var a = document.body.animate([
{ background: '#FFF' },
{ background: '#000' }
], {
direction: 'alternate',
duration: 1000,
iterations: Infinity
})
</script>
</body>