🙎🏻 👩🏿‍🎓 🅿️ 最高のWebアニメーションツールのリスト 🚖 👦🏿 🏂

Webアニメーションに最適なツールのリスト。 SVG / CSS / Canvas / DOMアニメーション+ベジェ曲線とCSSアニメーションを生成するためのGUIツール。

将来的には、Webアニメーションに関する書籍やビデオコースがリストに追加されます。価値のあるツールが存在しないことに気付いたら、それについて書いてください。追加します。

また、現在のリストからツールをレビューすることも嬉しく思います。フィードバックの助けを借りて、ツールの説明をより完全にすることができます。

カテゴリー：

Svg

キャンバス

ドム

CSS

緩和

GUI

スクロール

Svg

Snap.svg

SVGで最も人気のあるライブラリの1つ。アニメーションだけでなく、一般的なSVGの便利な作業のためにも。 Raphael.jsの最新バージョン

最小重量： 81kb

リンク

Svg.js

たくさんのクールなプラグインと優れたドキュメントを備えた素晴らしいライブラリ。 Snap.svgおよびRaphael.jsと比較してパフォーマンスが向上

最小重量： 64kb

リンク

アニメートプラス

図書館は、その軽さにおいて興味深いかもしれません。著者は開発していません。

最小重量： 9kb

リンク

ビヴス

SVGループをアニメーション化するための優れたライブラリであり、GUIバージョンもあります。

最小重量： 11kb

リンク

ラファエル

IE6のようなマンモスをサポートする必要がある場合は適切なオプションです。そうでない場合は、Snap.svg、Svg.js、またはその他の最新のオプションを確認してください。

最小重量： 91kb

リンク

通路

明るさで区別される、SVG輪郭をアニメーション化するための優れたライブラリ。

最小重量： 4kb

リンク

盆栽

展示品として興味深いのですが、作者は残念ながら開発していません。

最小重量： 130kb

リンク

ProgressBar.js

ローダーにとっては、少し重いとはいえ、優れたソリューションです。

最小重量： 21kb

リンク

SVGモルフェウス

SVGをモーフィングするためのライブラリ。 GSAPプラグインはこの問題をより良く解決しますが、有料であり、このツールは無料です。

最小重量： 22kb

リンク

Velocity.js

JSアニメーションの本格的なソリューションであり、多くの偉大な人々によって使用され、著者によって積極的にサポートされています。

最小重量： 43kb

リンク

モイス

豊富な機能と宣言型インターフェースを備えた優れたライブラリ。

最小重量： 130kb

リンク

ドム

GSAP

世界のフロントエンドのアニメーションの巨人。いくつかのユニークなプラグインのスーパーパフォーマンスとトン。無料版では、すべてのプラグインが利用できるわけではありませんが、プラグインがないと機能が非常に広くなります。

最小重量： 41kb

リンク

Anime.js

かなり活発に開発されているライブラリ。その機能は非常にコンパクトで、優れたドキュメントがあります。

最小重量： 11kb

リンク

Animo.js

非常に小さなユーティリティ。ライブラリのサイズが非常に重要な場合は、検討できます。

最小重量： 6kb

リンク

Move.js

便利なインターフェースを備えた優れたソリューションと軽量なソリューション。

最小重量： 14kb

リンク

Textillate.js

残念ながら、単純なテキストアニメーションのライブラリには、非常に重い依存関係（jQueryなど）が必要です。

最小重量： 8kb

リンク

ファーミン

著者が長い間放棄していた展示品として興味深い。

最小重量： 8kb

リンク

アリチェス

著者が長い間放棄していた展示品として興味深い。

最小重量： 50kb

リンク

モティオ

自分自身を「スプライトベースのアニメーションライブラリ」として位置付け、その軽さで際立っています。

最小重量： 4kb

リンク

アニマティック

シンプルなソリューションに適した、便利なインターフェースを誇ります。

最小重量： 22kb

リンク

ただアニメートする

新鮮なライブラリは、その軽さが際立っています。著者によって積極的に開発されました。

最小重量： 14kb

リンク

ポップモーション

深刻で複雑なこと。作成者は、GSAPのより軽量な類似物として位置付けています。 Reactへの統合、SVGとの比較的軽量でクールな作業が特徴です。

チップexdenizをありがとう

最小重量： 41kb

<a href= first popmotion.io>リンク

キャンバス

Createjs

キャンバス用スイスナイフ。 canvas用の優れたAPIと、アニメーションとオーディオ用のモジュールがあります。 HTML5をAdobe Animate（Flash Proなど）にエクスポートするための標準ライブラリとして使用されます。広告/プロモーション、およびHTML5ゲームの作成に適した非常に深刻なもの。

最小重量： 186kb

リンク

ビーブ

展示品として面白いかもしれません。著者は開発していません。

最小重量： 36kb

リンク

Two.js

Canvas、SVG、さらにはWebGlでレンダリングできる興味深いライブラリ。活発に開発されており、非常に生産的で、機能に満足しています。

最小重量： 50kb

リンク

オカンバス

最小重量： 73kb

リンク

「オブジェクトベースのキャンバス描画」として配置。著者は放棄されていません。

Fabric.js

Canvasアニメーションだけでなく、それを操作するための抽象化としても適しています。

最小重量： 248kb

リンク

Paper.js

「ベクターグラフィックススクリプトスクリプティングフレームワーク」としての位置付け。真剣かつ集中的に開発されているツール。

最小重量： 277kb

リンク

コンバ

アニメーションおよび一般的にCanvasで作業するための優れたツール。

最小重量： 138kb

リンク

Deltajs

マウスイベントとタッチイベント、アニメーション、その他すべてを備えたCanvasの上にベクターグラフィックスを実装します。現在、Coreには多くの異なるアドオンモジュールがあり、それらは後でMoreパーツ（a Mootools）に移植されます。たとえば、多くのポイントを介して滑らかな曲線を描き、パスに沿ったオブジェクトの動きをアニメーション化し、ある曲線から別の曲線への変換をアニメーション化できます（たとえば、ラグランジュ曲線からベジェ曲線への変換を含む）。

WebGLとSVGの計画。

ライブラリKeytenをありがとう

最小重量： 84kb

リンク