よさげなJSアニメーション&描画ライブラリまとめ

フレームワーク一つ一つに特製があるので、比較できませんが、無理やり肩並べます。

※CSSアニメーションは切っても切り離せない関係ですが、ここでは扱いません。
※Name欄のリンク先はすべてGithubのページです。

# アニメーションライブラリ<a id="orgheadline1"></a>

求めること

-   使い勝手…APIの使い勝手、記述しやすいか、わかりやすいか
-   汎用性…他のライブラリと組み合わせて使うことができるか
-   パフォーマンス

| Name                                                                     | License                    | Comment                                                                                                  | Github Star |
|------------------------------------------------------------------------ |-------------------------- |-------------------------------------------------------------------------------------------------------- |----------: |
| [TweenMax](https://greensock.com/tweenmax)(GSAP)                         | アプリや課金コンテンツは$150/year、後は無料 | Google推薦。パフォーマンスはもちろんvelocityよりも描きやすいとのことなので気になる                       | 5329        |
| [Velocity](https://github.com/julianshapiro/velocity)                    | MIT                        | jquery.animateの記述に準拠した、高速ライブラリ                                                           | 11571       |
| [web-animations-js](https://github.com/web-animations/web-animations-js) | Apache-2.0                 | 次期ブラウザ標準実装先取り。[PostCSS](https://github.com/postcss/postcss) と思想にているので気になる。パフォーマンスは謎。IEとSafari以外はこれなくても動く | 1377        |

# 描画ライブラリ<a id="orgheadline2"></a>

求めること

-   使い勝手…元FlasherなのでFlashライクなのがベスト
-   パフォーマンス

| Name                                           | License | Comment                                                                 | Github Star |
|---------------------------------------------- |------- |----------------------------------------------------------------------- |----------: |
| [Pixijs](http://www.pixijs.com/)               | MIT     | とにかく速いイメージ                                                    | 12023       |
| [Easeljs](https://github.com/CreateJS/EaselJS) | MIT     | flasherは勉強コスト低                                | 5628        |
| [Paperjs](https://github.com/paperjs/paper.js) | MIT     | 結構前からあるベクター系強そうなライブラリ                              | 7045        |
| [twojs](https://two.js.org/)                   | MIT     | [Patatap](http://patatap.com/) という作者自らのサイトで使っているベクターに特化したライブラリ | 4844        |
| [p5js](http://p5js.org/)                       | MIT     | パフォーマンスは求められないが、[Processing](https://processing.org/) のjsリメイクなので描きやすそう。 | 4507        |

# 3Dライブラリ<a id="orgheadline3"></a>

以下の二択しかない気がする。
個人で触るならThree、仕事で安定して使うならBabylonといった感じ。

| Name                                                 | License    | Comment                               | Github Star |
|---------------------------------------------------- |---------- |------------------------------------- |----------: |
| [Threejs](https://github.com/mrdoob/three.js/)       | MIT        | 王道、ドキュメント多い                | 28639       |
| [Babylonjs](https://github.com/BabylonJS/Babylon.js) | Apache-2.0 | Microsoft製。ユーザー数増加中。Typescriptフレンドリー。 | 3795        |

# その他の便利なライブラリ<a id="orgheadline4"></a>

| Name                                                    | License | Comment                                                           | Github Star |
|------------------------------------------------------- |------- |----------------------------------------------------------------- |----------: |
| [ScrollMagic](https://github.com/janpaepke/ScrollMagic) | MIT     | アップル的な、スクロールしたときに何かするやつ。TweenMaxとVelocityとの連携方法のサンプルがあったので連携しやすそう | 7704        |

# 組み合わせ例リファレンス<a id="orgheadline5"></a>

-   [PixijsとTweenMax組み合わせた例](http://front-core.github.io/ja/blog/2015/03/20/pixi-with-gsap/)
-   [Googleのアニメーションに関する記事](https://developers.google.com/web/fundamentals/design-and-ui/animations/css-vs-javascript?hl=ja)
-   [MDNのWeb Animations API(英語)](https://developer.mozilla.org/ja/docs/Web/API/Web_Animations_API)
-   [ThreejsとTweenMax組み合わせた例](http://codepen.io/clockmaker/pen/gpozrX/)
-   [TweenMaxとScrollMagic](http://scrollmagic.io/examples/index.html)

# 関連記事

- [初期化CSSライブラリ3選](http://qiita.com/Mwrote/items/84512578bef7717b3924)