東京都新宿区のWeb制作会社 ウェブラボ株式会社

スタッフブログ

SVGアニメーション

2015.05.25 Posted by

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

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

まずはSVG作成からです。

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

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

150525001
150525002

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

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

150525003

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

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

Lazy Line Painter
http://lazylinepainter.info/

150525004
150525005

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

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

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

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

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

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

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

簡単ですね!

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

DEMO

オリエンシートダウンロード

オリエンシートダウンロード

PAGETOP

お問い合わせContact

まずはお気軽にご相談ください。

Web制作・コンサルティング・システム開発に関するお問い合わせ・お見積もり依頼は、
電話・問い合わせフォームより受け付けております。(受付時間:平日9:30〜18:30)

〒160-0004 東京都新宿区四谷4丁目33-2
マーキュリースクエア4F

TEL:03-5366-3277 FAX:03-5366-3278