jQueryプラグイン
Pocket

うねうねと線を描画してくれるLazy Line Painterの使い方です。

画像:LazyLinePainter

SVGファイルをサイト上にドラッグ&ドロップするだけで、
描画の座標をかき出してくれます。

デモサイト

ちょっと昔話

以前、ポートフォリオサイトで線を描画してくれるLazy Line Painterを使ってみました。

その時は、Firefoxで動きがカクカクしたり、スマホでは全くアニメーションしてくれず…

当時は、仕方ないかと思いつつ、仕事も決まったし、
一旦ポートフォリオサイトは閉じました。

その時からおよそ一年経ち、ポートフォリオを見直しでもしようかと思った時に、
ふと、プラグインがどうなったか気になり調べてみると…

Firefoxでもちゃんと動くし、スマホでも綺麗に動くようになっていました!!

また、以前は「Raphaël」というライブラリも一緒に読み込みが必要でしたが、
その必要もなくなっていて、より便利になっています。

ちょっと前置き長くなりましたが、以下使い方書いていきます。

ダウンロード

GitHubよりダウンロードしてください。
サイトの右下あたりにダウンロードボタンがあります。

GitHub

ダウンロードしたzipファイルを解凍してください。

読み込み

headタグ内に、jQuery本体と「lazylinepainter-1.5.1.min.js」を読み込みます。

<script src="jquery.lazylinepainter-1.5.1.min.js"></script>

読み込みは以上です。

線を書き出す

まずは、SVGファイルの画像を用意します。

今回使う画像はこちら。

画像:カメラ

SVG画像を用意したら、LazyLinePainterへ。

LazyLinePainter

下の方にある「SVG TO LAZY LINE CONVERTER」に画像をドラッグ&ドロップします。

(エリアをクリックして、ファイルを選択する方法でもできます)

画像:SVG TO LAZY LINE CONVERTER

するとこんな感じで描いて見せてくれます。

画像:線の描画

注意としては、縦横1000px以内、ファイルサイズは40KBまでです。

これでOKであれば、この下にコードを書き出してくれているので、コピーしておきます。

jQuery

先ほどコピーしておいたコードを、jQueryに貼り付けます。

今回のカメラの画像であればこんな感じです。

/* 
 * Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 
 
var pathObj = {
    "camera": {
        "strokepath": [
            {
                "path": "M163,106.6c24.1,0,43.6,19.5,43.6,43.6c0,24.1-19.5,43.6-43.6,43.6c-24.1,0-43.6-19.5-43.6-43.6     C119.4,126.2,139,106.6,163,106.6z",
                "duration": 600
            },
            {
                "path": "M242,55.4h-10c-7.7,0-17.2-5.4-21.1-12l-2.7-4.5c-4-6.6-13.4-12-21.1-12h-48.9c-7.7,0-17.4,5.2-21.7,11.6     l-3.5,5.2c-4.3,6.4-14,11.6-21.7,11.6H65.1c-7.7,0-14-3.2-14-7.1c0-3.9-6.2-7.1-14-7.1H26c-7.7,0-14,3.2-14,7.1     c0,3.9-2.7,7.1-6,7.1c-3.3,0-6,6.2-6,13.9V215c0,7.7,6.2,14,14,14H242c7.7,0,13.9-6.2,13.9-14V69.4C256,61.7,249.7,55.4,242,55.4     z M37.2,94.1h-8.1c-7.7,0-13.9-5.3-13.9-11.9c0-6.5,6.2-11.9,13.9-11.9h8.1c7.7,0,14,5.3,14,11.9C51.2,88.8,44.9,94.1,37.2,94.1z      M163,214.7c-35.6,0-64.5-28.9-64.5-64.5c0-35.6,28.9-64.5,64.5-64.5c35.6,0,64.5,28.9,64.5,64.5     C227.5,185.9,198.7,214.7,163,214.7z M231.8,90.3c-5.5,0-10-4.5-10-10s4.5-10,10-10c5.5,0,10,4.5,10,10S237.3,90.3,231.8,90.3z",
                "duration": 1400
            }
        ],
        "dimensions": {
            "width": 256,
            "height": 256
        }
    }
}; 

/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

注意点は、この記述の冒頭の「camera」の部分と

var pathObj = {
    "camera": {
        "strokepath": [
            {

下方の「undefined」の部分、

 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {

この2箇所は任意の表記で揃えましょう。

今回は「line」で統一しておきます。

また、以下で線の太さや色をへんこうできます。

"strokeWidth": 2,
"strokeColor": "#e09b99"

HTML

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

今回であればこんな感じです。

<div id="line"></div>

これで完了!動くはずです。

簡単です!

ちょっとひと工夫①

デモサイトでやっている、描画後に画像を表示する方法です。

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

例えば、こんな感じで描画線と、画像をdivで囲い、

<div class="canvas">
<div id="line"></div>
<img src="images/cameras.png" height="256" width="256" alt="" id="illust">
</div>

CSSで重ねて、画像を非表示にしておきます。

.canvas {
	width: 300px;
	height: 300px;
	position: relative;
}

#illust,#line {
	position: absolute;
	top: 0;
	left: 0;
}

#illust {
	display: none;
}

jQueryで以下を追記します。

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

setTimeout(function() {
    $('#illust').fadeTo(2000, 1);
    $('#line').fadeOut(2000);
}, 1200);

追記するとこんな感じです。

$(document).ready(function(){
        $('#line').lazylinepainter({
            "svgData": pathObj,
            "strokeWidth": 2,
            "strokeColor": "#555"
        }).lazylinepainter('paint'); 

    setTimeout(function() {
        $('#illust').fadeTo(2000, 1);
        $('#line').fadeOut(2000);
        }, 1200);
});

さらにもうひと工夫②

アニメーションを最初からしっかりと見てもらいたい場合、
サイトを開いていきなりアニメーションが始まると見逃されるかもしれません。

そんな時のために開始のタイミングを一瞬遅らせます。

先ほども使ったsetTimeoutをさらに追加します。

こんな感じです。

$(document).ready(function(){
    setTimeout(function(){
        $('#line').lazylinepainter({
            "svgData": pathObj,
            "strokeWidth": 2,
            "strokeColor": "#555"
        }).lazylinepainter('paint'); 

    setTimeout(function() {
    // 線画消して元のロゴフェードインする
        $('#illust').fadeTo(2000, 1);
        $('#line').fadeOut(2000);
        }, 1200);

     },300);
});

一番下の”300″というところで時間を調整しています。

さいごに

アニメーションがあるとインパクトあるサイトになっていいですね。

あんまり長いアニメーションだとうっとおしいかもしれませんが…

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

記事一覧へ

Pocket

Category : Tag :