こんにちは。
今回はSVGを手書きしているようなアニメーションを作れるjQueryプラグン「Lazy Line Painter」の紹介をしたいと思います。
前から存在は知っていたのですが、この前やっと使う事があったので紹介します。
DEMOはこちら
ダウンロードしてみよう！
GitHubからLazy Line Painterをダウンロードします。
設置してみよう！
先ほど、ダウンロードしたファイルを設置していきます。
jQuery本体とraphael-min.jsとjquery.lazylinepainter-1.4.1.min.jsを/bodyの手前に読み込みます。
1 2 3 | <script type="text/javascript" src="js/jquery1.9.1.min.js"></script> <script src="js/raphael-min.js"></script> <script src="js/jquery.lazylinepainter-1.4.1.min.js"></script> |
SVGを作ってみよう！
まずはSVGを作ります。
イラストレーターでイラスト又は文字を書きます。
文字の場合はアウトラインにします。
別名保存でSVGまたはSVG圧縮を選択します。
SVGをアニメーションにしてみよう！
下記のサイトにアクセスします。
Lazy Line Painter
下のほうにいくと下記のような画面があるのでその中に先程作ったSVGをドラッグドロップします。
赤、緑、青のスライダーで線の色を変更できます。
一番下の黒のスライダーで線の太さを調節できます。
調整が終わったら「Copy data to clipboard」をクリックしてコピーします。
先程、設置したjQuery等の一番下に設置します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <script type="text/javascript"> /* * Lazy Line Painter - Path Object * Generated using 'SVG to Lazy Line Converter' * * http://lazylinepainter.info * Copyright 2013, Cam O'Connell * */ var pathObj = { "logo": { "strokepath": [ { "path": "M22.021,127.488H16.9L7.86,71.487h3.6l8.4,51.042l8.16-50.802h3.92l7.84,50.642l8.08-50.882h3.28l-8.96,56.001h-4.8 l-7.521-45.84L22.021,127.488z", "duration": 600 }, { "path": "M75.78,97.408v3.36H60.5v23.361h18.4v3.359H56.82V71.487H78.9v3.36H60.5v22.561H75.78z", "duration": 600 }, { "path": "M96.659,71.487c8.4,0,11.44,4.16,11.44,11.92v3.2c0,6.08-1.68,9.84-7.36,11.04c6.08,1.2,8.4,5.68,8.4,12v4.88 c0,8.081-3.68,12.96-12.24,12.96h-12V71.487H96.659z M94.819,96.208c6.561,0,9.601-1.76,9.601-8.88v-3.6 c0-5.84-1.84-8.88-7.841-8.88h-8v21.36H94.819z M96.899,124.129c6.16,0,8.561-3.44,8.561-9.681v-5.04c0-7.279-3.28-9.84-9.921-9.84 h-6.96v24.561H96.899z", "duration": 800 }, { "path": "M139.858,71.487c8.64,0,12.4,5.68,12.4,13.92v28.161c0,8.24-3.761,13.92-12.4,13.92h-12.32V71.487H139.858z M139.778,124.129c6.24,0,8.8-4.24,8.8-10.4v-28.48c0-6.16-2.64-10.4-8.8-10.4h-8.561v49.281H139.778z", "duration": 600 }, { "path": "M177.298,97.408v3.36h-15.28v23.361h18.4v3.359h-22.08V71.487h22.08v3.36h-18.4v22.561H177.298z", "duration": 600 }, { "path": "M210.019,85.008v1.2h-3.521v-1.44c0-5.92-2.24-10.4-8.32-10.4s-8.319,4.4-8.319,10.32c0,13.6,20.24,13.84,20.24,29.281 c0,8.08-3.521,14-12.08,14c-8.561,0-12.081-5.92-12.081-14v-2.881h3.521v3.121c0,6,2.32,10.32,8.48,10.32s8.479-4.32,8.479-10.32 c0-13.441-20.24-13.681-20.24-29.281c0-8.4,3.681-13.84,11.92-13.92C206.578,71.007,210.019,76.928,210.019,85.008z", "duration": 800 }, { "path": "M219.697,71.487v56.001h-3.68V71.487H219.697z", "duration": 600 }, { "path": "M250.018,85.168v4.16h-3.521v-4.4c0-6-2.32-10.56-8.48-10.56s-8.479,4.56-8.479,10.56v29.121c0,6,2.319,10.48,8.479,10.48 s8.48-4.48,8.48-10.48v-12.08h-7.44v-3.361h10.961v15.201c0,8.08-3.521,14.16-12.081,14.16c-8.56,0-12.08-6.08-12.08-14.16V85.168 c0-8.081,3.521-14.161,12.08-14.161C246.497,71.007,250.018,77.087,250.018,85.168z", "duration": 600 }, { "path": "M259.536,127.488h-3.36V71.487h4.8l16.801,47.281V71.487h3.36v56.001h-4.081l-17.52-49.921V127.488z", "duration": 600 }, { "path": "M318.495,111.248l6-39.761h12.24v56.001h-8.32V87.328l-6.08,40.161h-8.32l-6.561-39.601v39.601h-7.68V71.487h12.24 L318.495,111.248z", "duration": 600 }, { "path": "M371.614,127.488h-8.88l-1.521-10.16h-10.8l-1.521,10.16h-8.08l8.96-56.001h12.881L371.614,127.488z M351.534,109.729 h8.479l-4.239-28.321L351.534,109.729z", "duration": 600 }, { "path": "M388.894,96.288h12.32v17.761c0,8.96-4.48,14.08-13.12,14.08c-8.641,0-13.12-5.12-13.12-14.08V84.928 c0-8.96,4.479-14.08,13.12-14.08c8.64,0,13.12,5.12,13.12,14.08v5.44h-8.32v-6c0-4-1.76-5.52-4.56-5.52 c-2.801,0-4.561,1.52-4.561,5.52v30.241c0,4,1.76,5.44,4.561,5.44c2.8,0,4.56-1.44,4.56-5.44v-10.32h-4V96.288z", "duration": 600 }, { "path": "M435.374,127.488h-8.88l-1.521-10.16h-10.8l-1.521,10.16h-8.08l8.96-56.001h12.881L435.374,127.488z M415.294,109.729 h8.479l-4.239-28.321L415.294,109.729z", "duration": 600 }, { "path": "M463.854,71.487v7.84l-16.721,40.161h16.721v8h-25.761v-7.84l16.721-40.161h-15.921v-8H463.854z", "duration": 600 }, { "path": "M469.053,71.487h8.8v56.001h-8.8V71.487z", "duration": 600 }, { "path": "M492.092,86.928v40.561h-7.92V71.487h11.04l9.04,33.521V71.487h7.841v56.001h-9.04L492.092,86.928z", "duration": 600 }, { "path": "M527.211,95.088h12.08v8h-12.08v16.4h15.2v8h-24V71.487h24v8h-15.2V95.088z", "duration": 600 } ], "dimensions": { "width": 550, "height": 200 } } }; /* Setup and Paint your lazyline! */ $(document).ready(function(){ $('#logo').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); </script> |
htmlは空のdivタグに上記のスクリプトと同じid名を付けます。
1 | <div id="logo"></div> |
オプションを設定してみよう！
先程コピーしてきたスクリプトの下の方に下記ような記述があると思いますが、ここでオプションを設定できます。
1 2 3 4 5 6 7 8 | $(document).ready(function(){ $('#logo').lazylinepainter( { "svgData": pathObj, "strokeWidth": 2, "strokeColor": "#e09b99" }).lazylinepainter('paint'); }); |
オプション一覧
- strokeWidth
- 線の太さを設定できます。
- strokeColor
- 線の色を設定できます。
- strokeCap
- 線の形状を設定できます。
butt、round、squareから選択できます。
- strokeJoin
- 線の繫ぎ目を設定できます。
miter、round、bevelから選択できます。
- strokeDash
- 線を点線に設定できます。
“”, “-“, “.”, “-.”, “-..”, “. “, “- “, “–“, “- .”, “–.”, “–..”から選択できます。
- strokeOpacity
- 線の透明度を設定できます。
透明度を70%にしたい場合は、「.7」jと記述します。
- onComplete
- 線のアニメーションが終わった後のアニメーションを設定できます。
- delay
- アニメーションを開始する時（秒）を設定できます。
- overrideKey
- キーを変更する事ができます。
同一ページ内に複数表示させたい時等に使えます。
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
いかがでしたか。お手軽にアニメーションさせる事ができるのでおすすめです。
以上でSVGを手書きしているようなアニメーションを作れるjQueryプラグン「Lazy Line Painter」の紹介でした。
