SVGをアニメートする8つのJavaScriptライブラリ
SVGは解像度に依存しないグラフィックです。それは意志 品質を損なうことなく、あらゆるタイプのスクリーンで見栄えがよくなります。. それ以外にも、SVGにいくつかのアニメーション効果を追加することもできます。.
前回のSVGシリーズの記事の1つでは、SVGアニメーションがどのように動作するかを説明しました。
Hongkiat.comに関するその他の情報：
- Animate.css - アニメーションを簡単に作成するためのCSS3ライブラリ
- Textillate.jsでテキストを簡単にアニメート
- PhotoshopのテキストをSVGに変換する方法
- jQueryを使ってアニメーション化してコンテンツを隠したりスライドさせたりする
1.ヴィヴァス
VivusはJavaScriptライブラリです。 SVGに描画されているように見せる. Vivusは、依存関係（jQueryなど）を必要とせずにそのまま使用できます。単に含める .js あなたのHTMLにファイルし、すぐにアニメーションを開始するためのいくつかのプリセットオプションとともに、アニメーション化したいSVG要素を指定します。.
例えば：
new Vivus（ 'svg-element'、type： 'oneByOne'、duration：200）;
上記は私のSVG要素をアニメーション化します。 SVG要素 200ミリ秒単位のID。このSVGの各要素は、その期間内に次々に描画されます。.
盆栽
Bonsaiは、Webページ上でグラフィック要素を描画、変形、およびアニメートすることを可能にする強力なJavaScriptライブラリです。 HTML5グラフィックタイプのCanvasとSVGの両方をサポートしています。盆栽を使えば、簡単な長方形や円を作ることができます。 本格的なマルチプレイヤー このようなアニメゲーム。 Orbitを使って、盆栽が実写でどのように機能するのかを感じたり、印象的な例をいくつかチェックしてインスピレーションを得たりできます。.
3.速度
Velocityは高速アニメーション用に構築されたJavaScriptライブラリです。アニメーションをレンダリングする際の速度の速度は、驚くほど速いです。比較すると、jQuery、さらにはCSSよりも優れています。 VelocityのAPIはjQueryのアニメーションと同じように動作しますが、キーワードaliasを使用します。 $ .velocity（） の代わりに $ .animate（）. それ以外は、次のようなまったく同じアニメーションキーワードを使用できます。 フェードイン そして フェードアウト.
4.ラファエル
RaphaelJSは、WebページにベクトルグラフィックSVGを描画するだけでなく、アニメーション化することもできるライブラリです。それはIE6に至るまでずっと広範囲のブラウザをサポートします。それはラファエルをニッチの中で最も信頼できるJavaScriptライブラリにしています。 RaphaelJSを使用すると、Counter Strikeのようなインタラクティブな分析チャート、世界地図、およびゲームのインタラクションを作成できます。.
5.スナップ
SnapSVGは、Raphaelの開発者Dmitry Baranovskiyによって開発された、SVGアニメーション用のもう1つの人気のあるJavaScriptライブラリです。 Raphaelとは異なり、SnapSVGは最新のブラウザ専用です。これにより、ライブラリをラファエルよりもかなり小さくし、クリッピングやマスキングなどのSVG機能をサポートすることができます。.
6.レイジーラインペインター
Lazy Line Painterは、Vivusと同様に、SVGパスをアニメートして描画シーケンスをアニメートするためのjQueryプラグインです。悪いニュースは、このプラグインがこれを非常に具体的なことしかしないことです。したがって、IllustratorやInkscapeなどのアプリケーションからSVGをインポートするときは、SVGにFillカラーが残っていないことを確認してください。.
7. SVG.js
SVG.jsはSVGを操作およびアニメートするための軽量ライブラリです。このライブラリを使用すると、SVG要素内のサイズ、位置、または色をアニメートできます。それはアニメーション化するだけではありません。追加のプラグインを適用して機能を追加することもできます。この例ではsvg.filter.jsプラグインを使ってガウスぼかし、彩度の調整、コントラスト、セピアなどのフィルタを画像に適用します。.
8.歩道
歩道は3種類の要素をサポート, パス, ライン, そして ポリライン SVGの線を描くのに使われます。これは、PlayStation 4のコンソールラインのアニメーションを示すPolygonの例です。.
