DETAIL NOTE

INTUITION DETAIL DESIGN BLOG

SVGアニメーション – Lazy Line Painterの使い方 –

「Lazy Line Painter」というサイトを利用すると、かんたんにWeb上で動くSVGファイルを生成することができます。
その使い方と自分のサイトで使用するための設置方法の解説です。

SVGファイルを作成する

まずはSVGファイルを用意します。
Illustratorを使って画像や図形を描き、保存時にSVGで書き出せばOKです。

Lazy Line Painterでアニメーションをつける

Lazy Line Painterのサイトから、作成したSVGファイルにアニメーションをつけます。
SVGファイルをサイト上にドラッグ&ドロップするだけで、描画の座標をかき出してくれるのですごく簡単です。

Lazy Line Painter

下の方にある「SVG TO LAZY LINE CONVERTER」に画像をドラッグ&ドロップします。
(エリアをクリックして、ファイルを選択する方法でもできます)

※縦横1000px以内、ファイルサイズは40KBまで。

アップしたSVGファイルを元に、自動でアニメーションがつきます。
下に出力されたコードをコピーします。

今回のものだとこのようなコードになります。

 

コピーしたコードをテキストエディタに貼り付けて、「任意の名前.js」で保存します。

コードの書き換えが必要なので、
この記述の冒頭の「idd_logo」の部分と

 

下方の「undefined」の部分、

 

この2箇所を任意の表記で揃えます。

また、以下で線の太さや色を変更できます。

 

SVGアニメーションをブラウザで動かす

htmlを作成して、先ほどアニメーションがついたSVGを表示させてみます。

ダウンロード

GitHubより「jquery.lazylinepainter-1.7.0.min.js」をダウンロードします。
これがないとアニメーションできないので注意。

GitHub

読み込み

jQueryが必要なのでCDNで読み込んでおく必要があります。今回はgoogleのCDNを読み込んでみました。
続いて「jquery.lazylinepainter-1.7.0.min.js」を読み込みます。

Lazy Line Painterのサイトで変換したjsファイルは、今回「logosvg.js」と名前をつけて保存し、jQueryとjquery.lazylinepainter-1.7.0.min.jsの読み込み後に設置しています。

HTML

 

表示したいところにdivタグを記述し、
先ほどのjs内で統一した名前のIDを追加するだけです。

アレンジ

線画だけでは物足りないので、描画後に画像を表示させてみます。

やっていることは簡単で、描画線と画像を重ねておき、画像は非表示にしておきます。
描画後に、線はフェードアウトさせて、画像をフェードインさせるだけです。

【HTML】

 

【CSS】

 

描画線と、画像をdivで囲い、CSSで重ねて、画像を非表示にしておきます。

jQueryで以下を追記します。

【JS】

“1200”というところで、何秒後に動作させるか調整しています。
追記するとこんな感じです。

 

 

demo

 

発火するタイミングを変更

さらに、スクロールしたら実行というように、タイミングを変更させたいと思います。

jQueryで以下を追記します。

 

簡単に使えるのでぜひ試してみてください。

 

次へ 投稿

前へ 投稿

© 2022 INTUITION DETAIL DESIGN