成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用 SVG 來制作 Morphing 動(dòng)畫效果

_Dreams / 3127人閱讀

摘要：了解的應(yīng)該會(huì)明白，一般在設(shè)計(jì)好基本的形狀的時(shí)候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個(gè)基本的形狀可以做出不同形狀的變化?？梢院蛯傩?，，元素和對(duì)象一起工作，制作出各種高性能，平滑過渡的動(dòng)畫效果。下面就針對(duì)來介紹下使用來實(shí)現(xiàn)動(dòng)畫。

何為Morphing動(dòng)畫

開始之前，先來了解下什么是Morphing動(dòng)畫。所謂Morphing動(dòng)畫是表示，同一個(gè)模型，從一個(gè)形狀變到另一個(gè)形狀。如下圖所示，從形狀1漸變到形狀2，再從形狀2漸變到形狀3，最后從形狀3漸變到形狀1，以此循環(huán)往復(fù)。

從上圖可以看到像這樣的Morphing動(dòng)畫簡直是為SVG量身定制的，因?yàn)镾VG中的路徑原本就是由很多的坐標(biāo)點(diǎn)構(gòu)成的（點(diǎn)連成線），做一些形狀變化只要移動(dòng)坐標(biāo)點(diǎn)就可以了。

簡單的來說，在SVG要實(shí)現(xiàn)Morphing動(dòng)畫，主要是靠移動(dòng)形狀路徑上的坐標(biāo)點(diǎn)從而達(dá)到從一個(gè)形狀變到另一個(gè)形狀的動(dòng)畫效果。并且由于這個(gè)形狀是從一個(gè)形狀變化而來，所以路徑上的坐標(biāo)數(shù)量要完全相同，不同的只是坐標(biāo)的位置不同而已。

如何制作Morphing動(dòng)畫

要制作Morphing動(dòng)畫，首先得用矢量編輯軟件比如Adobe Illustrator或者是Inscape來設(shè)計(jì)好相關(guān)的形狀并得到相關(guān)路徑（path）的數(shù)據(jù)信息。

比如，如果你要做如下圖所示的兩個(gè)形狀之間變化的Morphing動(dòng)畫，就需要在設(shè)計(jì)軟件中先設(shè)計(jì)好兩個(gè)形狀。當(dāng)然這里要注意一點(diǎn)的事是，兩個(gè)圖形的坐標(biāo)數(shù)量要一樣，只是位置不同而已。了解
Adobe Illustrator的應(yīng)該會(huì)明白，一般在設(shè)計(jì)好基本的形狀的時(shí)候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個(gè)基本的形狀可以做出不同形狀的變化。

實(shí)戰(zhàn)Morphing動(dòng)畫

下面我們來小小的練習(xí)一下，實(shí)現(xiàn)上圖中的效果。

首先在設(shè)計(jì)軟件中，這里使用的是Adobe Illustrator來設(shè)計(jì)一個(gè)基本的形狀，如下圖所示：

然后復(fù)制一份新建一個(gè)文檔，在它基礎(chǔ)上使用貝賽爾曲線工具，稍微對(duì)幾個(gè)坐標(biāo)點(diǎn)做下變化得到下面的圖形：

這就得到了兩個(gè)矢量圖形，然后分別導(dǎo)出SVG格式，得到Path的信息：

path1
path2

得到path信息之后，接下來就是來實(shí)現(xiàn)動(dòng)畫效果來。

這里我們需要借助于一個(gè)小小的輕量級(jí)的js動(dòng)畫庫anime，這個(gè)庫非常的小，而且沒有任何的依賴，才幾百行。是一款功能強(qiáng)大的Javascript動(dòng)畫庫插件。anime.js可以和CSS3屬性，SVG，DOM元素和JS對(duì)象一起工作，制作出各種高性能，平滑過渡的動(dòng)畫效果。

具體的使用方法就不詳細(xì)介紹，可以去官網(wǎng)看相關(guān)實(shí)例。

下面就針對(duì)SVG來介紹下使用anime來實(shí)現(xiàn)Morphing動(dòng)畫。根據(jù)Morphing動(dòng)畫原理，我們現(xiàn)在是要實(shí)現(xiàn)從path1形狀平滑的過度到path2的動(dòng)畫效果。

anime api

獲取目標(biāo)元素

在anime中要來編寫動(dòng)畫效果，首先是選擇你要運(yùn)動(dòng)的元素，這里使用瀏覽器默認(rèn)的方法來得到目標(biāo)元素：

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

參數(shù)

這里簡單介紹下，我們將要使用的一些參數(shù)

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

具體到我們這個(gè)效果，其實(shí)我們要改變的就是SVG中Path路徑的值，使用anime結(jié)合上面介紹的方法可以很輕松的來實(shí)現(xiàn)這個(gè)效果，如下代碼所示：

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這個(gè)參數(shù)，它是用來指定動(dòng)畫運(yùn)行的方向的，主要是三個(gè)值normal、reverse和alternate，這里選擇是alternate即動(dòng)畫動(dòng)畫輪流反向播放。

OK，就這么簡單我們就實(shí)現(xiàn)了一個(gè)簡單Morphing動(dòng)畫。充分發(fā)揮你的想象力，我們可以實(shí)現(xiàn)更有趣的Morphing動(dòng)畫。

最近做了一個(gè)關(guān)于SVG的應(yīng)用的技術(shù)分享網(wǎng)站svgtrick.com，會(huì)同步一些文章到這里來，更多的關(guān)于SVG方面的技術(shù)知識(shí)可以去網(wǎng)站看看。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80403.html

相關(guān)文章

  • 使用 SVG 來制作 Morphing 動(dòng)畫效果

    摘要：了解的應(yīng)該會(huì)明白，一般在設(shè)計(jì)好基本的形狀的時(shí)候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個(gè)基本的形狀可以做出不同形狀的變化?？梢院蛯傩裕?，元素和對(duì)象一起工作，制作出各種高性能，平滑過渡的動(dòng)畫效果。下面就針對(duì)來介紹下使用來實(shí)現(xiàn)動(dòng)畫。 何為Morphing動(dòng)畫 開始之前，先來了解下什么是Morphing動(dòng)畫。所謂Morphing動(dòng)畫是表示，同一個(gè)模型，從一個(gè)形狀變到另一個(gè)形狀。如下...

    張漢慶 評(píng)論0 收藏0

  • 使用 Snap.svg 來實(shí)現(xiàn)一個(gè)具有 morphing 動(dòng)畫效果的按鈕動(dòng)效

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

    jubincn 評(píng)論0 收藏0

  • anime.js 實(shí)戰(zhàn)：實(shí)現(xiàn)一個(gè) SVG 形變（morphing）動(dòng)畫

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

    iamyoung001 評(píng)論0 收藏0

  • 使用 GreenSock 來制作 SVG 動(dòng)畫

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

    everfly 評(píng)論0 收藏0

  • SVG

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

    104828720 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<