[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

ICS MEDIA

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

メンテナンス済み / 株式会社ICS 池田 泰延
230
341

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

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

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

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

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

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

GSAPジーサップ - 最速で多機能なライブラリ

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

GSAPジーサップはFlashの全盛期から海外でよく使われている、歴史のあるハイエンドなライブラリ。JavaScript版やFlash(ActionScript 3.0)版が用意されています。かつては「TweenMax」「TweenLite」というライブラリ名でしたが、2019年秋からブランド名が「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はFlash時代から長期間にわたり継続的に開発されています。GitHubの履歴をみても高い頻度で更新されています。GSAPは多くの場合は無償で使えますが、特定の用途ではBusinessライセンスが必要となります。詳しくは公式サイトのLicensingページを確認ください。なお、弊社ICSではBusinessライセンスを導入しており、積極的にGSAPを活用しています。

GSAPの応用例としてICS MEDIAではスクロール演出やWebGL演出を紹介しています。

Popmotion - シンプル路線で人気の高いライブラリ

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

Popmotionは2015年頃から登場した容量が軽量なJSライブラリです。

低レベルなAPIが特徴で、JSライブラリの容量が15KBと小さめです。イージングはeaseIn, easeOut, easeInOutの3種類。APIはあまり多く提供されておらず、DOM操作などは自前で制御する必要があることや、ドキュメントの網羅性が低いので、上級者向けのライブラリといった印象があります。

記述例

const element = document.querySelector('.rect')

popmotion.animate({
  from: {
    x: 0,
    rotate: 0,
  },
  to: {
    x: 800,
    rotate: 360,
  },
  onUpdate(param) {
    // 仮想の変化値Objectを要素に反映
    element.style.transform = `translateX(${param.x}px) rotate(${param.rotate}deg)`;
  },
  duration: 3000, // ミリ秒指定
  repeat: Infinity, // 繰り返し
  ease: popmotion.easeInOut // 加減速の種類
});

パッケージマネージャーnpmやTypeScriptでの利用も、他のライブラリと比べて一歩進んでいます。とくにnpm trendsでは、アニメーション系ライブラリのなかでもっともダウンロード数が多いようです。

Popmotionの作者はReact向けのモーションライブラリFramer Motionも開発されています。Framer Motionの内部エンジンにPopmotionが使われていることが、ダウンロード数の増加に影響しているのかもしれません。

高い頻度ではないですが、開発は継続して行われているようです（GitHub）。

Tween24.jsトゥイーン・ニジュウヨン - チェーンメソッドで楽に書けるライブラリ

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

『Tween24.js』は、メソッドチェーンで記述するのが特徴のトゥイーンライブラリです。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。

記述例

// トゥイーンの対象を取得
const target = document.querySelector(".rect");

Tween24.loop(0,
  Tween24.serial(
    Tween24.tween(target, 3, Ease24._3_CubicInOut)
      .x(700)
      .rotation(360),
    Tween24.prop(target)
      .x(0)
      .rotation(0)
  )
).play();

Tween24.jsは103KB。パッケージマネージャーnpmやTypeScriptの型定義も提供されています。手前味噌となりますが、弊社のスタッフが開発しているJSライブラリです。

Anime.js - 軽量でAPI豊富なライブラリ

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

Anime.jsは2016年に登場したJSライブラリです。登場時に公開されたデモ（当時は公式サイト掲載されていた）のオシャレな表現が注目を集めました。海外製のライブラリなのに、「アニメ」という名前が採用されているのが日本人として嬉しいですね。

パラメーターの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ページのマイクロインタラクション向けに使うのが妥当な使い分けだと思います。また、リリースバージョンについて2020年10月のv3.2.1リリース後から開発へのコミット数が減少していますが（GitHub）、次期バージョン3.3への開発が進められているようです。

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は主にHTML CanvasやWebGLの制御につかうのがいいでしょう。

また、パッケージマネージャーのnpmで現行版1.0は提供されていないので、JavaScriptをモジュール管理したい方には不向きです。また、2019年ごろから開発が行われていない点も注意が必要です（参考：GitHub）。

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だとアニメーションが機能しないといった制限があります。

また、2018年ごろから開発が行われていない点も注意が必要です（参考：GitHub）。

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();
}

実行結果

Tween.jsの開発は継続的に行われているようです（参考：GitHub）。

Web Animations API - DOM要素のアニメーションなら

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

Web Animations APIはDOM要素をアニメーションできるAPIです。サイト「Can I Use…」によると、Chrome、Edge、Firefox、Safariがサポートしています。

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

記述例

// 要素を取得
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 APIはHTML要素の機能となるので、WebGLやCanvasには利用できません。

ライブラリではないため容量を気にしなくて良いことがメリットです。パフォーマンスのために採用するというよりは、「ライブラリ非依存で使いたいか」で決めるといいと思います。注意点としてはIE11で利用できないことです。

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

ライブラリ名 容量 ライセンス CDN npm CSS補完 WebGL
GSAP 65KB 独自 ◯ ◯ ◯ ◯
Popmotion 15KB MIT △ ◯ × ◯
Tween24.js 103KB MIT △ ◯ ◯ ◯
Anime.js 20KB MIT ◯ ◯ ◯ ◯
jQuery 90KB MIT ◯ ◯ × ×
TweenJS
(CreateJS)		 27KB MIT ◯ △ △ ◯
Velocity.js 45KB MIT ◯ ◯ ◯ ×
Tween.js 12KB MIT ◯ ◯ × ◯
Web Animations API - - - - - ×
  • ※容量はファイルサイズを記載（GZIPではありません）
  • ※CSS補完は、x等の指定をtransformかleftに、rotate等の指定をtransformへマッピングするかどうかの意味で記載しています。

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

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

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

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

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

  1. 冒頭
  2. 今回紹介するメジャーなJSライブラリ7種類
  3. GSAPジーサップ - 最速で多機能なライブラリ
  4. Popmotion - シンプル路線で人気の高いライブラリ
  5. Tween24.jsトゥイーン・ニジュウヨン - チェーンメソッドで楽に書けるライブラリ
  6. Anime.js - 軽量でAPI豊富なライブラリ
  7. TweenJS - Adobe Animate CCとの連携が可能
  8. jQuery - 幅広い環境で動作する枯れた技術
  9. Velocity.js - jQuery.animeteの置き換えに
  10. Tween.js - プレーンなJS用ライブラリ
  11. Web Animations API - DOM要素のアニメーションなら
  12. 付録：ライブラリの容量やライセンスについて
  13. まとめ：目的に適したライブラリを

\ SNSでシェアしよう /

池田 泰延

ICS代表。筑波大学 非常勤講師。ICS MEDIA編集長。個人実験サイト「ClockMaker Labs」のようなビジュアルプログラミングとUIデザインが得意分野です。

この担当の記事一覧
トップページに戻る