SVGアニメーション

こんにちは、ウェブラボ技術メモ第12回目です。

今回はSVGを使って、アニメーションをつけたいと思います。

まずはSVG作成からです。

1.イラストレータにて適当な文字を作成

イラストレータにて適当な文字を作成し、文字をアウトライン化してください。

150525001
150525002

2.SVGファイルとして保存する

保存する時にSVGファイルを選択することができるので、SVGで保存してください。

150525003

3.Lazy Line PainterにてJSを取得する

こちらのサイトの「SVG TO LAZY LINE CONVERTER」にて、作ったSVGファイルをドラック&ドロップしてJSを取得します。

Lazy Line Painter
http://lazylinepainter.info/

150525004
150525005

4.こちらのサイトからzipをダウンロードしましょう

https://github.com/camoconnell/lazy-line-painter

これで下準備は完了です。

あとは準備したものを読み込ませるだけです

先ほど取得したものとzipからダウンロードしたものを読み込ませましょう。

オプションは以下になります。

(もっとありますが、簡単なものだけ説明してます)

簡単ですね!

DEMOがありますので、参考にしてください。

DEMO
  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。