こんにちは、ウェブラボ技術メモ第12回目です。
今回はSVGを使って、アニメーションをつけたいと思います。
まずはSVG作成からです。
1.イラストレータにて適当な文字を作成
イラストレータにて適当な文字を作成し、文字をアウトライン化してください。
2.SVGファイルとして保存する
保存する時にSVGファイルを選択することができるので、SVGで保存してください。
3.Lazy Line PainterにてJSを取得する
こちらのサイトの「SVG TO LAZY LINE CONVERTER」にて、作ったSVGファイルをドラック&ドロップしてJSを取得します。
Lazy Line Painter
http://lazylinepainter.info/
4.こちらのサイトからzipをダウンロードしましょう
https://github.com/camoconnell/lazy-line-painter
これで下準備は完了です。
あとは準備したものを読み込ませるだけです
先ほど取得したものとzipからダウンロードしたものを読み込ませましょう。
↓↓↓↓zipもの↓↓↓↓
<script src="jquery.lazylinepainter-1.5.1.js"></script>
↑↑↑↑zipもの↑↑↑↑
↓↓↓↓取得したもの↓↓↓↓
var pathObj = {
～～省略～～
};
$(document).ready(function(){
～～省略～～
});
↑↑↑↑取得したもの↑↑↑↑
オプションは以下になります。
（もっとありますが、簡単なものだけ説明してます）
'strokeColor' // 色を変更できます 'strokeOpacity' // 透明度を変更できます 'delay' // 開始速度を変更できます 'overrideKey' // デモなどで複数個置きたい場合便利です 'speedMultiplier' // 描画されるスピードを変更できます 'drawSequential' // 一度にアニメーションをさせる 'reverse' // 逆再生
簡単ですね！
DEMOがありますので、参考にしてください。
DEMO