SVGアニメーションプラグイン「Lazy Line Painter」が動かない時

2018/07/03 サイト制作 投稿者:前原

SVGアニメーションが簡単に作成できるというプラグイン「Lazy Line Painter」
試してみたところ最初は自分のコードでは全く動かず、かなり苦戦しました。

結局自力で解決できたのですが、解決方法の記事が全く見つからなかったので、
今回は動かないときの解決方法に焦点を当てて記事を書きたいと思います。

Lazy Line Painterの使い方

Lazy Line Painterの使い方について順を追って説明します。

SVGファイル作成

まず素材となるSVGファイルを作成します。(私はIllustratorで作成しました。)
ファイルは1000×1000pxで40kb以下という制限があります。

ペンツール等でパスを描きます。テキストツールの場合はアウトライン化しましょう。
塗り色は無しで、線の色は無し以外に設定してください。



作り終えたら、別名保存でSVG形式で保存します。
SVGオプションのSVGプロファイルは「SVG1.1」を選択しましょう。
他はデフォルトのままで問題ないと思います。

SVGファイルをコンバーターで変換

続いて作ったSVGファイルを
Lazy Line Painter 公式サイト
のコンバーターで変換します。

変換して生成されたコードはこの後すぐ使いますので、とっておいてください。

jsの読み込み

続いて公式GitHubから、コード一式をダウンロードしてきて解凍します。
公式GitHub

使うのは「jquery.lazylinepainter-1.7.0.js」と、
vendorフォルダ内「jquery-2.1.1.min.js」です。
※最新バージョンに合わせてファイル名など適宜変更してください。

加えて先ほどコンバーターで生成したコードを早速使います。

SVGアニメーションを使いたいHTMLファイルのhead内で

の順に読み込ませます。

SVGアニメーション表示場所作成

次にbody内にSVGアニメーションを表示させる場所を用意してあげます。

重要ポイント

最後にコードを少し変更する必要があります。

【生成されたコード内抜粋】
var pathObj = {
任意id名“: {
【生成されたコード内抜粋】
$(document).ready(function(){
$(‘#任意id名‘).lazylinepainter(
【body内】
<div id=”任意id名“></div>

この三か所のid名を揃えてください。

コードまとめ

これでSVGアニメーションが動くはずです。
DEMO

オプション

線の色や太さ、描画速度などを変更出来ます。簡単なものだけ紹介します。

オプションDEMO

他のオプションについては公式GitHub等を参考にしてください。

上手く動かないとき

下記項目を確認してください。

  • 重要ポイント三か所の id名は揃っていますか?
  • jsファイルへのパス・階層は間違ってませんか?
  • idでなくclassにしていませんか?(classでは動きません。)
  • 同ページ内に複数設置していませんか?複数設置するにはカスタマイズが必要です。

それでも動かない場合は、一度私のコード・ファイル構造を全く同じにコピーして動くか確認してみてください。
自分の生成したコードの時だけ動かない場合は、SVGファイルに問題があることが多いです。

動かない時のSVGファイルのチェックポイント(Adobe Illustrator CCで検証)

※コンバーター変換後のプレビューで正しく描画されない場合は、導入後もほぼ動きません。

・線に色を設定していない。
線に色を設定していないと描画されません。塗りに色が設定されていると少し描画時の線が変わることがありますが、基本塗りは無視されると考えてください。
・アートボードサイズが大きすぎる。
1000×1000pxまでとありますが、当方で900×900pxで動かないことがあったので、アートボードサイズは出来るだけ小さくしたほうが良いです。
SVGなので、極端にサイズを小さくしなければ基本描画結果に違いは出ません。
・パスが小さすぎる。
パスが小さすぎても動きませんでした。(10px×10px以下くらいで確認)
・ファイルサイズが大きすぎる。
ファイルサイズが大きいと変換時にエラーが出るので、まずコードすら生成できないと思います。
40kb以上はダメだと書いてありますが、それ以下でもエラーになることがあります。
(特にテキストで文字数が多い場合は、パスが複雑で膨大になるのでコンバーターが対応できないようです。)
・アウトライン化していない。(テキストの場合)
要素の線上で右クリック→「アウトラインを作成」して、線に色を設定してください。
・線が二重になる。描画が一筆書きのようにならない。
描いた順にパス・アウトラインを描画しますので、ブラシやテキストツール・多角形ツールなどで描いた線は二重になったり、一気に描画されたりします。
一本線で一筆書きのようにしたい場合は、描画したい画像を一度形作ってから、ペンツールでトレースしてください。

まとめ

いかがでしょうか?上手く動きましたか?
私はSVGファイルの作成でかなりつまずいてしまいました。
制限が多いので少し気を付けなければいけませんが、手軽にアニメーションが導入できてとても便利ですね。

Lazy Line PainterはMITライセンスです。
誰でも自由に無料で使えますが、jsとコンバーターで生成したコード内の著作権表示だけは消さないようにしましょう。

Windows 7 の延長サポート終了まで

days
4
2
6
hours
1
0
minutes
2
0
seconds
5
1

Office 2010 の延長サポート終了まで

days
6
9
9
hours
1
0
minutes
2
0
seconds
5
1

カレンダー

   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
   1234
567891011
12131415161718
19202122232425
262728    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
     12
3456789
10111213141516
17181920212223
24252627282930
31      
   1234
567891011
12131415161718
19202122232425
2627282930  
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728     
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
1234567
891011121314
15161718192021
22232425262728
29      
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
  12345
6789101112
13141516171819
20212223242526
27282930   
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
      1
2345678
9101112131415
16171819202122
232425262728 
       
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       
     12
3456789
10111213141516
17181920212223
24252627282930
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
1234567
891011121314
15161718192021
22232425262728
2930     
       
    123
45678910
11121314151617
18192021222324
25262728293031
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
 123456
78910111213
14151617181920
21222324252627
282930    
       
     12
3456789
10111213141516
17181920212223
2425262728  
       
  12345
6789101112
13141516171819
20212223242526
2728293031  
       
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
    123
45678910
11121314151617
18192021222324
252627282930 
       
 123456
78910111213
14151617181920
21222324252627
28293031   
       
      1
2345678
9101112131415
16171819202122
23242526272829
30      
   1234
567891011
12131415161718
19202122232425
262728293031 
       
1234567
891011121314
15161718192021
22232425262728
293031    
       

カテゴリー

PRODUCE ネディアプロデュース
群馬データセンター
群馬の法人ITサポートサービス Wide Net[ワイドネット]
ワイドオフィス
イヤホンのブランドでハイクラスを誇る | n+um(エニューム)