webデザイン

SVGアニメーション作成ツールLazy Line Painter

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はSVGアニメーションが簡単に制作できる「Lazy Line Painter」の使い方をご紹介します。
サイトのメインビジュアルデザインなどで少しインパクトや動きが欲しいときなどにおすすめです。

illustratorなどで描いたパスデータを読み込むと、描き順をなぞるようなアニメーションを育成してくれるオンラインツールです。
Lazy Line Painter

アニメーションしたいパスデータをillustratorで作成しsvg形式で保存します。
テキスト部分はアウトライン化しておきます。

Lazy Line Painter に移動し以下のClick or Drop your SVG~部分に先ほど作成したsvgファイルを読み込みます。

アニメーションの時間や線の色などが設定できます。

  • stroke width:線の太さ
  • stroke opacity : 透明度
  • stroke color : 線の色
  • stroke dash : 点線の間隔(デフォルトで普通の線)
  • stroke join : 線の結合部分
  • stroke cap : 線の角
  • hide fill : svgファイルの色を表示・非表示
  • delay : アニメーション開始までの時間
  • duration : アニメーションの時間
  • ease : イージング( 動きの加減速 )
  • draw sequentially : 端から順にアニメーションするか否か
  • reverse : アニメーションの順番を逆にする
  • repeat : リピート

アニメーションの設定をしたらDownload Zipからダウンロードします。
以下のようにSVGアニメーションのファイルが作成されています。

具体的に以下の部分が必要になります。

css

#lazyline {
  width: 70vw;
  height: 70vh;
  position: relative;
  overflow: visible;
}

HTMLの設定部分

<script src="js/lazy-line-painter-1.9.6.min.js"></script>
<script type="text/javascript">
  (function(){ 
    document.onreadystatechange = () => {
      if (document.readyState === 'complete') {
        /**
         * Setup your Lazy Line element.
         * see README file for more settings
         */
        let el = document.querySelector('#lazyline');
        let myAnimation = new LazyLinePainter(el, {"ease":"easeLinear","strokeWidth":1,"strokeOpacity":1,"strokeColor":"#21ffa9","strokeCap":"square"}); 
        myAnimation.paint(); 
      }
    }
  })();
</script>

HTMLの実際に動くパスの部分

<svg version="1.1" id="lazyline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 378.9 151.6" style="enable-background:new 0 0 378.9 151.6;" xml:space="preserve" data-llp-composed="true" class="lazy-line-painter">
<style type="text/css">
.st0{fill:#21FFA9;}
</style>
<g>
<path class="st0" d="M63.6,97.9c-1.8,2.5-3.3,4.4-4.7,5.9c-2.4,2.6-4.8,3.9-7.1,3.9c-2,0-3.6-0.9-4.7-2.7c-0.8-1.3-1.2-2.8-1.2-4.6
		c0-5.3,2.3-11.4,6.8-18.3c2.1-3.2,4.2-5.7,6.2-7.3c1.6-1.4,2.9-2,3.9-2c0.6,0,1.1,0.2,1.6,0.7c0.4,0.5,0.6,0.9,0.6,1.4
		c0,0.8-0.8,2.1-2.3,3.8c-3.4,4.1-6,7.8-7.8,11.2C53,94,52,97.1,52,99.4c0,0.6,0.1,1,0.4,1.3c0.3,0.3,0.6,0.5,1.1,0.5
		c2.1,0,5-3,8.8-9c1.9-3.1,3.6-6.6,5-10.4c0.7-2.1,1.7-3.9,2.9-5.5c1.2-1.4,2.3-2.2,3.4-2.2c0.6,0,1.2,0.3,1.7,0.8
		c0.5,0.6,0.8,1.2,0.8,1.9c0,1.5-1.4,4.8-4.3,10c-1.9,3.6-2.9,6.6-2.9,8.9c0,2.6,0.7,4.7,2,6.5c0.4,0.5,1.5,1.3,3.4,2.3
		c0.9,0.5,1.4,1.4,1.4,2.6c0,0.7-0.3,1.4-1,1.9c-0.6,0.5-1.4,0.8-2.3,0.8c-2.1,0-3.9-0.8-5.6-2.5c-1.5-1.5-2.5-3.6-2.9-6.4
		C63.8,100.7,63.7,99.6,63.6,97.9z" data-llp-id="lazyline-0" data-llp-duration="500" data-llp-delay="0" fill-opacity="0" style=""/>
<path class="st0" d="M94.2,82.1c3-3.2,6.1-5.8,9.1-8c3.9-2.7,6.7-4.1,8.4-4.1c0.7,0,1.4,0.3,2,0.9c0.7,0.7,1.1,1.4,1.1,2.3
		c0,1.1-0.9,2.8-2.7,5.2c-3.4,4.5-6,8.6-7.8,12.3c-1.6,3.2-2.3,5.4-2.3,6.5c0,1.1,0.5,1.7,1.6,1.7c2.2,0,6-3.9,11.2-11.8
		c1.1-1.6,2-2.4,2.9-2.4s1.3,0.5,1.3,1.5c0,1.6-1.6,4.7-4.7,9.2c-2.7,3.9-5.6,7-8.5,9.1c-2.1,1.4-4,2.2-5.7,2.2
		c-1.8,0-3-0.8-3.8-2.3c-0.5-0.9-0.7-2-0.7-3.1c0-3.7,1.3-7.8,3.9-12.5c0.6-1.1,2.5-4.3,5.6-9.5c-8.4,4.2-15.5,13.4-21.3,27.5
		c-0.5,1.6-1.4,2.4-2.5,2.4c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.6-0.7-1.3-0.7-2.1c0-1.4,1.3-5.2,3.9-11.5c4.9-11.8,9.5-21.7,13.7-29.9
		c4.2-8.2,8.9-16.8,14.1-25.6c1.2-2.1,2.2-3.6,2.9-4.3c0.7-0.7,1.4-1.1,2.2-1.1c0.7,0,1.4,0.4,1.9,1.2c0.4,0.6,0.6,1.2,0.6,2
		c0,1.2-0.7,2.7-2,4.6c-4.4,6.9-8.9,14.4-13.3,22.6C98.1,72.9,95.2,78.9,94.2,82.1z" data-llp-id="lazyline-1" data-llp-duration="500" data-llp-delay="500" fill-opacity="0" style=""/>
<path class="st0" d="M136.8,97.1c-1.4,2.4-2.7,4.4-4,6c-2.6,3.2-5.2,4.8-7.7,4.8c-2.2,0-3.9-1-5.2-3.1c-0.8-1.4-1.2-3-1.2-4.8
		c0-4.6,1.4-9.6,4.3-15.1c3.2-6.1,7.1-10.8,11.6-14.1c3-2.1,5.8-3.2,8.6-3.2c1.7,0,3.2,0.5,4.3,1.6c1,0.9,1.5,2,1.5,3.2
		c0,0.9-0.3,2.2-1,3.8c0.6,0.9,0.9,1.6,0.9,2.3c0,0.9-0.6,2.3-1.7,4.3c-1.2,2-2.4,4.7-3.6,8c-1.3,3.5-1.9,6.4-1.9,8.5
		c0,1.7,0.5,3.1,1.5,4.3c0.3,0.3,1.1,0.8,2.5,1.4c1,0.5,1.5,1.4,1.5,2.6c0,0.8-0.3,1.4-0.9,1.9c-0.6,0.5-1.3,0.8-2.2,0.8
		c-2.2,0-4.1-1-5.7-3c-1.3-1.6-2-3.6-2-6C136.6,100.4,136.6,99,136.8,97.1z M144.5,76.8c-0.5-0.9-1-1.6-1.6-2
		c-0.6-0.4-1.2-0.6-1.9-0.6c-3.1,0-6.5,2.7-10.2,8.2c-4,6-6,11.2-6,15.4c0,1,0.2,1.8,0.6,2.3c0.4,0.5,1,0.8,1.8,0.8
		c2,0,4.3-2.1,6.9-6.3c1.5-2.3,3.3-5.7,5.5-10.2c1.4-2.9,2.5-4.9,3.1-5.8C143.1,78.1,143.7,77.5,144.5,76.8z" data-llp-id="lazyline-2" data-llp-duration="500" data-llp-delay="1000" fill-opacity="0" style=""/>
<path class="st0" d="M166.4,82.1c3-3.2,6.1-5.8,9.1-8c3.9-2.7,6.7-4.1,8.4-4.1c0.7,0,1.4,0.3,2,0.9c0.7,0.7,1.1,1.4,1.1,2.3
		c0,1.1-0.9,2.8-2.7,5.2c-3.4,4.5-6,8.6-7.8,12.3c-1.6,3.2-2.3,5.4-2.3,6.5c0,1.1,0.5,1.7,1.6,1.7c2.2,0,6-3.9,11.2-11.8
		c1.1-1.6,2-2.4,2.9-2.4s1.3,0.5,1.3,1.5c0,1.6-1.6,4.7-4.7,9.2c-2.7,3.9-5.6,7-8.5,9.1c-2.1,1.4-4,2.2-5.7,2.2
		c-1.8,0-3-0.8-3.8-2.3c-0.5-0.9-0.7-2-0.7-3.1c0-3.7,1.3-7.8,3.9-12.5c0.6-1.1,2.5-4.3,5.6-9.5c-8.4,4.2-15.5,13.4-21.3,27.5
		c-0.5,1.6-1.4,2.4-2.5,2.4c-0.8,0-1.4-0.3-1.9-0.8c-0.5-0.6-0.7-1.3-0.7-2.1c0-1.4,1.3-5.2,3.9-11.5c4.9-11.8,9.5-21.7,13.7-29.9
		c4.2-8.2,8.9-16.8,14.1-25.6c1.2-2.1,2.2-3.6,2.9-4.3c0.7-0.7,1.4-1.1,2.2-1.1c0.7,0,1.4,0.4,1.9,1.2c0.4,0.6,0.6,1.2,0.6,2
		c0,1.2-0.7,2.7-2,4.6c-4.4,6.9-8.9,14.4-13.3,22.6C170.3,72.9,167.4,78.9,166.4,82.1z" data-llp-id="lazyline-3" data-llp-duration="500" data-llp-delay="1500" fill-opacity="0" style=""/>
<path class="st0" d="M209,97.1c-1.4,2.4-2.7,4.4-4,6c-2.6,3.2-5.2,4.8-7.7,4.8c-2.2,0-3.9-1-5.2-3.1c-0.8-1.4-1.2-3-1.2-4.8
		c0-4.6,1.4-9.6,4.3-15.1c3.2-6.1,7.1-10.8,11.6-14.1c3-2.1,5.8-3.2,8.6-3.2c1.7,0,3.2,0.5,4.3,1.6c1,0.9,1.5,2,1.5,3.2
		c0,0.9-0.3,2.2-1,3.8c0.6,0.9,0.9,1.6,0.9,2.3c0,0.9-0.6,2.3-1.7,4.3c-1.2,2-2.4,4.7-3.6,8c-1.3,3.5-1.9,6.4-1.9,8.5
		c0,1.7,0.5,3.1,1.5,4.3c0.3,0.3,1.1,0.8,2.5,1.4c1,0.5,1.5,1.4,1.5,2.6c0,0.8-0.3,1.4-0.9,1.9c-0.6,0.5-1.3,0.8-2.2,0.8
		c-2.2,0-4.1-1-5.7-3c-1.3-1.6-2-3.6-2-6C208.8,100.4,208.8,99,209,97.1z M216.7,76.8c-0.5-0.9-1-1.6-1.6-2
		c-0.6-0.4-1.2-0.6-1.9-0.6c-3.1,0-6.5,2.7-10.2,8.2c-4,6-6,11.2-6,15.4c0,1,0.2,1.8,0.6,2.3c0.4,0.5,1,0.8,1.8,0.8
		c2,0,4.3-2.1,6.9-6.3c1.5-2.3,3.3-5.7,5.5-10.2c1.4-2.9,2.5-4.9,3.1-5.8C215.3,78.1,215.9,77.5,216.7,76.8z" data-llp-id="lazyline-4" data-llp-duration="500" data-llp-delay="2000" fill-opacity="0" style=""/>
<path class="st0" d="M234.2,86.8c3.5-3.6,6.5-6.5,9.1-8.5c4-3.1,6.7-4.6,8-4.6c0.7,0,1.2,0.2,1.7,0.7c0.5,0.5,0.7,0.9,0.7,1.5
		c0,0.8-0.7,2.1-2.2,3.8c-2.2,2.8-3.8,5.2-4.6,7.2c9.6-9.7,16.2-14.5,19.7-14.5c0.7,0,1.4,0.2,1.9,0.7c0.6,0.5,0.9,1.1,0.9,1.9
		c0,1.2-0.9,2.6-2.7,4.4c-7.8,8-11.7,14.6-11.7,19.7c0,2.1,0.4,3.6,1.1,4.5l1.6,2c0.3,0.4,0.5,0.8,0.5,1.4c0,0.7-0.3,1.3-0.8,1.9
		c-0.6,0.7-1.3,1-2.1,1c-1.4,0-2.6-0.9-3.8-2.6c-1.4-2.1-2.1-4.5-2.1-7.3c0-3.7,1.1-7.5,3.2-11.4c0.7-1.4,2-3.2,3.7-5.4
		c-3.5,2.6-7.1,6.3-10.7,10.9c-2.5,3.1-4.7,6.6-6.7,10.5c-0.9,1.9-2.1,2.8-3.3,2.8c-1.4,0-2.1-0.8-2.1-2.3c0-1.7,1.2-5.2,3.5-10.4
		c1.3-3,2.9-6.2,4.9-9.5c-7,5.4-12.3,12.8-15.9,22.1c-0.9,2.1-2,3.1-3.5,3.1c-0.7,0-1.2-0.2-1.6-0.7c-0.5-0.5-0.7-1.1-0.7-1.8
		c0-2.4,1.4-6.8,4.1-13.1c2.8-6.7,6-12.7,9.6-18.1c2.5-3.7,4.4-5.6,5.7-5.6c1.2,0,1.9,0.7,1.9,2c0,0.6-0.8,2-2.3,4.3
		C236.8,81.5,235,84.7,234.2,86.8z" data-llp-id="lazyline-5" data-llp-duration="500" data-llp-delay="2500" fill-opacity="0" style=""/>
<path class="st0" d="M286.6,97.1c-1.4,2.4-2.7,4.4-4,6c-2.6,3.2-5.2,4.8-7.7,4.8c-2.2,0-3.9-1-5.2-3.1c-0.8-1.4-1.2-3-1.2-4.8
		c0-4.6,1.4-9.6,4.3-15.1c3.2-6.1,7.1-10.8,11.6-14.1c3-2.1,5.8-3.2,8.6-3.2c1.7,0,3.2,0.5,4.3,1.6c1,0.9,1.5,2,1.5,3.2
		c0,0.9-0.4,2.2-1,3.8c0.6,0.9,0.9,1.6,0.9,2.3c0,0.9-0.6,2.3-1.7,4.3c-1.2,2-2.4,4.7-3.6,8c-1.3,3.5-1.9,6.4-1.9,8.5
		c0,1.7,0.5,3.1,1.5,4.3c0.3,0.3,1.1,0.8,2.5,1.4c1,0.5,1.5,1.4,1.5,2.6c0,0.8-0.3,1.4-0.9,1.9c-0.6,0.5-1.3,0.8-2.2,0.8
		c-2.2,0-4.1-1-5.7-3c-1.3-1.6-2-3.6-2-6C286.3,100.4,286.4,99,286.6,97.1z M294.3,76.8c-0.5-0.9-1-1.6-1.6-2
		c-0.6-0.4-1.2-0.6-1.9-0.6c-3.1,0-6.5,2.7-10.2,8.2c-4,6-6,11.2-6,15.4c0,1,0.2,1.8,0.6,2.3c0.4,0.5,1,0.8,1.8,0.8
		c2,0,4.3-2.1,6.9-6.3c1.5-2.3,3.3-5.7,5.5-10.2c1.4-2.9,2.5-4.9,3.1-5.8C292.8,78.1,293.4,77.5,294.3,76.8z" data-llp-id="lazyline-6" data-llp-duration="500" data-llp-delay="3000" fill-opacity="0" style=""/>
<path class="st0" d="M311.7,86.8c3.5-3.6,6.5-6.5,9.1-8.5c4-3.1,6.7-4.6,8-4.6c0.7,0,1.2,0.2,1.7,0.7c0.5,0.5,0.7,0.9,0.7,1.5
		c0,0.8-0.7,2.1-2.2,3.8c-2.2,2.8-3.8,5.2-4.6,7.2c9.6-9.7,16.2-14.5,19.7-14.5c0.7,0,1.4,0.2,1.9,0.7c0.6,0.5,0.9,1.1,0.9,1.9
		c0,1.2-0.9,2.6-2.7,4.4c-7.8,8-11.7,14.6-11.7,19.7c0,2.1,0.4,3.6,1.1,4.5l1.6,2c0.3,0.4,0.5,0.8,0.5,1.4c0,0.7-0.3,1.3-0.8,1.9
		c-0.6,0.7-1.3,1-2.1,1c-1.4,0-2.6-0.9-3.8-2.6c-1.4-2.1-2.1-4.5-2.1-7.3c0-3.7,1.1-7.5,3.2-11.4c0.7-1.4,2-3.2,3.7-5.4
		c-3.5,2.6-7.1,6.3-10.7,10.9c-2.5,3.1-4.7,6.6-6.7,10.5c-0.9,1.9-2.1,2.8-3.3,2.8c-1.4,0-2.1-0.8-2.1-2.3c0-1.7,1.2-5.2,3.5-10.4
		c1.3-3,2.9-6.2,4.9-9.5c-7,5.4-12.3,12.8-15.9,22.1c-0.9,2.1-2,3.1-3.5,3.1c-0.7,0-1.2-0.2-1.6-0.7c-0.5-0.5-0.7-1.1-0.7-1.8
		c0-2.4,1.4-6.8,4.1-13.1c2.8-6.7,6-12.7,9.6-18.1c2.5-3.7,4.4-5.6,5.7-5.6c1.2,0,1.9,0.7,1.9,2c0,0.6-0.8,2-2.3,4.3
		C314.4,81.5,312.6,84.7,311.7,86.8z" data-llp-id="lazyline-7" data-llp-duration="500" data-llp-delay="3500" fill-opacity="0" style=""/>
</g>
<g>
<path class="st0" d="M376.8,140.9H4.5V10.7h372.3V140.9z M9.5,135.9h362.3V15.7H9.5V135.9z" data-llp-id="lazyline-8" data-llp-duration="500" data-llp-delay="4000" fill-opacity="0" style=""/>
</g>
</svg>

サンプル

実装した感じ普通にテキストのみのアニメーションなら動きも軽く使いやすい印象でした。今回のサンプルではテキストでしたがロゴやイラストをアニメーション化してもおもしろそうです。

uhaha

うっかりアウトライン化するのを忘れると大変なことになるので気をつけましょうw

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*