jQuery DrawSVG－更簡單的製作SVG筆繪動畫

以往我們要製作svg的筆繪效果動畫，需要使用到CSS來操作，利用css的
stroke-dashoffset 等屬性，使用keyframe的方式去製作動態效果，但卻耗時耗力，光調個動畫就花了不少時間，不過最近發現了一個工具－jQuery DrawSVG能夠讓我們更優雅而快速的製作svg動畫，至於如何使用，就看緊繼續看下面的教學吧!

教學開始之前，先來看看做好之後的效果~

See the Pen jquery drawsvg demo by junyou (@chenjunyou) on CodePen.dark

SVG 圖像製作

Step.1 先在Illustrator工作區域中繪製向量圖形。

Step. 2 繪出成SVG格式，並調整至下圖設定即可繪出檔案。

Step. 3 將剛剛匯出的svg用文字編輯器打開，將一拖拉庫的程式碼複製起來待會要用。

程式部分

引入所需函示庫

Step. 1 既然叫做JQuery DrawSVG ，當然要先引入jquery囉

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>

接著再將官網下載jquery drawSVG的函式庫引入，下載連結，或是使用cdn的方式引入。

<script src='https://cdn.jsdelivr.net/jquery.drawsvg/1/jquery.drawsvg.min.js'></script>

Step. 2 將先前複製的svg圖貼到body中。

Step. 3 給點CSS讓圖片放置於視窗中間。

body, html {
  background-color: #ffd400;
}

svg {
  width: 40%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

Step. 4 給一段控制動畫的script。

var mySVG = $('svg').drawsvg();
mySVG.drawsvg('animate');

重複播放動畫

如果想要一直重複播放動畫，可以換成以下程式。

var $svg = $("svg").drawsvg({
    callback: function() {
      animate();
    }
  });

function animate() {
  $svg.drawsvg("animate");
}