SVGとJQueryプラグインでアニメーションの門を叩く
初めまして、デザイナーの遠藤です。
最近フロントエンドエンジニアを目指すべく、プログラミングの勉強を始めました。
突然ですが、現在私のHOTワードは「SVG」です。
SVGはHMLベースのベクター画像形式で、アニメーションにも対応しているすごい奴。
しかし私はSVG形式でアイコンを作成したことがあるのみ。難しいことはまだ分からないけど、
もっとSVGを活用できないものか…。
悶々とした日々を過ごしている中、1つのプラグインと出会います。
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本線のアニメーションが作成できます。
デフォルトでここまでできるということで、この先の可能性に期待ですね。 もっと色々試してみて、より面白いものをつくっていければと思います!
皆さんも色を変えたり何だりして遊んでみてください:)
では、今回はこれにて失礼します。