SVGアニメーション_JavaScriptスキルにおすすめのJavaScriptライブラリ10選

SVG は、多くの場合、クロス解像度ビデオとして使用できます。これは、高解像度の画面でも画像の鮮明さが失われることがないことを意味します。さらに、JavaScript ライブラリを使用して SVG をアニメーション化することもできます。以下では、SVG アニメーションを次のレベルに引き上げるのに役立ついくつかの JavaScript ライブラリを共有します。

ビバス

Vivus は、SVG 画像の描画過程を表示できるアニメーション JS ライブラリです。 Vivus は、他のライブラリ (jQuery など) に依存しません。この .js ファイルをページに追加し、アニメーションに使用する必要がある SVG パーツを渡すだけです。同時に、いくつかの設定を指定することで、ページが読み込まれた直後にアニメーション効果を表示することもできます。

盆栽

Bonsai は、Web サイト上で動的コンテンツを描画およびアニメーション化するために使用できる機能が豊富な JS ライブラリです。これらには、HTML5 ビデオ、バリアント Canvas、SVG が含まれます。 Bonsai フレームワークを使用すると、単純な長方形、さらには長方形の一部、あるいは必要に応じてリッチなマルチプレイヤー漫画ゲームをその中に描画することができます。

速度

Velocity は、頻繁なアニメーションに使用される JS クラス ライブラリです。 Velocityのjsアニメーションの「速度」は非常に速いです。 JQuery よりも高速で、CSS アニメーションよりもさらに高速です。 Velocity の API は $.fn.animate に非常に似ており、どちらも $() を通じて操作されます。 Velocity() は、$().animate() と比較される別のメソッドです。要約すると、fadeIn および fadeOut メソッドを含む一貫したアニメーション効果を使用する必要があります (Translator: Velocity は fadeIn および fadeOut メソッドを提供します)。

ラファエル

RaphaelJS は、Web ページ上に SVG 画像やアニメーションを描画するためにもよく使用されます。 IE6 までのさまざまな Windows ブラウザと互換性があるため、Raphael は市場で最も信頼できる js (svg) ライブラリとなっています。これを使用すると、キッチンで料理をするのと同じように、分析チャート、マップ、ゲームを作成できます。

スナップ

SnapSVG は、(Raphael と同様に) Dmitry Baranovskiy によって開発されたもう 1 つのよく知られた JS ライブラリです。これは、Adobe Web Software Group によっても保守されています。 Raphael とは異なり、IE の最新バージョンのサポートのみを提供します。これにより、SnapSVG は (Raphel と比較して) はるかに小さくなり、同じ機能 (トリムなど) を実現し、最新の機能をサポートできます。

Lazy Line Painter

Laid back Range Painter は jQuery プラグインで、通常はアトラスを描画するために使用され、Vivus に少し似ています。通常、あなたが不満を抱くのは、特別な機能が 1 つしかないことです。説明しますと、Illustrator または Inkscape を使用して SVG 画像を作成し、その SVG 画像に色の変化がなく、軌跡の変化だけがあれば、これを使用できます。

SVG.js

SVG.js は、操作とアニメーションのための軽量の SVG ライブラリです。方向、位置、色の変更を操作できます。これはまだ終わっていません。プラグインなどの他の機能を自分で実装することもできます。この例では、画像にガウスぼかし、不飽和化、比較、セピア、その他の機能を実装できる svg.filter.js などのいくつかのプラグインをアタッチできます。

歩道

Walkway は、パス、ライン、ポリラインで描画された SVG ラインの 3 つの方法をサポートしています。これは、PlayStation コレクション アニメーションを描画する良い例です。

Progressbar.js

ProgressBar.js は、漫画の SVG 線を描画するための、かわいくて受け入れやすい成長曲線グラフです。これにより、さまざまな形を成長曲線として使用できます。範囲、円、ブロックなどのいくつかの実用的な形状が統合されており、Illustrator やその他のベクター描画ツールを使用して独自の成長グラフを作成することもできます。 ProgressBar.js は軽量で、MIT ライセンスを取得しており、IE9 をサポートしています。これを使用すると、大きな縦棒成長グラフを変更できます。ストロークの幅、不透明度の読み込み、カラーの読み込みなどのプロパティを変更してアニメーションを生成することもできます。

Chartlist.js

Chartist.js は、SVG を通じて描画される、シンプルで受け入れやすいアイコン ライブラリです。 Chartist の目的は、シンプルで軽量、非侵入的なグラフ作成ライブラリを提供することです。カスタム構成を行うには、JavaScript 構成オブジェクトをいくつか提供する必要があります。それ以外の場合は、デフォルトですでにソートされているデフォルト構成が使用されます。

Chartist はインライン SVG 経由で描画されるため、提供される機能に比べて DOM 操作にはほとんど影響しません。そして、それは、単純な HTML、JavaScript、CSS を通じて実現できる個人用のコントロール、ウォーターマーク、動作などを Chartist が提供していないことを意味します。

上記は、この記事で推奨する SVG アニメーション用の JavaScript ライブラリです。皆様の JavaScript 学習の参考になれば幸いです。