WEB掻っ穿じり

WEB備忘録とチャリとカメラ

【備忘録】アニメーション系js(lib)のまとめ

  category:web

アニメーション系JS 7種 + α

CSS Transition、WebGL、Canvas、SVG… jsで実装するアニメーションライブラリをさらっと見てみる。

(トゥイーンは元はFlashの用語、開始と終了の間を示すBetweenから来ている。開始値〜終了値までプロパティを変化させる機能のこと)


TweenMax

TweenMax
https://greensock.com/tweenmax

同時実行:★★★ / 容量:★☆☆ / 機能:★★★

最速で多機能、Flashの全盛期から使われる歴史あるハイエンドライブラリ。
JS版、ActionScript 3.0版が用意されている。
多彩な表現、複数のオブジェクトを滑らかに動かしたい、、ってのに向いてる。

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

See the Pen 01 TweenMax.js by birdwing3 (@birdwing3) on CodePen.

TweenMax の容量は113KBと大きめ、TweenLiteだとわずか28KB。
パッケージマネージャーnpmやTypeScriptでの利用にも対応。

商用利用ではBusinessライセンスが必要。


Anime.js

Anime.js
https://animejs.com/

同時実行:★☆☆ / 容量:★★★ / 機能:★★☆

2016年に登場、海外製だけど『アニメ』っていう名前。
かんたんな指定で直感的にアニメーションを指定できるのが特徴。

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

See the Pen 02anime.js by birdwing3 (@birdwing3) on CodePen.

同時実行性能が劣るため、多くのオブジェクトを動かすのには不向き。
ちょっとした動きをつけために使うのが妥当。


TweenJS

TweenJS
https://www.createjs.com/tweenjs

同時実行:★★☆ / 容量:★★☆ / 機能:★★★

CreateJSスイートの一部でAdobe Animate CCのHTML5 Canvas書き出しにも採用されている。
Animate CCのタイムラインで制作した複雑なトゥイーンでも再現できるのが魅力。
ミリ秒など絶対時間だけでなくフレーム数でも指定可能、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 // イージングの種類
  );
  

See the Pen 03TweenJS by birdwing3 (@birdwing3) on CodePen.

CSSの単位補完はleftやwidthなどの指定のみで、transformの指定ができない。
HTML/CSS制御は他のライブラリに劣る。
HTML5 CanvasやWebGLの制御に使うのに向いている。

CreateJS 2.0からES Modules対応、webpackのバンドルとかに使える。


jQuery

jQuery
https://jquery.com/

同時実行:★☆☆ / 容量:★☆☆ / 機能:★☆☆

animate() メソッドが用意されている、かんたんに導入。
イージング(加減速)の種類が少ない、オプション指定がほとんどない、複雑なことはできない。
位置・角度などtransformのショートカットの指定がないのも不便。

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

See the Pen 04jQuery by birdwing3 (@birdwing3) on CodePen.


Velocity.js

TweenMax
http://velocityjs.org/

同時実行:★★☆ / 容量:★★☆ / 機能:★★☆

jQueryのプラグインとしても利用できるライブラリ(jQuery無しでも使える)。
jQueryのanimate() 関数と置き換え、性能、機能もよくなる。
CSSの単位を解釈するので、DOMの制御に便利。

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

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

See the Pen 05Velocity.js by birdwing3 (@birdwing3) on CodePen.

位置・角度などtransformの指定にショートカットとしてtranslateXやrotateが使える。
WebGLやCanvasとは相性がよくない。

例えば、xパラメーターを変化させようとすると勝手にpx単位がついたり、任意のObjectだとアニメーションが機能しないってこともある。


Tween.js

Tween.js
https://github.com/tweenjs/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();
}

See the Pen 06Tween.js by birdwing3 (@birdwing3) on CodePen.

omni7セブンネットショッピング


Web Animations API

Web Animations API
https://www.w3.org/TR/web-animations-1/

同時実行:★★☆ / 容量:★★☆ / 機能:★★☆

W3Cで定義されているアニメーションのための標準仕様(W3C Working Draft)。

Can I Use…だと、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' // 加減速種類
});
  

See the Pen 07Web Animations API by birdwing3 (@birdwing3) on CodePen.

HTML要素の機能となるので、WebGLやCanvasには利用できない。
ブラウザでネイティブとして動作するか、Polyfillとして動作するかで実行性能は異なる。

Angular 2にもWeb Animationsが使われるとのこと。


各ライブラリの容量、ライセンス

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

AppleのOpenGL非推奨化・WebGPU

WWDC 18、macOS 10.14 MojaveとiOS 12はOpenGL/OpenCLおよびOpenGL ESを非推奨化する旨が記載されている。
macOS 10.14とiOS 12でOpenGL等は引き続き動作するものの、Metalへの置き換えを呼びかけている。

 AppleのOpenGL非推奨化

AppleではOpenGLとOpenCL非推奨化について言及されていて、「OpenGLを使用するゲームやグラフィックスを多く使用するアプリケーションでは、今ではMetalを採用するはずです」と記載されている。

WebでもWebGLはOpenGLがベースになっているため、影響を受ける可能性あり。
Appleが提案してきたのがWebGPU。

SafariでWebGPUのdemoを試せる

OpenGLを非推奨にするというAppleの発表は、Safariを使ったWebGL開発には何の影響も与えません。 下層は変わるかもしれませんが、WebGLは変わりません。

Flashのように、WebGLを利用したコンテンツが今後再生されなくなる、、ってのは今の所まだまだ大丈夫そう。

その他アニメーションjsライブラリ

用途や使い所もバラバラですがその他にもライブラリは存在しているので、紹介(使うかもしれないので)

Chart.js

Chart.js
https://www.chartjs.org/

シンプルなグラフなど描画するなら手軽に、キレイに作成することができる。


D3.js

D3.js
https://www.chartjs.org/

Data-Driven Documents、複雑なデータのビジュアライズを比較的容易に実装できる。
チャートライブラリは別にC3.jsがある。
基本SVG描画での操作、DOM操作も可能、v4からCanvas要素へのレンダリングも対応。


Three.js

Three.js
https://threejs.org/

WebGLを扱える3Dライブラリ、商用利用も可能。


Mo.js

Mo.js
https://mojs.github.io/

生き生きとして滑らかなモーション効果をSVGのアニメーションで実装できるライブラリ。

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.


Popmotion

Popmotion
https://popmotion.io/

11kbほどの軽量ライブラリ、トゥイーンアニメーション/ドラッグアニメーションなどが得意。


Vivus

Vivus
https://maxwellito.github.io/vivus/

SVGでドローイングをしているような効果が得られるライブラリ。


GreenSock JS

GreenSock JS
https://greensock.com/

GSAP(GreenSock Animation Platform)は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダード。 TweenMaxはGSAPのモジュールの1つ。
React、Vue、Angular、vanilla JSに対応。


Scroll Reveal

Scroll Reveal
https://scrollrevealjs.org/

ブラウザのスクロールイベントをトリガーにして要素に対して様々な動きをつけられるアニメーション。


Hover (CSS)

Hover (CSS)
http://ianlunn.github.io/Hover/

cssライブラリ、CSS3を使用したホバーエフェクトのコレクションを提供。


Kute.js

Kute.js
http://thednp.github.io/kute.js/

テキスト、SVG、html要素も自在に効果をつけられる、多機能ライブラリ


Typed.js

Typed.js
https://mattboldt.com/demos/typed-js/

名前の通り、タイピング風アニメが得られるjQueryプラグイン