Lazy Line PainterでSVGアニメーションを実装してみよう

2016/12/26 2017/01/30

Pocket

こんにちは、okutani(@okutani_t)です。「Lazy Line Painter」というサイトを利用すると、かんたんにWeb上で動くSVGファイルを生成することができます。

公式サイトは以下リンクです。サイト上でアニメーションの動きを確認することができます。

LINKLazy Line Painter

私のポートフォリオでも実際に利用していますので、動きを確認したい方は一度閲覧してみてください。

LINKokutani’s Portfolio

ではさっそく、Lazy Line Painterを使ってSVGアニメーションを実装してみましょう。

1 SVGファイルを作成する
2 Lazy Line Painterでアニメーションをつける
3 SVGアニメーションをブラウザで動かす

SVGファイルを作成する

まずはSVGファイルを用意します。

AdobeのIllustratorを使ってSVGファイルを作成します。ここは超ー簡潔に説明するにとどめておきます（というより僕がIllustratorほとんど分からない）。

今回は、ノートPCの絵をブラシツールの一番細いやつで書いてみました。

これを保存時にSVGで書き出せばOKです。

SVGファイルの用意ができました。

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

Lazy Line Painterのサイトから、作成したSVGファイルにアニメーションをつけます。

公式サイトの以下の場所に、SVGファイルをドラッグ＆ドロップ。

アップしたSVGファイルを元に、自動でアニメーションがつきます。下に出力されたコードをコピーします。「Copy data to clipboard」をクリックしてもコピーできます。

このコピーしたコードを利用するだけで、アニメーション付きのSVGファイルを扱うことができます。なので、先ほど作ったSVGファイルはこれ以降不要です。

では、てきとうにindex.htmlを作成して、ブラウザで動かしてみましょう。

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

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

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>SVG Animation</title>
  <style>
  #skills {
    width: 300px;
    height: 300px;
  }
  </style>
</head>
<body>
  <div id="skills"></div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="./jquery.lazylinepainter-1.7.0.min.js"></script>
  <script src="./skills.js"></script>
</body>
</html>

jQueryが必要なのでCDNで読み込んでおく必要があります。今回はgoogleのCDNを読み込んでみました。

「jquery.lazylinepainter-1.7.0.min.js」ファイルはGitHubから取得できます。これがないとアニメーションできないので注意。

LINKcamoconnell/lazy-line-painter: A jQuery plugin for path animation using the CSS –

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

skills.jsの中身は以下の通りです。ソースコードは多少、読みやすくなるよういじってあります。

/*
* Lazy Line Painter - Path Object
* Generated using 'SVG to Lazy Line Converter'
*
* http://lazylinepainter.info
* Copyright 2013, Cam O'Connell
*
*/

var skillObj = {
  "skills": {
    "strokepath": [
      {
        "path": "M35.3,101.1c-1.1-14.7-1.4-29.4-0.9-44c0.2-7.3,0.7-14.6,1.3-21.8c0.1-1.6,0.1-3.4,0.6-5c0.5-1.4,1.8-1.9,3.2-2.3    c3.4-0.8,7-1.3,10.5-1.7c15.5-1.6,31.1-1.5,46.7-1.3c14.7,0.2,29.5,0.6,44.2,0.8c7.3,0.1,14.7,0.3,22,0.4c1.8,0,3.7,0.1,5.5,0.1    c0.9,0,1.8,0,2.7,0.1c1,0,2.1-0.1,3.1,0.1c1.5,0.3,2,1.5,2.1,3c0,1.6-0.1,3.2-0.2,4.8c-0.3,14,1.9,27.9,3,41.8    c0.5,6.9,0.8,13.8,0.3,20.7c-0.1,1.7-0.3,3.5-0.5,5.2c-0.1,0.8-0.2,1.7-0.4,2.5c-0.1,0.4-0.1,0.7-0.2,1.1    c-0.1,0.5-0.1,1.2-0.3,1.6c-0.2,0.3,0.1,0.2-0.3,0.3c-0.2,0-0.4,0-0.6,0.1c-0.5,0.1-0.9,0.1-1.4,0.2c-0.9,0.1-1.9,0.2-2.8,0.4    c-1.8,0.2-3.6,0.4-5.4,0.7c-14.6,1.8-29.3,3.4-44,4.1c-8.2,0.4-16.4,0.5-24.6,0.2c-7.4-0.2-14.7-0.6-22.1-1    c-7.3-0.4-14.5-0.7-21.8-0.9c-3.5-0.1-7.1,0.1-10.6-0.1c-3.1-0.2-6.4-0.9-8.7-3.2c-1.8-1.8-2.9-4.3-2.3-6.9c0,0-0.1,0-0.1,0    c-0.7,2.8,0.7,5.5,2.7,7.3c2.4,2,5.5,2.6,8.6,2.8c3.5,0.2,7,0.1,10.5,0.1c3.9,0.1,7.7,0.2,11.6,0.4c14.5,0.6,29,1.7,43.5,1.6    c14.7-0.1,29.3-1.3,43.9-2.9c7.5-0.8,15-1.8,22.4-2.7c0.2,0,1.3,0,1.4-0.2c0.2-0.2,0.2-1,0.2-1.2c0.2-0.9,0.3-1.9,0.5-2.8    c0.3-1.8,0.5-3.6,0.6-5.4c0.3-3.5,0.4-7,0.3-10.5c-0.2-14.4-2.7-28.7-3.4-43.1c-0.2-3.6-0.3-7.2-0.2-10.8c0-1.6,0.3-3.3,0.1-4.9    c-0.2-1.5-1.1-2.3-2.6-2.4c-1.7-0.1-3.3-0.1-5-0.1c-1.9,0-3.8-0.1-5.8-0.1c-3.8-0.1-7.7-0.1-11.5-0.2c-15.2-0.3-30.4-0.6-45.5-0.9    c-14.2-0.3-28.5-0.6-42.7,0.1c-7.3,0.4-14.7,0.8-21.9,2.3C40,27.9,38,28,37,29.2c-1.1,1.2-1,3.1-1.1,4.5    c-0.3,3.7-0.6,7.4-0.9,11.1c-1,15.1-1.1,30.2-0.4,45.3C34.7,93.8,35,97.5,35.3,101.1C35.2,101.1,35.3,101.1,35.3,101.1L35.3,101.1    z",
        "duration": 1800
      },
      {
        "path": "M39.6,104.4C40,90.8,40.5,77.2,41,63.6c0.3-6.8,0.5-13.6,0.8-20.4c0.1-3.4,0.3-6.8,0.4-10.2c0.1-1.3,0.1-2.8,1.2-3.7    c0.9-0.8,2.2-0.9,3.4-1c13.6-1.1,27.3-1.6,41-1.8c14.3-0.2,28.6,0,42.9,0.6c6.8,0.3,13.5,0.7,20.3,1.2c3.5,0.3,7,0.5,10.5,0.8    c1.6,0.1,3.3,0.2,4.8,0.5c1.1,0.2,2.2,0.8,2.9,1.7c1.4,1.7,1.7,4.1,1.7,6.3c0,3-0.3,5.9-0.5,8.9c-0.3,6.7-0.5,13.4-0.5,20.2    c0,6.8,0.3,13.5,0.7,20.3c0.2,3.3,0.5,6.6,0.8,9.9c0.2,1.7,0.3,3.4,0.5,5.1c0,0.4,0.1,0.8,0.1,1.2c0,0.2,0.1,0.5,0.1,0.7    c-0.1,0.2-0.2,0.2-0.4,0.3c-0.7,0.3-1.4,0.6-2.1,0.8c-5.8,1.9-12,1-18,1.1c-6.4,0.1-12.7,1.7-19,2.3c-7.2,0.8-14.4,0.7-21.5,0.7    c-6.8,0-13.6,0-20.4,0c-13.9,0-27.9,0.4-41.7-1c-3.2-0.3-6.4-0.8-9.6-1.4c0,0-0.1,0-0.1,0c13,2.4,26.3,2.4,39.4,2.4    c13.7,0,27.3,0.1,41,0c3.3,0,6.6-0.1,9.9-0.4c3.4-0.3,6.8-0.7,10.1-1.2c3.4-0.5,6.8-1.1,10.3-1.3c3.4-0.2,6.8,0,10.2,0    c2.7,0,5.3-0.2,7.9-0.8c0.7-0.2,1.3-0.3,1.9-0.6c0.4-0.1,0.7-0.3,1.1-0.4c0.2-0.1,0.3-0.1,0.5-0.2c0.1,0,0.2-0.1,0.3-0.1    c0.2,0,0.3-0.2,0.2-0.4c0-0.3-0.1-0.7-0.1-1c0-0.4-0.1-0.9-0.1-1.3c-0.1-0.9-0.2-1.8-0.3-2.7c-0.7-6.9-1.1-13.8-1.4-20.8    c-0.3-6.9-0.3-13.8-0.2-20.7c0.1-3.5,0.2-7,0.4-10.5c0.2-3,0.5-6.1,0.5-9.2c-0.1-2.2-0.4-4.6-1.9-6.3c-0.9-1-2.1-1.4-3.4-1.6    c-1.7-0.2-3.4-0.3-5-0.5c-6.9-0.6-13.8-1.1-20.8-1.5c-13.5-0.8-27.1-1.1-40.6-1.1c-13.5,0-27,0.4-40.5,1.1    c-3.5,0.2-6.9,0.4-10.4,0.6c-1.3,0.1-2.7,0.1-4,0.5c-1.3,0.4-2.1,1.5-2.3,2.8c-0.2,1.6-0.2,3.3-0.3,5c-0.1,1.8-0.2,3.5-0.2,5.3    c-0.1,3.5-0.3,7-0.4,10.4c-0.6,14-1.1,27.9-1.5,41.9c-0.1,3.4-0.2,6.9-0.3,10.3C39.5,104.4,39.6,104.4,39.6,104.4L39.6,104.4z",
        "duration": 1800
      },
      {
        "path": "M31.1,116.2c-1.6,15.3-7.4,29.7-9.8,44.9c-0.7,4.3-1,8.6-0.9,13c0,0,0.1,0,0.1,0c22.4-0.4,44.9-0.8,67.3-1.2    c22.6-0.4,45.1-0.7,67.7-1c12.7-0.1,25.3-0.3,38-0.3c0,0,0,0,0,0c-2.7-7.9-4.4-16.1-5.4-24.4c-1-8.4-1.7-16.7-3.5-24.9    c-1-4.6-2.2-9.2-3.7-13.7c0,0-0.1,0-0.1,0c2.9,9.2,5,18.6,6.1,28.2c0.6,4.8,1,9.7,1.6,14.5c0.7,4.7,1.6,9.3,2.8,13.8    c0.3,1.1,0.6,2.1,0.9,3.1c0.2,0.5,0.3,1,0.5,1.6c0.1,0.4,0.8,1.6,0.3,1.9c-0.2,0.1-0.8,0-1,0c-0.3,0-0.7,0-1,0c-0.6,0-1.2,0-1.7,0    c-1.3,0-2.5,0-3.8,0c-4.8,0-9.7,0.1-14.5,0.1c-9.8,0.1-19.6,0.2-29.4,0.3c-19.9,0.3-39.8,0.6-59.7,0.9    c-19.8,0.3-39.6,0.7-59.4,1.1c-0.5,0-1.5,0.2-1.9-0.1c-0.3-0.3-0.1-1.3-0.1-1.7c0-1.1,0-2.3,0.1-3.4c0.1-2.2,0.4-4.4,0.7-6.6    c0.6-4.4,1.6-8.8,2.6-13.1c2.2-8.8,4.8-17.4,6.4-26.3c0.4-2.2,0.7-4.3,0.9-6.5C31.2,116.2,31.1,116.2,31.1,116.2L31.1,116.2z",
        "duration": 1800
      },
      {
        "path": "M38.4,116.8c-1.7,11.8-3.4,23.7-5.1,35.5c0,0,0.1,0,0.1,0c8.9-2.1,17.9-3.5,27-4.3c5.2-0.4,10.5-0.6,15.8-0.6    c4.4,0,8.7,0.2,13.1,0.1c9.1,0,18-1.3,27.1-1.8c10.3-0.5,20.5-0.3,30.8,0.2c10.6,0.5,21.2,1.4,31.7,2.3c0,0,0.1,0,0.1,0    c-0.2-5.8-0.4-11.6-0.7-17.4c-0.1-2.8-0.3-5.7-0.5-8.5c-0.1-1.4-0.2-2.9-0.3-4.3c0-0.7-0.1-1.4-0.1-2.2c0-0.6,0-1.3-0.4-1.7    c-0.4-0.4-1-0.5-1.5-0.6c-0.7-0.1-1.5-0.2-2.2-0.3c-1.3-0.2-2.6-0.3-3.9-0.4c-1.9-0.1-3.9-0.1-5.8-0.1c-5.5,0.1-10.9,0.7-16.4,1.3    c-5.7,0.7-11.4,1.4-17.2,1.7c-5.8,0.4-11.7,0.5-17.5,0.6c-11.6,0.2-23.1,0.3-34.7,0.5c-11.5,0.2-23.1,0.3-34.6,0.5    c-1.5,0-2.9,0-4.4,0.1c0,0,0.1,0,0.1,0c11.7-0.2,23.4-0.3,35.2-0.5c11.7-0.2,23.4-0.3,35-0.5c5.7-0.1,11.4-0.2,17.1-0.4    c5.6-0.2,11.2-0.7,16.8-1.4c5.8-0.7,11.5-1.4,17.3-1.7c3.7-0.2,7.4-0.2,11.1,0.2c1.4,0.1,2.8,0.3,4.2,0.6c0.6,0.1,1.2,0.2,1.4,0.8    c0.2,0.6,0.2,1.3,0.2,1.9c0.4,5.8,0.7,11.7,1,17.5c0.1,2.9,0.3,5.8,0.4,8.7c0.1,1.4,0.1,2.9,0.1,4.3c0,0.3,0.1,0.9,0,1.2    c-0.1,0.4-0.6,0.2-0.9,0.2c-0.8-0.1-1.5-0.1-2.3-0.2c-11.5-1-23-1.9-34.5-2.3c-10.6-0.4-21.1-0.3-31.7,0.5c-6,0.5-12,1.2-18,1.3    c-5.9,0.1-11.8-0.2-17.6-0.1c-11.1,0.1-22.2,1.2-33.1,3.3c-1.4,0.3-2.8,0.6-4.1,0.9c-0.6,0.1-1.3,0.3-1.9,0.4    c-0.2,0-1,0.3-1.1,0.3c-0.3-0.2,0-0.8,0-1.1c0.4-2.9,0.8-5.7,1.2-8.6c0.8-5.8,1.7-11.5,2.5-17.3c0.4-2.8,0.8-5.6,1.2-8.4    C38.5,116.8,38.4,116.8,38.4,116.8L38.4,116.8z",
        "duration": 1800
      },
      {
        "path": "M78.2,166.6c0.6-2.2,1.2-4.5,1.9-6.7c0.3-1.1,0.6-2.2,0.9-3.3c0.2-0.8,0.3-2,1.3-2.2c0.5-0.1,1-0.1,1.5-0.1    c0.6,0,1.2-0.1,1.8-0.1c1.1-0.1,2.3-0.2,3.4-0.3c2.3-0.2,4.6-0.4,6.8-0.5c9.8-0.8,19.5-1.4,29.3-1.1c2.3,0.1,4.6,0.2,7,0.4    c1.1,0.1,2.3,0.2,3.4,0.4c0.5,0.1,1,0.1,1.6,0.2c0.4,0.1,0.9,0.1,1.2,0.4c0.3,0.3,0.4,0.8,0.4,1.2c0,0.5,0,1.1,0,1.6    c0,1.2,0,2.3,0,3.5c0,2.3,0.1,4.5,0,6.8c0,0.4-0.1,0.8-0.4,1.1c-0.5,0.4-1.3,0.3-1.8,0.3c-1.1,0-2.3,0-3.4,0c-2.4,0-4.8,0-7.2,0    c-4.7,0-9.5-0.1-14.2-0.2c-9-0.3-18-1.1-26.8-2.7c-1.1-0.2-2.2-0.4-3.2-0.6c0,0-0.1,0-0.1,0c9.3,2,18.8,2.9,28.2,3.3    c9.1,0.4,18.2,0.3,27.2,0.3c0.7,0,1.6,0,1.8-0.9c0.1-0.5,0-1,0-1.5c0-0.6,0-1.3,0-1.9c0-2.4,0-4.9,0-7.3c0-0.9,0.3-2.4-0.6-2.9    c-0.4-0.2-0.8-0.3-1.2-0.3c-0.7-0.1-1.3-0.2-2-0.2c-2.3-0.3-4.7-0.5-7.1-0.6c-9-0.5-18.1-0.1-27.1,0.6c-4.8,0.3-9.6,0.7-14.4,1.1    c-1.2,0.1-2.5,0.2-3.7,0.3c-0.4,0-0.9,0.1-1.2,0.4c-0.4,0.3-0.4,0.9-0.6,1.4c-0.7,2.4-1.3,4.7-2,7.1    C78.7,164.3,78.4,165.4,78.2,166.6C78.1,166.6,78.2,166.6,78.2,166.6L78.2,166.6z",
        "duration": 1800
      },
      {
        "path": "M27.2,38.7c-1.5-0.7-2.2-2.4-2.5-3.9c-0.3-1.8-0.1-3.6,0.5-5.3c1.1-3.5,3.3-6.6,5.7-9.3c1.4-1.5,2.9-2.9,4.7-4.1    c0,0-0.1,0-0.1,0c-3.1,2-5.5,4.8-7.6,7.8c-2,2.9-3.7,6.5-3.4,10.1c0.2,1.8,0.8,3.9,2.6,4.7C27.1,38.7,27.2,38.7,27.2,38.7    L27.2,38.7z",
        "duration": 600
      },
      {
        "path": "M15,41c-1.2-2.5-0.7-5.3,0.2-7.8c0.9-2.8,2.1-5.5,3.2-8.3c1-2.6,2-5.2,3.4-7.7c1.3-2.2,3-4.1,5.2-5.5    c2.5-1.6,5.5-2.4,8.5-2.3c0,0,0.1,0,0.1,0c-4.7-0.2-9.3,1.8-12.3,5.5c-1.8,2.2-2.9,4.9-4,7.6c-1.2,3-2.4,6.1-3.6,9.1    c-1.1,2.9-2.2,6.3-0.7,9.3C14.9,41,15,41,15,41L15,41z",
        "duration": 600
      },
      {
        "path": "M3,45.2c2-7.6,4.4-15,7.5-22.3c1.5-3.6,3-7.2,4.9-10.6c0.9-1.6,1.9-3.2,3.1-4.6c1.1-1.2,2.4-2.2,3.8-3.1    c3.2-2.1,6.8-3.4,10.4-4.6c0,0-0.1,0-0.1,0c-3.2,1.1-6.4,2.3-9.3,4c-3,1.7-5.5,4.1-7.3,7.1c-1,1.6-1.8,3.4-2.6,5.1    c-0.8,1.8-1.6,3.6-2.4,5.4C9.4,25.1,8,28.8,6.7,32.5C5.3,36.7,4,40.9,2.9,45.2C2.9,45.2,3,45.2,3,45.2L3,45.2z",
        "duration": 600
      }
    ],
    "dimensions": {
      "width": 200,
      "height": 200
    }
  }
};

/*
Setup and Paint your lazyline!
*/
function skill_animation()
{
  $('#skills').lazylinepainter({
    "svgData": skillObj,
    "strokeWidth": 3,
    "strokeColor": "#e09b99",
    "speedMultiplier": 0.4
  }).lazylinepainter('paint');
}

// 発火するタイミングを設定
var $window = $(window),
    $skill = $('#skills'),
    topSkill = $skill.offset().top;
var Flag = false;

// そこまでスクロールしたら実行
$window.scroll(function() {
  if ($window.scrollTop() > topSkill &&
      Flag === false) {
      skill_animation();
      Flag = true;
  }
});

「strokeWidth」「strokeColor」「speedMultiplier」あたりはお好きに設定してください。

また、上記コードでは発火するタイミングなどを自分で設定しています。参考にしてください。

DEMOは以下です（他のSVGアニメーションもありますが気にせずどうぞ）。

DEMOSVG Animation