資訊專欄INFORMATION COLUMN
摘要：了解的應(yīng)該會明白，一般在設(shè)計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化?？梢院蛯傩?，，元素和對象一起工作，制作出各種高性能，平滑過渡的動畫效果。下面就針對來介紹下使用來實現(xiàn)動畫。
何為Morphing動畫
開始之前，先來了解下什么是Morphing動畫。所謂Morphing動畫是表示，同一個模型，從一個形狀變到另一個形狀。如下圖所示，從形狀1漸變到形狀2，再從形狀2漸變到形狀3，最后從形狀3漸變到形狀1，以此循環(huán)往復(fù)。
從上圖可以看到像這樣的Morphing動畫簡直是為SVG量身定制的，因為SVG中的路徑原本就是由很多的坐標點構(gòu)成的（點連成線），做一些形狀變化只要移動坐標點就可以了。
簡單的來說，在SVG要實現(xiàn)Morphing動畫，主要是靠移動形狀路徑上的坐標點從而達到從一個形狀變到另一個形狀的動畫效果。并且由于這個形狀是從一個形狀變化而來，所以路徑上的坐標數(shù)量要完全相同，不同的只是坐標的位置不同而已。
如何制作Morphing動畫要制作Morphing動畫，首先得用矢量編輯軟件比如Adobe Illustrator或者是Inscape來設(shè)計好相關(guān)的形狀并得到相關(guān)路徑（path）的數(shù)據(jù)信息。
比如，如果你要做如下圖所示的兩個形狀之間變化的Morphing動畫，就需要在設(shè)計軟件中先設(shè)計好兩個形狀。當然這里要注意一點的事是，兩個圖形的坐標數(shù)量要一樣，只是位置不同而已。了解
Adobe Illustrator的應(yīng)該會明白，一般在設(shè)計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化。
下面我們來小小的練習(xí)一下，實現(xiàn)上圖中的效果。
首先在設(shè)計軟件中，這里使用的是Adobe Illustrator來設(shè)計一個基本的形狀，如下圖所示：
然后復(fù)制一份新建一個文檔，在它基礎(chǔ)上使用貝賽爾曲線工具，稍微對幾個坐標點做下變化得到下面的圖形：
這就得到了兩個矢量圖形，然后分別導(dǎo)出SVG格式，得到Path的信息：
path1path2
得到path信息之后，接下來就是來實現(xiàn)動畫效果來。
這里我們需要借助于一個小小的輕量級的js動畫庫anime，這個庫非常的小，而且沒有任何的依賴，才幾百行。是一款功能強大的Javascript動畫庫插件。anime.js可以和CSS3屬性，SVG，DOM元素和JS對象一起工作，制作出各種高性能，平滑過渡的動畫效果。
具體的使用方法就不詳細介紹，可以去官網(wǎng)看相關(guān)實例。
下面就針對SVG來介紹下使用anime來實現(xiàn)Morphing動畫。根據(jù)Morphing動畫原理，我們現(xiàn)在是要實現(xiàn)從path1形狀平滑的過度到path2的動畫效果。
anime api獲取目標元素
在anime中要來編寫動畫效果，首先是選擇你要運動的元素，這里使用瀏覽器默認的方法來得到目標元素：
| 選擇器 | 示例 |
|---|---|
| DOM元素 | document.getElementsByTagName("path")[0]] |
參數(shù)
這里簡單介紹下，我們將要使用的一些參數(shù)
| 名字 | 默認值 | 類型 |
|---|---|---|
| delay(動畫延遲) | 0 | 數(shù)字 |
| duration(動畫運行時間) | 1000 | 數(shù)字 |
| autoplay(是否自動開始) | ture | 布爾值 |
| easing(緩動曲線) | easeOutElastic | 使用console log anime.easings可以輸出它支持的一些歡動曲線方法 |
| loop(是否循環(huán)播放) | false | 布爾值或者是具體的整數(shù) |
具體到我們這個效果，其實我們要改變的就是SVG中Path路徑的值，使用anime結(jié)合上面介紹的方法可以很輕松的來實現(xiàn)這個效果，如下代碼所示：
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這個參數(shù)，它是用來指定動畫運行的方向的，主要是三個值normal、reverse和alternate，這里選擇是alternate即動畫動畫輪流反向播放。
OK，就這么簡單我們就實現(xiàn)了一個簡單Morphing動畫。充分發(fā)揮你的想象力，我們可以實現(xiàn)更有趣的Morphing動畫。
最近做了一個關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會同步一些文章到這里來，更多的關(guān)于SVG方面的技術(shù)知識可以去網(wǎng)站看看。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111573.html
摘要：了解的應(yīng)該會明白，一般在設(shè)計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化?？梢院蛯傩?，，元素和對象一起工作，制作出各種高性能，平滑過渡的動畫效果。下面就針對來介紹下使用來實現(xiàn)動畫。 何為Morphing動畫 開始之前，先來了解下什么是Morphing動畫。所謂Morphing動畫是表示，同一個模型，從一個形狀變到另一個形狀。如下...
摘要：今天這篇文章來講一個動畫在界面上一個具體的運用即具有動畫效果的播放按鈕。在后面實現(xiàn)動畫效果的時候要用到。下面來看下實現(xiàn)動畫效果核心代碼所謂動畫效果，就是從一個形狀變到另一個形狀。由于使用方法，它們之間的變化會有一個動畫效果即動畫效果。 前面有專門寫過一篇morphing動畫基礎(chǔ)知識的文章，不了解的話可以去這里看看。 今天這篇文章來講一個morphing動畫在UI界面上一個具體的運用即具...
摘要：從形狀到另外一個形狀的轉(zhuǎn)化就是移動坐標點而已。今天我們來使用之前多次提到過的這個庫來實現(xiàn)動畫。在執(zhí)行的時候，會自動讀取數(shù)組里顏色的值，填充到路徑中去，從而實現(xiàn)兩個形狀填充顏色的動畫。 這個實例來看看如何使用anime.js來實現(xiàn)一個形變（morphing）動畫。 至于什么是morphing動畫，看完下面這個圖就知道了。 showImg(https://segmentfault.com/...
摘要：在制作動畫方面也非常強悍，并且還專門提供了用于加強動畫制作的相關(guān)插件，比如。一個有趣的的動畫效果就完成了，代碼地址使用配合來制作動畫效果如此簡單。原文地址，根據(jù)自己理解整理了下這個教程，主要是來學(xué)習(xí)下使用來制作動畫效果的思路和方法。 這是我的一個關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會同步一些文章到這里來，更多關(guān)于SVG技術(shù)應(yīng)用可以去網(wǎng)站看看。 最近從Dribbble...
閱讀 852·2021-11-16 11:56
閱讀 1676·2021-11-16 11:45
閱讀 3124·2021-10-08 10:13
閱讀 4113·2021-09-22 15:27
閱讀 734·2019-08-30 11:03
閱讀 653·2019-08-30 10:56
閱讀 957·2019-08-29 15:18
閱讀 1750·2019-08-29 14:05
