Webアニメーションに最適なツールのリスト。 SVG / CSS / Canvas / DOMアニメーション+ベジェ曲線とCSSアニメーションを生成するためのGUIツール。
将来的には、Webアニメーションに関する書籍やビデオコースがリストに追加されます。 価値のあるツールが存在しないことに気付いたら、それについて書いてください。追加します。
また、現在のリストからツールをレビューすることも嬉しく思います。フィードバックの助けを借りて、ツールの説明をより完全にすることができます。
カテゴリー:
SvgキャンバスドムCSS緩和GUIスクロールSvg
Snap.svgSVGで最も人気のあるライブラリの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.jsJSアニメーションの本格的なソリューションであり、多くの偉大な人々によって使用され、著者によって積極的にサポートされています。
最小重量:
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.jsCanvas、SVG、さらにはWebGlでレンダリングできる興味深いライブラリ。 活発に開発されており、非常に生産的で、機能に満足しています。
最小重量:
50kbリンク
オカンバス最小重量:
73kbリンク
「オブジェクトベースのキャンバス描画」として配置。 著者は放棄されていません。
Fabric.jsCanvasアニメーションだけでなく、それを操作するための抽象化としても適しています。
最小重量:
248kbリンク
Paper.js「ベクターグラフィックススクリプトスクリプティングフレームワーク」としての位置付け。 真剣かつ集中的に開発されているツール。
最小重量:
277kbリンク
コンバアニメーションおよび一般的にCanvasで作業するための優れたツール。
最小重量:
138kbリンク
Deltajsマウスイベントとタッチイベント、アニメーション、その他すべてを備えたCanvasの上にベクターグラフィックスを実装します。 現在、Coreには多くの異なるアドオンモジュールがあり、それらは後でMoreパーツ(a Mootools)に移植されます。 たとえば、多くのポイントを介して滑らかな曲線を描き、パスに沿ったオブジェクトの動きをアニメーション化し、ある曲線から別の曲線への変換をアニメーション化できます(たとえば、ラグランジュ曲線からベジェ曲線への変換を含む)。
WebGLとSVGの計画。
ライブラリ
Keytenをありがとう最小重量:
84kbリンク
ピクシスエフェクト、アニメーション、さらにはゲームを作成するための非常に深刻なツール。 古いプラットフォームのWebGLとCanvasの両方でレンダリングできます。 それは途方もない機能と優れたパフォーマンスを備えていますが、その重量は適切です。
最小重量:
414kbリンク
スクロール
アオスシンプルなタスクに適した、スクロールアニメーション用の優れたシンプルなライブラリ。
最小重量:
13kbリンク
Wow.jsアニメーションをスクロールするためのシンプルなソリューション。 商用利用は無料ではありません。
最小重量:
13kbリンク
スクロールロール軽量で無料で商用利用できます。
最小重量:
9kbリンク
スクロールマジックライブラリの最新の変更は2年前であるという事実にもかかわらず、スクロールアニメーションの最も機能的なソリューションです。
最小重量:
17kbリンク
スクローラースクロールに関連付けられた複雑なアニメーション用の優れたライブラリ。 軽さと性能を誇っています。
最小重量:
12kbリンク
緩和
シーザー目的の時間曲線を生成するGUIツール。
リンク
スービックベジェ時間曲線を生成するためのツールであり、他のものよりも良くも悪くもない。
リンク
ベジェ緩和時間曲線を生成するための別のツール。
リンク
GUI
スタイリーCSSアニメーションを生成するためのGUIツール。
リンク
キーフレーマーCSSアニメーションを生成するための別のGUIツール。
リンク
CSSローダーCSSローダーの小さなセット。 色をカスタマイズすることは可能です。
リンク
Bounce.js素敵なCSSアニメーションジェネレーター。
リンク
CSSアニメーションキットCSSアニメーションを生成するためのGUIツール。 他の人より良くも悪くもない。
リンク
アニミスタ現時点では-最も機能的で興味深いGUIツールです。 少なくともお楽しみいただけます。
リンク
CSS
魔法のアニメーションさまざまなアニメーションを含むCSSクラスの大規模なセット。
最小重量:
16kbリンク
Animate.cssアニメーションを含むCSSクラスの膨大なコレクション。
最小重量:
17kbリンク
スピンキットCSSローダーの小さなセット。
リンク
CSSanimate.comCSSアニメーションを生成するためのGUIツール。
リンク
CSS3アニメーションのチートシートアニメーションを含むCSSクラスの小さなライブラリ。
最小重量:
12kbリンク
他の便利なツールを使用してコメントを投稿したり、このために特別に作成された別の
リポジトリでコミットしたりしていただけるとありがたいです。
さらに
、カタログの
GUIバージョンは、カテゴリーおよびサイズによるフィルターを使用して使用できます。