このページの本文へ

DESIGN こうめの“これから使える”jQueryプラグイン ― 第13回

流行のSVGアニメを手軽に作れるLazy Line Painter

2014年07月18日 11時00分更新

大竹孔明

  • この記事をはてなブックマークに追加
本文印刷
今回紹介するプラグイン

Lazy Line Painter


 「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。

 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。

 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。

step1 jQueryプラグインの読み込み

 jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。

GitHubページの画像
GitHubページの画像

 Lazy Line PainterはRaphaël」 というライブラリーも利用しますので、ページ右上のDownloadからダウンロードします。

Raphaëlページの画像
Raphaëlページの画像

 利用するWebページの body の閉じタグ直前で、jQuery本体と「raphael-min.js」、「jquery.lazylinepainter-1.4.1.min.js」を読み込みます。


//(中略)
<script src="jquery.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.lazylinepainter-1.4.1.min.js">
</body>
//(中略) 

 これで準備はOKです。

step2 SVGの線画を用意してコードを作成する

 SVGアニメーションの元になる線画をIllustrator で作成します。ペンツールを使って、線のみのイラストを描画し、完成したらSVG 形式で保存します。

Illustratorで線画を作成
Illustratorで線画を作成

 Lazy Line Painterのサイトを開き、ページ中ほどのSVG to Lazy Line ConvertorにSVGファイルをドラッグ&ドロップします。

SVG to Lazy Line ConvertorにSVGファイルをドラッグ&ドロップ
SVG to Lazy Line ConvertorにSVGファイルをドラッグ&ドロップ

 SVGファイルが読み込まれ、Lazy Line Converterのコードが出力されます。

Lazy Line Converterのコードが出力される
Lazy Line Converterのコードが出力される

 スライダーを操作すると、線の色や太さを調整できます。プレビューを見ながら好みの仕上がりに調整します。

スライダーを調整
スライダーを調整

 調整が終わったら「Copy data to clipboard」でコードをコピーします。

step3 基本的な使い方

 コピーしたコードをHTMLにペーストします。Step 1で記述したscript要素の下にscript要素を追加し、追加した要素内に貼り付けます。

JavaScript


<script src="jquery.lazylinepainter-1.4.1.min.js">
<script>
// ここにコードを貼り付ける。
// ライセンスは消さないようにしましょう。
/*
 * Lazy Line Painter - Path Object
 * Generated using 'SVG to Lazy Line Converter'
 *
 * http://lazylinepainter.info
 * Copyright 2013, Cam O'Connell
 *
 */

var pathObj = {
    "svg-line-art": {
        "strokepath": [
            {
                "path""M141.8,90.3c-0.4,1.5-0.8,3-1.2,4.5c4.5-25.4,12.7-50.2,24.3-73.2  c3.6-0.7,7.5-0.9,10.8,0.8c-3.7,1.9-5.6,6-7.3,9.8c-9,20.5-16.6,41.6-22.9,63.1c-1.8-0.9-3.8-1.2-5.7-0.8",
                "duration": 600
            },
            {
                "path""M159,60.2c1-1.5,2-3,3.1-4.4c7.7-10.2,19.2-17.2,31.5-20.7  c12.3-3.5,25.3-3.8,38-2.2c-2.6,7.6-5.5,15.5-11.4,21c-4.4,4.1-10,6.4-15.6,8.3c-9,3.1-18.5,5.2-28,5.3c-4.5,0-9.8-0.4-13.7-2.9  c-5.9-3.6-0.6-7.2,3.6-10.2c5.5-3.9,12.2-5.7,18.8-6.9c5.1-0.9,10.3-1.4,15.5-1.6",
                "duration": 600
            },
            {
                "path""M139.3,80.7C114.9,66.5,82,68.4,59.5,85.4  c-5.7,4.3-10.9,9.6-14.4,15.8c-2.7,4.8-4.5,10.1-5.8,15.4c-5.7,23.6-3,48.4,2.6,72c4,16.6,9.7,33.5,21.4,46  c11.7,12.5,30.5,19.7,46.4,13.4c2.1-0.8,4.2-1.9,6.4-2.3c4-0.8,8.1,0.4,12,1.3c28.2,6.3,59-4.1,79.2-24.8s29.7-50.6,27.7-79.4  c-0.8-11.9-3.6-23.7-9.3-34.1c-5.7-10.4-14.6-19.3-25.6-23.9c-8.7-3.6-18.4-4.4-27.8-3.4c-7.6,0.8-15.1,2.7-22.1,5.7",
                "duration": 800
            },
            {
                "path""M124.7,87.3c4.6,2.6,9.4,5.2,14.5,6.3c3.1,0.7,6.3,0.8,9.5,0.9  c8.5,0.3,17.3,0.6,25.2-2.5c-0.4,0.2-0.9,0.5-1.3,0.7",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 300,
            "height": 300
        }
    }
};

/*
 Setup and Paint your lazyline!
 */

 $(document).ready(function(){
 $('#svg-line-art').lazylinepainter(
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor""#e09b99"
}).lazylinepainter('paint');
});
</script>
//(中略)

 HTMLには空のdivタグを用意し、ID名を設定します。ID名は、上記コードの「Setup and Paint your lazyline!」にある$('#svg-line-art')セレクターと同じにします。

 ブラウザーで確認して正しく動作すれば成功です!

 SVGデータを用意できない場合は、拙いイラストですがこちらをダウンロードしてお試しください。

step4 オプションを指定してカスタマイズする

 線の種類や別のアニメーションを設定したいときは、Lazy Line Painter のオプションを指定します。オプションは以下のようにコピーしたコード内に記述します。

JavaScript


//(中略)
$(document).ready(function(){
 $('#svg-line-art').lazylinepainter({
     // ここにオプションを指定する
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor""#e09b99"
});
//(中略)

 複数のオプションを指定する場合は、,(カンマ)区切りで指定します。

strokeWidthオプション

 線の太さをピクセルで指定します。コピーしたコードに含まれています。

strokeColorオプション

 線の色をクォーテーションで括りrgb値で指定します。コピーしたコードに含まれています。

strokeCapオプション

 線の先端の形状を指定します。butt,round,square のいずれかの値を指定します。buttでは少しへこみ、roundでは丸く、squareでは四角となります。デフォルトは用意したSVGに描画した形状となります。

strokeDashオプション

 描画する線を点線にします。点線の種類も指定できます。「 - , . , -. , -.. , . , - , --, - . , --. , --.. 」 のいずれかをクォーテーションで括り指定します。

strokeOpacityオプション

 線の透明度を変更します。0から1の値をクォーテーションで括って指定します。たとえば透明度を30%にしたい場合は、「.3」とします。

onCompleteオプション

 線の描画が完了した後に、要素全体をjQueryでアニメーションさせます。function({})の中にjQueryのアニメーション処理を記述します。

JavaScript


$(document).ready(function(){
 $('#svg-line-art').lazylinepainter({
    'onComplete' : function(){
        $(this).animate({'marginTop':20},500);
    }
});

 上の例では、animateメソッドでmargin-topを20pxに移動させています。

delayオプション

 アニメーションの開始を遅らせます。ミリ秒の数値を指定します。

JavaScript


$(document).ready(function(){
$('#svg-line-art').lazylinepainter(
{
   "svgData": pathObj,
   "strokeWidth": 2,
   "strokeColor""#e09b99",
   "delay": 5000
})

overrideKeyオプション

 コピーしたSVGのオブジェクトのキーで、指定するセレクタと、keyを違うものにしたい場合は、この値を指定することで上書きが可能です。デモのように、ページ内に複数表示する場合など、生成されたkeyを変更する場合に利用します。

JavaScript


$(document).ready(function(){
 $('#svg-line-art-01').lazylinepainter({ // ここで指定したIDが、生成されたオブジェクトのkeyと一致していない場合、
 'overrideKey':'svg-line-art'// ここで上書きする
});

 keyは、生成されたpathObjオブジェクトで指定されています。


var pathObj = {
    "svg-line-art": { // これがkey

 各オプションの実装はデモを参考にしてください。

 いかがでしたか。手軽に実装できることがお分かりいただけたかと思います。

 プラグインは便利ですが、その分制限もあります。プラグインを使わずにSVGアニメーションにチャレンジしたい場合は、以下の記事を参考にしましょう。
[SVG線画が美しいリッチアニメーションの作り方]


著者:大竹 孔明

著者写真

1990年生まれ。2012年3月から2014年6月まで株式会社まぼろしでコーディングを中心にWebデザイン、CMS構築などを経験。2014年8月より株式会社ディー・エヌ・エー【DeNA】でフロントエンド業務に携わる。イベントでの登壇や執筆などの活動も行っており、ブログWeb ambではコーディングを中心にしたWeb制作にまつわる様々な情報を発信している。
個人でCSSを擬人化したリファレンスサイトのGCSSや、有料セミナーのWeb Developer Selectionの運営なども行う。 近著に「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」(共著、MdN刊)がある。

(タイトルイラスト:望月 水奈

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング