LINEで送る
Pocket

SVGファイルとはScalable Vector Graphicの略で、Illustratorなどで作成されたベクターデータなので、
Retinaなどの高解像度のディスプレイで表示しても、画質を落とすことなく表示させることが可能です。

SVGのデータはXMLで記述されているので、CSSやJSで操作することも出来るんです。
今回はSVGアニメーションが簡単にできるJavaScriptのライブラリをいろいろとご紹介します。

SVG.js

とにかく軽い超軽量なJSライブラリです。

See the Pen SVG.js Rotation Animation and Clone Demo by Jason Weaver (@indyplanets) on CodePen.

Snap.svg

オープンソースのライブラリ。マスキング、クリッピング、グラデーション、パターンなど様々な機能が実装されています。

See the Pen text masking with snap.svg by Rachel Smith (@rachsmith) on CodePen.

vivus.js

アウトラインがなぞられていくようなアニメーションが簡単に実装できます。

See the Pen Konpa logo animation with Vivus by Julien Monty (@unpixel) on CodePen.

Raphaël

Snap.svgと同じクリエイターが作られたライブラリ、こちらの方が古いバージョンです。

See the Pen Animating Signature Flowers Logo by Sean Mongey (@smongey) on CodePen.

Bonsai.js

がっつりアニメーションしたい人にはオススメのライブラリです。キーフレームにも対応しています。

Walkway.js

パスを描くのに特化したライブラリ

See the Pen Walkway.js example SVG animation by SitePoint (@SitePoint) on CodePen.

Velocity.js

カラーアニメーション、トランスフォーム、ループ、イージングなどをサポートしているアニメーションライブラリです。
自然な動きが実現できそうです。

See the Pen CSS Cube – Velocity JS Animation by Luca Dimola (@hone) on CodePen.

Lazy Line Painter

こちらもパスアニメーションのライブラリです。Illustratorなどで描いたパスを動かしましょう!

See the Pen svg lazy line painting experiment – lightbulb by winnie storey (@skinniwini) on CodePen.

D3.js

データから様々なグラフを作る事ができるライブラリです。

See the Pen D3 Bar Chart by Christophe R. Patrouch (@xpat) on CodePen.

GSAP

こちらもなかなか強力なアニメーションが作れそう。ある形から別の形に変形するモーフィングが得意。

See the Pen MorphSVGPlugin from GreenSock by GreenSock (@GreenSock) on CodePen.

Two.js

フラットなモーショングラフィックスを作成するのに適したライブラリです。

See the Pen Two.js SVG – Wheel Of Fortune by Larry Botha (@larrybotha) on CodePen.

PROGRESS BAR.JS

その名の通りページ読み込み中に使いたいライブラリです。

See the Pen ProgressBar.js by Benja.min (@benjidawson) on CodePen.

SVG Morpheus

きれいなモーフィングは何度見ても飽きないですね。

See the Pen Bernie Sanders svg morph with Morpheus by Jordan Lafland (@lafland) on CodePen.

ぜひ、みなさんもSVGファイルとJSライブラリでアニメーションに挑戦してみてくださいね!

Similar Posts:

LINEで送る
Pocket


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です