以往我們要製作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");
}