読者です 読者をやめる 読者になる 読者になる

Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

ラインアートを描く jQuery Plugin - Lazy Line Painter を試してみた

今日も 1 つ面白い jQuery Plugin を見つけたのでご紹介します。 Illustrator が得意なデザイナさんなら使って遊んでみたいと思うかもしれないプラグインです。 どんな特徴があるかというと、線画で描かれながらイラストが完成していく様子をアニメーションで実現する jQuery Plugin です。

Flash でも同じことができますが、 今時は Flash でアニメーションを作らなくなっているのでこういう方法も覚えておいて損はなさそうですよ。

-- Lazy Line Painter -- A Jquery plugin for path animation using the Raphaël Library. For more on lazy-line-painter go to; http://lazylinepainter.info/
DOWN LOAD FROM GITHUB https://github.com/camoconnell/lazy-line-painter

まず、Github から必要なファイルをダウンロードします。

使用方法

詳しくは Github のページに英語で書いてあります。 そちらをご覧ください。

以下は自分自身への意味も込めてかなりざっくり要約しています。

ポイントは Illustrator でラインアートを描いて、SVG 形式で保存します。

注意点として

  1. Illustrator は塗りを設定しない、線画だけのラインアートにします。
  2. オープンパスで描いてください。開始と終了が必要らしいので、クローズパスにしないでください。
  3. 線画が仕上がったら、Illustrator で保存する場合(半角英文字で保存してください)に、「SVG」型式にします。私は圧縮しないタイプを選びました。
  4. http://lazylinepainter.info/ の「SVG TO LAZY LINE CONVERTER 」に 3 番で作ったSVGをドロップします(クリックして UPLOAD でもいいです)。
    ※ただし、height と width のスケールは 1000px 以下とし、40KBまでのファイルサイズに限ります。
  5. 4 番で生成された Code を元に関数に必要な値をコピペして準備が整います。

関数の使い方

Github からダウンロードされている、index.html をテキストエディタで開きます。 心配な人はコピーを残しておくことをお勧めします。 何はなくとも 書き出された Code をお持ちのテキストエディタで開いて index.html の関数部分に貼付けます。 貼付け先は head 部分の次の2行の間の行をまとめて消して、上記4番で書き出された Code を丸まるを貼付け直します。 ※下記の 2 行は消さないように注意してください。

(function( $ ){
 ・
 ・
 ・
})( jQuery );

後は、body 内の div の id 名を修正してください。 id 名は SVG のファイル名(拡張子を除く)のはずです。 確認方法は先ほど head に貼付けたコード内に書かれています。 次のコードの下りでいうと 2 行目の「hogehoge」を id 名とすれば OK です。 ※ hogehoge は仮の名前ですが、SVGのファイル名と同じはずです。

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

lazylinepainter メソッドに対しての変更できるプロパティ

線の太さを変更したいときや、色を変更したい。線の模様を変更したいなどは、関数内のでプロパティをいじって変更することができます。

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

4 〜 6 行目の「""」内がプロパティです。「:」より後ろが値です。 線の太さを変更したい場合は、「strokeWidthプロパティ」の値を変更すればいいですし、線の色を変更したい場合は「strokeColorプロパティ」をの値を変更します。

いじれるプロパティは全てで 9 個あるみたいですよ。

    'strokeWidth'    // Adjust width of stroke
    'strokeColor'    // Adjust stroke color
    'strokeCap'      // Adjust stroke cap  - butt  | round | square
    'strokeJoin'     // Adjust stroke join - miter | round | bevel
    'strokeDash'     // Adjust stroke dash - ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
    'strokeOpacity'  // Adjust stroke opacity 0 - 1
    'onComplete'     // Callback fired after animation
    'delay'          // Delay before animation starts
    'overrideKey'    // Set this property if you selector id doesn't match the key referencing your path data value within svgData.