使用 SVG 來制作 Morphing 動畫效果

_Dreams 發布于2019-08-20 11:07 / 3116人閱讀

摘要：了解的應該會明白，一般在設計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化。可以和屬性，，元素和對象一起工作，制作出各種高性能，平滑過渡的動畫效果。下面就針對來介紹下使用來實現動畫。

何為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

path2

得到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方面的技術知識可以去網站看看。

云服務器 GPU云服務器 svg動畫浮動效果動畫翻轉動畫效果 html動畫效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80403.html

使用 SVG 來制作 Morphing 動畫效果

摘要：了解的應該會明白，一般在設計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化。可以和屬性，，元素和對象一起工作，制作出各種高性能，平滑過渡的動畫效果。下面就針對來介紹下使用來實現動畫。何為Morphing動畫開始之前，先來了解下什么是Morphing動畫。所謂Morphing動畫是表示，同一個模型，從一個形狀變到另一個形狀。如下...

張漢慶 2019-08-29 11:19 評論0 收藏0
使用 Snap.svg 來實現一個具有 morphing 動畫效果的按鈕動效

摘要：今天這篇文章來講一個動畫在界面上一個具體的運用即具有動畫效果的播放按鈕。在后面實現動畫效果的時候要用到。下面來看下實現動畫效果核心代碼所謂動畫效果，就是從一個形狀變到另一個形狀。由于使用方法，它們之間的變化會有一個動畫效果即動畫效果。前面有專門寫過一篇morphing動畫基礎知識的文章，不了解的話可以去這里看看。今天這篇文章來講一個morphing動畫在UI界面上一個具體的運用即具...

jubincn 2019-08-21 14:29 評論0 收藏0
anime.js 實戰：實現一個 SVG 形變（morphing）動畫

摘要：從形狀到另外一個形狀的轉化就是移動坐標點而已。今天我們來使用之前多次提到過的這個庫來實現動畫。在執行的時候，會自動讀取數組里顏色的值，填充到路徑中去，從而實現兩個形狀填充顏色的動畫。這個實例來看看如何使用anime.js來實現一個形變（morphing）動畫。至于什么是morphing動畫，看完下面這個圖就知道了。 showImg(https://segmentfault.com/...

iamyoung001 2019-08-22 10:54 評論0 收藏0
使用 GreenSock 來制作 SVG 動畫

摘要：在制作動畫方面也非常強悍，并且還專門提供了用于加強動畫制作的相關插件，比如。一個有趣的的動畫效果就完成了，代碼地址使用配合來制作動畫效果如此簡單。原文地址，根據自己理解整理了下這個教程，主要是來學習下使用來制作動畫效果的思路和方法。這是我的一個關于SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這里來，更多關于SVG技術應用可以去網站看看。最近從Dribbble...

everfly 2019-08-22 10:49 評論0 收藏0
SVG

摘要：目前只提供了一些基礎功能。中與的區別開發者第一次接觸手寫那種，雖然很多情況都有設計師使用來完成這項工作，但還是不排除需要利用到的每個元素。輕量級，具備靈活的來自團隊，全球非常出名的可視化團隊。于是筆者嘗試著把移植到中。使用SVG + CSS實現動態霓虹燈文字效果早上無意間進入一個網站，看到他們的LOGO效果略屌，如圖：剛開始以為是gif動畫之類的，審查元素發現居然是用SVG + ...

104828720 2019-08-29 14:00 評論0 收藏0