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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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