【備忘録】アニメーション系js(lib)のまとめ
category:web
アニメーション系JS 7種 + α
CSS Transition、WebGL、Canvas、SVG… jsで実装するアニメーションライブラリをさらっと見てみる。
- TweenMax ver.2.0.1
- Anime.js ver.2.2
- TweenJS ver.1.0.0 (CreateJS)
- jQuery v3.2.1
- Velocity.js v1.5.1
- Tween.js v17.2.0
- Web Animations API (Polyfill)
(トゥイーンは元はFlashの用語、開始と終了の間を示すBetweenから来ている。開始値〜終了値までプロパティを変化させる機能のこと)
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
同時実行:★☆☆ / 容量:★★★ / 機能:★★☆
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
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
同時実行:★☆☆ / 容量:★☆☆ / 機能:★☆☆
animate() メソッドが用意されている、かんたんに導入。
イージング(加減速)の種類が少ない、オプション指定がほとんどない、複雑なことはできない。
位置・角度などtransformのショートカットの指定がないのも不便。
$('.rect') .css({left: 0}) // 初期値 .animate({left: 800}, 3000, // ミリ秒指定 'linear', // 加減速の種類 function () { tween(); } );
See the Pen 04jQuery by birdwing3 (@birdwing3) on CodePen.
Velocity.js
同時実行:★★☆ / 容量:★★☆ / 機能:★★☆
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
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.
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とOpenCL非推奨化について言及されていて、「OpenGLを使用するゲームやグラフィックスを多く使用するアプリケーションでは、今ではMetalを採用するはずです」と記載されている。
WebでもWebGLはOpenGLがベースになっているため、影響を受ける可能性あり。
Appleが提案してきたのがWebGPU。
- 現代のウェブプラットフォーム設計パターンにうまく対応するAPI
- アプリケーションのパフォーマンスを向上させる低レベルのAPI
- より現代的なAPIによって提供され、多くのデバイスで利用可能なGPUの計算機能を提供するAPI
- 最新の低レベルのグラフィックスAPIを持つすべてのプラットフォームで合理的に実装できるテクノロジ
- JavaScriptとWebAssemblyの両方に効率的なバインディングを提供するために設計されたAPI
OpenGLを非推奨にするというAppleの発表は、Safariを使ったWebGL開発には何の影響も与えません。 下層は変わるかもしれませんが、WebGLは変わりません。
Flashのように、WebGLを利用したコンテンツが今後再生されなくなる、、ってのは今の所まだまだ大丈夫そう。
その他アニメーションjsライブラリ
用途や使い所もバラバラですがその他にもライブラリは存在しているので、紹介(使うかもしれないので)
Chart.js
シンプルなグラフなど描画するなら手軽に、キレイに作成することができる。
D3.js
Data-Driven Documents、複雑なデータのビジュアライズを比較的容易に実装できる。
チャートライブラリは別にC3.jsがある。
基本SVG描画での操作、DOM操作も可能、v4からCanvas要素へのレンダリングも対応。
Three.js
WebGLを扱える3Dライブラリ、商用利用も可能。
Mo.js
生き生きとして滑らかなモーション効果をSVGのアニメーションで実装できるライブラリ。
See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.
Popmotion
11kbほどの軽量ライブラリ、トゥイーンアニメーション/ドラッグアニメーションなどが得意。
Vivus
https://maxwellito.github.io/vivus/
SVGでドローイングをしているような効果が得られるライブラリ。
GreenSock JS
GSAP(GreenSock Animation Platform)は、高速・軽量のHTML5アニメーションライブラリで、アニメーションライブラリのデファクトスタンダード。
TweenMaxはGSAPのモジュールの1つ。
React、Vue、Angular、vanilla JSに対応。
Scroll Reveal
ブラウザのスクロールイベントをトリガーにして要素に対して様々な動きをつけられるアニメーション。
Hover (CSS)
http://ianlunn.github.io/Hover/
cssライブラリ、CSS3を使用したホバーエフェクトのコレクションを提供。
Kute.js
http://thednp.github.io/kute.js/
テキスト、SVG、html要素も自在に効果をつけられる、多機能ライブラリ
Typed.js
https://mattboldt.com/demos/typed-js/
名前の通り、タイピング風アニメが得られるjQueryプラグイン