フレームワーク一つ一つに特製があるので、比較できませんが、無理やり肩並べます。
※CSSアニメーションは切っても切り離せない関係ですが、ここでは扱いません。
※Name欄のリンク先はすべてGithubのページです。
アニメーションライブラリ
求めること
- 使い勝手…APIの使い勝手、記述しやすいか、わかりやすいか
- 汎用性…他のライブラリと組み合わせて使うことができるか
- パフォーマンス
| Name | License | Comment | Github Star |
|---|---|---|---|
| TweenMax(GSAP) | アプリや課金コンテンツは$150/year、後は無料 | Google推薦。パフォーマンスはもちろんvelocityよりも描きやすいとのことなので気になる | 5329 |
| Velocity | MIT | jquery.animateの記述に準拠した、高速ライブラリ | 11571 |
| web-animations-js | Apache-2.0 | 次期ブラウザ標準実装先取り。PostCSS と思想にているので気になる。パフォーマンスは謎。IEとSafari以外はこれなくても動く | 1377 |
描画ライブラリ
求めること
- 使い勝手…元FlasherなのでFlashライクなのがベスト
- パフォーマンス
| Name | License | Comment | Github Star |
|---|---|---|---|
| Pixijs | MIT | とにかく速いイメージ | 12023 |
| Easeljs | MIT | flasherは勉強コスト低 | 5628 |
| Paperjs | MIT | 結構前からあるベクター系強そうなライブラリ | 7045 |
| twojs | MIT | Patatap という作者自らのサイトで使っているベクターに特化したライブラリ | 4844 |
| p5js | MIT | パフォーマンスは求められないが、Processing のjsリメイクなので描きやすそう。 | 4507 |
3Dライブラリ
以下の二択しかない気がする。
個人で触るならThree、仕事で安定して使うならBabylonといった感じ。
| Name | License | Comment | Github Star |
|---|---|---|---|
| Threejs | MIT | 王道、ドキュメント多い | 28639 |
| Babylonjs | Apache-2.0 | Microsoft製。ユーザー数増加中。Typescriptフレンドリー。 | 3795 |
その他の便利なライブラリ
| Name | License | Comment | Github Star |
|---|---|---|---|
| ScrollMagic | MIT | アップル的な、スクロールしたときに何かするやつ。TweenMaxとVelocityとの連携方法のサンプルがあったので連携しやすそう | 7704 |
組み合わせ例リファレンス
- PixijsとTweenMax組み合わせた例
- Googleのアニメーションに関する記事
- MDNのWeb Animations API(英語)
- ThreejsとTweenMax組み合わせた例
- TweenMaxとScrollMagic