SVGとJQueryプラグインでアニメーションの門を叩く

SVGとJQueryプラグインでアニメーションの門を叩く

初めまして、デザイナーの遠藤です。
最近フロントエンドエンジニアを目指すべく、プログラミングの勉強を始めました。

突然ですが、現在私のHOTワードは「SVG」です。
SVGはHMLベースのベクター画像形式で、アニメーションにも対応しているすごい奴。
しかし私はSVG形式でアイコンを作成したことがあるのみ。難しいことはまだ分からないけど、
もっとSVGを活用できないものか…。

悶々とした日々を過ごしている中、1つのプラグインと出会います。

Lazy Liner Painter

SVGで手軽にストロークアニメーションがつくれるデザイナーの強い味方。
実装が非常に簡単です。今回はこちらを使用して、SVGアニメーションを作成してみます!

SVG形式のイラストを作成する

Illustratorでさくっと作成したお姉さんです。

本プラグインはオープンパスのみ対応とのことでしたので、その点に注意します。 線の太さ、色、透明度、線端タイプ、角etc.は後々プロパティで設定できるため、 自分が作成しやすいスタイルでOKです。

テキストを含む場合はアウトライン化をおこない、SVG形式で保存すれば素材の完成。 (あっという間…!)

SVGのパスデータを出力する

本家がコンバーターを設置してくれているため、そこにドラッグ&ドロップします。 ぽいっ。

無事にパスデータを吐き出してくれました! 先頭のコメントアウトされている部分は著作権表記ですので、消さずに使用します。

実装

では早速実装していきましょう。 まずdivを作成し、任意のidを振ります。今回は「sozai」としました。そしてjQuery本体と Lazy Liner Painterを読み込みます。自分が編集するjsファイルは「main.js」としました。

先程のパスデータを「main.js」にぺたり。

線のスタイルを設定します。

完成

完成したものがこちらです。 (結構重たいため注意してください。)

https://codepen.io/endooon/pen/LZGQdO

線が二重になっているのは、イラスト作成時にパスをアウトライン化しているためです。 アウトライン化をおこなわずに保存すると、シンプルな1本線のアニメーションが作成できます。

デフォルトでここまでできるということで、この先の可能性に期待ですね。 もっと色々試してみて、より面白いものをつくっていければと思います!

皆さんも色を変えたり何だりして遊んでみてください:)

では、今回はこれにて失礼します。