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

ウェブサイトのインタラクションやUIの振る舞いなど、HTML5でモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。

JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTML5のJavaScriptライブラリについて、使い勝手や書式を紹介します。

今回紹介するメジャーなJSライブラリ7種類

メジャーなJavaScriptライブラリとして次の7種類を紹介します。

• TweenMax (GSAP)
• Anime.js
• jQuery
• TweenJS (CreateJS)
• Velocity.js
• Tween.js
• Web Animations API (Polyfill)

多くのライブラリ名に採用されている「トゥイーン」はもともとFlashの用語。開始値と終了値の「間」を示す「Between」が語源となっています。終了値までプロパティーを変化させる機能を「トゥイーン」と言います。

※記事の末尾に各種ライブラリの容量やライセンス等を記載してます

TweenMax – 最速で多機能なライブラリ

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

TweenMaxはFlashの全盛期から海外でよく使われている、歴史のあるハイエンドなライブラリ。JavaScript版やFlash(ActionScript 3.0)版が用意されています。

TweenMaxは記事「高機能なTweenMaxを使ったタイムリマップ表現」で紹介したこともありますが、かなりの機能が備わっています。多彩な表現に挑戦したい、多くのオブジェクトを滑らかに動かしたい、という方にオススメです。

書式はFlash(ActionScript 3.0)時代から変わらないオーソドックな記法。変化値とオプション値を一つのObjectで指定するのは好みが分かれるところです。位置・角度などtransformの指定にショートカットとしてxやratationが使えるのは便利です。

記述例

TweenMax.to(".rect",
        3.0, // 秒指定
        {
          x: 700,
          rotation: 360,
          repeat: -1, // 繰り返し指定
          ease: Cubic.easeInOut // 加減速の種類
        });

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

TweenMaxは113KBと容量が大きいものの、モジュールを分解して読み込むことが可能。TweenMaxの兄弟であるTweenLiteだとわずか28KBです。TweenMaxは多くの場合は無償で使えますが、特定の用途ではBusinessライセンスが必要となります。詳しくは公式サイトのLicensingページを確認ください。

Anime.js – 新進気鋭のライブラリ

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

2016年に登場した新しいライブラリで、公式サイトのオシャレな表現が注目を集めました。海外製のライブラリなのに、「アニメ」という名前が採用されているのが日本人として嬉しいですね。

パラメーターのtargetsにはセレクターを柔軟に設定できたり、プロパティーごとに異なるアニメーションも設定可能。簡素な指定で直感的にアニメーションを指定できるのが特徴と言えるでしょう。

記述例

anime({
  targets: ".rect", // 対象を指定
  translateX: 800,
  rotate: 360,
  duration: 3000, // ミリ秒指定
  loop: true, // 繰り返し
  easing: "easeInOutCubic" // 加減速の種類
});

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

TweenMaxと同様に、位置・角度などtransformの指定にショートカットとしてtranslateXやrotateが使えるのは便利です。

ただ、TweenMaxやTweenJSに比べて同時実行性能が劣るため、多くのオブジェクトを動かすのには不向きです。TweenMaxなどはWebGL向けとして、Anime.jsはHTMLページのマイクロインタラクション向けに使うのが妥当な使い分けだと思います。

jQuery – 幅広い環境で動作する枯れた技術

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

jQueryにはアニメーション用の animate() という関数が用意されています。jQueryを読み込むだけで利用できるので導入は簡単ですが、イージング（加減速）の種類が少なかったり、オプション指定がほとんどなかったりするので、複雑なことはできません。位置・角度などtransformのショートカットの指定がないのも不便です。

記述例

$(".rect")
              .css({left: 0}) // 初期値
              .animate({left: 800},
                      3000, // ミリ秒指定
                      "linear", // 加減速の種類
                      function () {
                        // 繰り返しのための呼び出し
                      }
              );

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

TweenJS – Adobe Animate CCとの連携が可能

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

TweenJSはCreateJSスイートの一部で、Adobe Animate CCのHTML5 Canvas書き出しにも採用されています。Animate CCのタイムラインで制作した複雑なトゥイーンでも再現できるのが魅力です。一般的なアニメーションライブラリはミリ秒など絶対時間で指定しますが、TweenJSは絶対時間だけでなくフレーム数でも指定可能。フレームレートの変更にも対応しているので、24fpsで制作したアニメと同期しやすいなどの利点があります。

記述例

// プラグインのインストール
createjs.CSSPlugin.install();

// フレームレートを設定
createjs.Ticker.setFPS(60);

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

createjs.Tween.get(element, {loop: true})
        .to({left: 800},
                3000, // ミリ秒
                createjs.Ease.cubicInOut // イージングの種類
        );

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

CSSの単位補完はleftやwidthなどの指定のみです。位置・角度・スケールなどのtransformの指定はできません。HTML/CSS制御は他のライブラリのほうが便利でしょう。TweenJSは主にHTML5 Canvasの制御につかうのがいいでしょう。

また、CreateJSは公式にはnpmで提供されていないため、JavaScriptをモジュール管理したい方には不向きでしょう。

次のページでは、Velocity.jsやTween.js、Web Animation APIを紹介します。