ICS MEDIA – Webのインタラクションデザインに関する最新情報が満載

Velocity.js – jQuery.animeteの置き換えに

同時実行性能：★★☆ / 容量：★★☆ / 機能：★★☆

Velocity.jsはjQueryのプラグインとしても利用できるライブラリです（jQuery無しでも使えます）。jQueryの animate() 関数の代わりとなり、jQueryよりも性能が良く、機能が豊富。CSSの単位を解釈するので、DOMの制御に便利です。

記述例

var element = document.querySelector(".rect"); // 要素を取得

Velocity(element, {
          translateX: 800,
          rotateZ: 360
        }, {
          easing: 'ease', // 加減速の種類
          duration: 3000, // ミリ秒指定
          loop: true // 繰り返し
        });

• 実行サンプルを別窓で開く
• サンプルコードを確認する

位置・角度などtransformの指定にショートカットとしてtranslateXやrotateが使えます。

なお、Velocity.jsはWebGLやCanvasとは相性がよくありません。例えば、xパラメーターを変化させようとすると勝手にpx単位がついたり、任意のObjectだとアニメーションが機能しないといった制限があります。

Tween.js – プレーンなJS用ライブラリ

同時実行性能：★★☆ / 容量：★★★ / 機能：★☆☆

Tween.jsはTweenJSと名前は似ていますが別のライブラリです。機能はあまりなく、容量が小さいことが特徴。余分な機能は搭載せず、プレーンな設計に徹しています。

CSSの単位自動補完には未対応なので、次の記述例のようにHTML要素を制御しようとすると、煩雑なコードになります。CSSには向かないので、WebGLやCanvasの制作に使うのがいいでしょう。

記述例

var element = document.querySelector(".rect"); // 要素を取得
var param = {x: 0, rotation: 0}; // 仮想の変化値Objectを作成

new TWEEN.Tween(param)
  .to({x: 800, rotation: 360}, 3000)
  .repeat(Infinity) // リピート指定
  .easing(TWEEN.Easing.Cubic.InOut) // 加減速の種類
  .onUpdate(function () { // 更新時
    // 仮想の変化値Objectを要素に反映
    element.style.transform =
      "translateX(" + param.x + "px) " +
      "rotate(" + param.rotation + "deg)";
  })
  .start();

// 更新は任意のタイミングで行う
loop();
function loop() {
  requestAnimationFrame(loop);
  TWEEN.update();
}

• 実行サンプルを別窓で開く
• サンプルコードを確認する

Web Animations API – 将来の標準仕様

同時実行性能：★★☆ / 容量：★★☆ / 機能：★★☆
※Polyfillの容量として

Web Animations APIはW3Cで定義されている標準仕様です（現在はW3C Working Draft）。ChromeやFirefoxが部分的サポートしているだけなので、現状ではPolyfillを利用します。標準仕様であるため、学習したことが長期間にわたって活用できるでしょう。

書式はシンプル。CSS TransitionsやCSS Animationsなど類似の標準技術よりも、JSでハンドリングがしやすいのが特徴です。

記述例

// 要素を取得
var element = document.querySelector(".rect");
element.animate({
  transform: [
    "translateX(0px) rotate(0deg)", // 開始値
    "translateX(800px) rotate(360deg)" // 終了値
  ]
}, {
  duration: 3000, // ミリ秒指定
  iterations: Infinity, // 繰り返し回数
  direction: "normal", // 繰り返し挙動
  easing: "ease" // 加減速種類
});

• 実行サンプルを別窓で開く
• サンプルコードを確認する

Web AnimationsはHTML要素の機能となるので、WebGLやCanvasには利用できません。

自動実行性能は良好ではあるもののブラウザでネイティブとして動作するか、Polyfillとして動作するかで異なります。パフォーマンスのために採用するというよりは、「標準に即した使い勝手でやりたいか」で決めるといいと思います。余談ですが、未来指向なフレームワークAngular 2にもWeb Animationsが使われているなど、今後覚えておきたい技術の一つです。

付録：ライブラリの容量やライセンスについて

※容量はファイルサイズを記載（GZIPではありません）

まとめ：目的に適したライブラリを

実際にどのライブラリを使用するかは目的に合わせるべきだと思います。TweenMaxは多機能で高性能が魅力で、TweenJS(CreateJS)はAdobe Animate CCとの連携が強みです。DOM制御では簡潔に記述できるAnime.jsも良い選択肢といえます。学習コストや将来性、枯れ具合、動作環境、デバッグの行いやすさ、開発環境の充実度などもあわせて、最適なライブラリを選ぶのがいいでしょう。

続編記事「JSライブラリの性能をDOMとWebGLで比較検証」で各ライブラリのパフォーマンス（同時実行性能）を紹介しています。こちらも合わせてご覧ください。