使用 SVG 來製做 Morphing 動畫效果

何爲Morphing動畫

開始以前，先來了解下什麼是Morphing動畫。所謂Morphing動畫是表示，同一個模型，從一個形狀變到另外一個形狀。以下圖所示，從形狀1漸變到形狀2，再從形狀2漸變到形狀3，最後從形狀3漸變到形狀1，以此循環往復。

從上圖能夠看到像這樣的Morphing動畫簡直是爲SVG量身定製的，由於SVG中的路徑本來就是由不少的座標點構成的（點連成線），作一些形狀變化只要移動座標點就能夠了。

簡單的來講，在SVG要實現Morphing動畫，主要是靠移動形狀路徑上的座標點從而達到從一個形狀變到另外一個形狀的動畫效果。而且因爲這個形狀是從一個形狀變化而來，因此路徑上的座標數量要徹底相同，不一樣的只是座標的位置不一樣而已。

如何製做Morphing動畫

要製做Morphing動畫，首先得用矢量編輯軟件好比Adobe Illustrator或者是Inscape來設計好相關的形狀並獲得相關路徑（path）的數據信息。

好比，若是你要作以下圖所示的兩個形狀之間變化的Morphing動畫，就須要在設計軟件中先設計好兩個形狀。固然這裏要注意一點的事是，兩個圖形的座標數量要同樣，只是位置不一樣而已。瞭解
Adobe Illustrator的應該會明白，通常在設計好基本的形狀的時候，使用貝賽爾曲線工具，能夠作不少的變化，從而使用一個基本的形狀能夠作出不一樣形狀的變化。

實戰Morphing動畫

下面咱們來小小的練習一下，實現上圖中的效果。

首先在設計軟件中，這裏使用的是Adobe Illustrator來設計一個基本的形狀，以下圖所示：

而後複製一份新建一個文檔，在它基礎上使用貝賽爾曲線工具，稍微對幾個座標點作下變化獲得下面的圖形：

這就獲得了兩個矢量圖形，而後分別導出SVG格式，獲得Path的信息：

path1

<path d="M200,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,200,51.75Z" />

path2

<path d="M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z" />

獲得path信息以後，接下來就是來實現動畫效果來。

這裏咱們須要藉助於一個小小的輕量級的js動畫庫anime，這個庫很是的小，並且沒有任何的依賴，才幾百行。是一款功能強大的Javascript動畫庫插件。anime.js能夠和CSS3屬性，SVG，DOM元素和JS對象一塊兒工做，製做出各類高性能，平滑過渡的動畫效果。

具體的使用方法就不詳細介紹，能夠去官網看相關實例。

下面就針對SVG來介紹下使用anime來實現Morphing動畫。根據Morphing動畫原理，咱們如今是要實現從path1形狀平滑的過分到path2的動畫效果。

anime api

獲取目標元素

在anime中要來編寫動畫效果，首先是選擇你要運動的元素，這裏使用瀏覽器默認的方法來獲得目標元素：

選擇器	示例
DOM元素	document.getElementsByTagName("path")[0]]

參數

這裏簡單介紹下，咱們將要使用的一些參數

名字	默認值	類型
delay(動畫延遲)	0	數字
duration(動畫運行時間)	1000	數字
autoplay(是否自動開始)	ture	布爾值
easing(緩動曲線)	easeOutElastic	使用console log anime.easings能夠輸出它支持的一些歡動曲線方法
loop(是否循環播放)	false	布爾值或者是具體的整數

具體到咱們這個效果，其實咱們要改變的就是SVG中Path路徑的值，使用anime結合上面介紹的方法能夠很輕鬆的來實現這個效果，以下代碼所示：

anime({
  targets: [document.getElementsByTagName("path")[0]],
  d: "M140,51.75A51.75,51.75,0,0,0,99.2,35.27a83,83,0,1,0,65.13,65.67A51.76,51.76,0,0,0,140,51.75Z",
  duration: 1000,
  loop: true,
  direction: "alternate",
  easing: "linear"
});

上面的代碼中，d就是咱們要改變的屬性的值。這裏注意下duration這個參數，它是用來指定動畫運行的方向的，主要是三個值normal、reverse和alternate，這裏選擇是alternate即動畫動畫輪流反向播放。

OK，就這麼簡單咱們就實現了一個簡單Morphing動畫。充分發揮你的想象力，咱們能夠實現更有趣的Morphing動畫。

最近作了一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多的關於SVG方面的技術知識能夠去網站看看。