最高の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
リンク




ピクシス



エフェクト、アニメーション、さらにはゲームを作成するための非常に深刻なツール。 古いプラットフォームの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.com



CSSアニメーションを生成するためのGUIツール。

リンク



CSS3アニメーションのチートシート



アニメーションを含むCSSクラスの小さなライブラリ。

最小重量: 12kb
リンク




他の便利なツールを使用してコメントを投稿したり、このために特別に作成された別のリポジトリでコミットしたりしていただけるとありがたいです。

さらにカタログのGUIバージョンは、カテゴリーおよびサイズによるフィルターを使用して使用できます。

Source: https://habr.com/ru/post/J341554/


All Articles