現場で使えるアニメーション系JSライブラリまとめ（2020年版） - GSAP, CreateJS, WebAnimation, Velocityなど

現場で使えるアニメーション系JSライブラリまとめ（2020年版）
GSAP, CreateJS, WebAnimation, Velocityなど

2020年8月5日メンテナンス済み / 株式会社ICS 池田泰延

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

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

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

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

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

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

GSAP - 最速で多機能なライブラリ

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

GSAPはFlashの全盛期から海外でよく使われている、歴史のあるハイエンドなライブラリ。JavaScript版やFlash(ActionScript 3.0)版が用意されています。かつては「TweenMax」「TweenLite」というライブラリ名でしたが、2019年秋からブランド名が「GSAP」に統一されました。

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

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

記述例

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

実行結果

GSAPは65KBと容量がやや大きいものの、モジュールを分解して読み込むことが可能。パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。詳しくは記事「ES Modules対応のgsapの使い方 - Qiita」を参照ください。

GSAPは多くの場合は無償で使えますが、特定の用途ではBusinessライセンスが必要となります。詳しくは公式サイトのLicensingページを確認ください。

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

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

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

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

記述例

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

実行結果

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

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

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

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

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

記述例

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

// フレームレートを設定
createjs.Ticker.framerate = 60;

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

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

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

また、パッケージマネージャーのnpmでは、CreateJSの次期バージョンで提供される予定のため、現行版1.0ではJavaScriptをモジュール管理したい方には不向きです。参考記事「CreateJS 2.0が待望のES Modules対応。使い方とwebpackによるバンドル方法 - Qiita」。

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

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

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

記述例

$(".rect")
  .css({ left: 0 }) // 初期値
  .animate(
    { left: 800 },
    3000, // ミリ秒指定
    "linear", // 加減速の種類
    function() {
      tween();
    }
  );

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

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

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

記述例

const 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の制作に使うのがいいでしょう。

記述例

const element = document.querySelector(".rect"); // 要素を取得
const 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）。サイト「Can I Use…」によると、ChromeやFirefoxがサポートしているだけなので、現状ではPolyfillを利用します。標準仕様であるため、学習したことが長期間にわたって活用できるでしょう。

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

記述例

// 要素を取得
const 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が使われているなど、今後覚えておきたい技術の1つです。

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

ライブラリ名	容量	ライセンス	CDN	npm	CSS補完	WebGL
GSAP	116KB	独自	◯	◯	◯	◯
Anime.js	14KB	MIT	◯	◯	◯	◯
jQuery	87KB	MIT	◯	◯	△	☓
TweenJS (CreateJS)	27KB	MIT	◯	△	△	◯
Velocity.js	45KB	MIT	◯	◯	◯	☓
Tween.js	8KB	MIT	◯	◯	☓	◯
Web Animations (Polyfill)	48KB	Apache	☓	◯	◯	☓

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

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

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

調べるのが大変という方は、とりあえずGSAPを使うのがオススメでしょうか。基本的な使い方はどのライブラリも同じなので、1つを学べば他のライブラリに勉強したことを活かせます。

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

※この記事が公開されたのは3年11ヶ月前ですが、 2020年8月に内容をメンテナンスしています。