Web Animations API でアニメーションしてみる

はじめに

皆さん、Web Animations API というものはご存知でしょうか？
JavaScript でも CSS の keyframe でアニメーションをするのと同じような書き味で、アニメーションを実装することができるAPIです。

この記事では、Web Animations API のcompositeという機能が Safari の最新機能を試せる Technology Preview 142 でサポートされるとのことで、その使い方についてまとめてみました。

目次

• 概要
• 使い方
  • animation定義
  • コントロールメソッド
  • デモ①（基本定義・コントロールメソッド）
  • アニメーションの重ねがけ
  • デモ②（重ねがけ）
• まとめ

Web Animations API

概要

Web Animations API（以下、WAA）は、JavaScript を使ってアニメーションを構築したりプレイバックを制御することが出来ます。

ブラウザ対応としては、Firefox 48 以降および Chrome 36 以降で標準機能として利用可能です。
それ以外のものについては必要に応じて polyfill を追加します。

使い方

animation定義

element.animate(keyframes, options)

- keyframes: アニメーションの開始や終了の状態
- options: 実行回数や時間の設定

WAAでは、取得したDOMに対してanimate()を使用してkeyframesとoptionsを指定していくのですが、CSSのkeyframeと同じような感じで、より細かい調整を書くことができます。

keyframesはオブジェクトの配列で指定し、offsetでは0〜1の間でキーフレーム（どのタイミングでその状態になるか）の設定します。
例えば以下のようなコードであれば、対象のDOMが 「1000ms(1秒)の間で少しずつ出現し、さらに次の1000msで透過していく」 ようなアニメーションとなります。

Element.animate(
  [
    {
      opacity: '0', // 透過０
      offset: 0, // キーフレームの設定
      easing: 'ease-in-out'
    },
    {
      opacity: '1', // 透過1
      offset: 0.5,
      easing: 'ease-in-out'
    },
    {
      opacity: '0', // 透過０
      offset: 1,
      easing: 'ease-in-out'
    }
  ],
  {
    duration: 2000, // アニメーションにかける時間をmsで指定
    fill: 'forwards',
  }
);

コントロールメソッド

また、WAAではアニメーションのプレイバックを制御することが可能です。
アニメーションを定義したDOMに対し以下のメソッドを実行することで、アニメーションを止めたり倍速にしたりできます。

element.play() : 再生する
element.pause() : 一時停止する
element.reverse() : 逆再生する
element.cancel() : 再生終了
element.finish() : 終了時点まで進める
element.playbackRate : 再生速度のプロパティ（値を 2 にすれば2倍速になる）

デモ①（基本定義・コントロールメソッド）

上記の animation定義 と コントロールメソッド のデモがこちらです。
CSSでアニメーションした場合とコードの比較ができます。
※ startボタン→アニメーション開始/再開、pauseボタン→一時停止、reverseボタン→逆再生、morefastボタン→1.5倍速

See the Pen balloon by artm512 (@artm512) on CodePen.

アニメーションの重ねがけ

WAAでは、要素に対して複数のアニメーションをかけることが可能です。
例えば、X方向に600px移動しながらY方向に上下運動し、さらに拡大縮小を繰り返す、、、みたいな複数のアニメーションを対象のDOMに指定できます。

CSS の animationを使用してそれを実装したい場合、それぞれのアニメーションに対してDOMを入れ子にする必要があり、

<div class="anim_x">
  <div class="anim_y">
    <div class="target anim_scale"></div>
  </div>
</div>

上記に対してそれぞれアニメーションを指定するイメージになるかと思います。

しかし、WAAを使用すればそれぞれのアニメーションを

 <div class="target"></div>

に対してまとめてかけられるので、余計なDOMを増やさずに済みます。

そしてそれを実現するために登場するのが、「はじめに」で出てきた compositeという機能です。

keyframeにそれぞれ指定すると、指定したアニメーションを重ね合わせることができます。

// X方向への移動
Element.animate([
    { transform: "translateX(0px)"},
    { transform: "translateX(600px)" }
  ], {
    duration: 4000,
    composite: "add", // keyframeを重ねる
    fill: "forwards",
    easing: "linear"
})
// Y方向の上下運動
Element.animate([
    { transform: "translateY(0px)" },
    { transform: "translateY(400px)" }     
  ], {
    duration: 800,
    composite: "add", // keyframeを重ねる
    fill: "forwards",
    direction: "alternate",
    iterations: Infinity,
    easing: "cubic-bezier(.47,0,.99,.54)"
})
// 拡大縮小
Element.animate([
    { transform: "scale(2)"},
    { transform: "scale(1)" }
  ], {
    duration: 800,
    composite: "add", // keyframeを重ねる
    direction: "alternate",
    easing: "ease-in-out",
    iterations: Infinity
})

composite で add を指定しない場合、一番最後に定義したkeyframeのみが適用されます。

デモ②（重ねがけ）

アニメーション重ねがけのデモです。

See the Pen web animation api - demo by artm512 (@artm512) on CodePen.

まとめ

WAAを使うメリットをまとめると以下になります。

• 細かいタイムライン制御が可能
• アニメーション表現と実行をJSのみでできるので、場合によってはコード管理が楽にすむ
• 複数のアニメーションを重ねられるので、入れ子にするDOMを増やさなくて済む

基本的には、単純なアニメーション（直線移動のものとか）は普通にCSSで書いた方が良いかと思いますが、複雑なアニメーションが入る場合は非常に有用かと思います。

最後に

現状Polyfillを入れればどのブラウザでも動きますが、将来的にsafariに標準サポートされればより使える機会が増えてくるかもしれません。

CSSだけで複雑なアニメーションを実装するとコードが冗長になったり、場合によっては負荷が高くなってカクついたりもします。
JavaScriptでアニメーションをする引き出しを増やしておき、よりパフォーマンスの良い実装を選択できると良いですね。

参考

• JavaScript でアニメーション Web Animation API
• Web Animations API を利用する