svg animation動畫應(yīng)用

peixn 發(fā)布于2019-08-02 14:14 / 1379人閱讀

摘要：建議直接用同學(xué)給的編輯器打開后直接引用，因為貝塞爾曲線真的不是隨便就能住的。。。

最近在做首頁動畫的時候，引入有背景色的mp4動圖時，動圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現(xiàn)了下圖這種尷尬的情況：

動圖的邊界始終有根分界線，即使調(diào)整了背景色適應(yīng)這個邊界，也總是會在不同的顯示器中顯示出不同程度的分界線。
于是我決定用代碼實現(xiàn)整個動圖。

制作這樣一套動圖，只靠前端攻城獅是有點費勁的，畢竟需要很多線圖的繪制，沒有專業(yè)的UI支持很難設(shè)計出標(biāo)準(zhǔn)漂亮的動圖。
拿我這次做的動圖來說

整體由css操作png和svg搭建流轉(zhuǎn)路線構(gòu)成
首先需要UI同學(xué)把整體布局，距離、素材規(guī)劃出來
然后就是根據(jù)整體布局和距離把素材撲上去
最最重要的是svg繪制的流動線路

1.svg path

這種線路圖，UI同學(xué)一般繪制完都是向下面這樣的：

總之就是很長很亂的一段。。。
這是因為AI繪制svg的時候每一條線都是由兩條線和一些彎曲的規(guī)則（貝塞爾曲線）組成。建議直接用UI同學(xué)給的svg編輯器打開后直接引用，因為”貝塞爾曲線“真的不是隨便就能Hold住的。。。
下面附上svg path指令

對比上面的代碼可以看出路徑d由M作為路徑起始坐標(biāo)點開始由z結(jié)束這段閉合曲線。
直線由L或者l繪制，分別代表絕對路徑和相對路徑
曲線由貝塞爾曲線規(guī)則繪制
C(C x1, y1, x2, y2, x,y )
為了更方便展現(xiàn)出貝塞爾的奧義，舉下圖說明：

然鵝，真正使用指令徒手敲代碼畫圖的時候才真正發(fā)現(xiàn)，這就是個坑啊。。。畢竟我們還要測量距離、像素，找起點、終點，最頭疼的是還要用貝塞爾繪制折線曲率。。。有這時間還不如去學(xué)學(xué)UI了

云服務(wù)器 GPU云服務(wù)器 svg動畫 animated anime animate

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

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

相關(guān)文章

2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉(zhuǎn)換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應(yīng)動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網(wǎng)頁尋找一個整潔的Javascript動畫庫時，我發(fā)現(xiàn)很多recommended的動畫庫一段時間都沒有維護(hù)。經(jīng)過一些研究，我收集了11個最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

call_me_R 2019-08-22 18:47 評論0 收藏0
2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉(zhuǎn)換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應(yīng)動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網(wǎng)頁尋找一個整潔的Javascript動畫庫時，我發(fā)現(xiàn)很多recommended的動畫庫一段時間都沒有維護(hù)。經(jīng)過一些研究，我收集了11個最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

teren 2019-08-02 10:56 評論0 收藏0
2018年值得期待11個Javascript動畫庫

摘要：超過的，是一個動畫庫，可以處理屬性，單個轉(zhuǎn)換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應(yīng)動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。在瀏覽網(wǎng)頁尋找一個整潔的Javascript動畫庫時，我發(fā)現(xiàn)很多recommended的動畫庫一段時間都沒有維護(hù)。經(jīng)過一些研究，我收集了11個最好的庫，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...

skinner 2019-08-30 15:54 評論0 收藏0
anime.js 實戰(zhàn)：實現(xiàn)一個 SVG 形變（morphing）動畫

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

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

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

張漢慶 2019-08-29 11:19 評論0 收藏0