資訊專欄INFORMATION COLUMN
摘要：建議直接用同學給的編輯器打開后直接引用，因為貝塞爾曲線真的不是隨便就能住的。。。
最近在做首頁動畫的時候，引入有背景色的mp4動圖時，動圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現了下圖這種尷尬的情況：
動圖的邊界始終有根分界線，即使調整了背景色適應這個邊界，也總是會在不同的顯示器中顯示出不同程度的分界線。
于是我決定用代碼實現整個動圖。
制作這樣一套動圖，只靠前端攻城獅是有點費勁的，畢竟需要很多線圖的繪制，沒有專業的UI支持很難設計出標準漂亮的動圖。
拿我這次做的動圖來說
整體由css操作png和svg搭建流轉路線構成
首先需要UI同學把整體布局，距離、素材規劃出來
然后就是根據整體布局和距離把素材撲上去
最最重要的是svg繪制的流動線路
這種線路圖，UI同學一般繪制完都是向下面這樣的：
總之就是很長很亂的一段。。。
這是因為AI繪制svg的時候每一條線都是由兩條線和一些彎曲的規則（貝塞爾曲線）組成。建議直接用UI同學給的svg編輯器打開后直接引用，因為”貝塞爾曲線“真的不是隨便就能Hold住的。。。
下面附上svg path指令
對比上面的代碼可以看出路徑d由M作為路徑起始坐標點開始由z結束這段閉合曲線。
直線由L或者l繪制，分別代表絕對路徑和相對路徑
曲線由貝塞爾曲線規則繪制
C(C x1, y1, x2, y2, x,y )
為了更方便展現出貝塞爾的奧義，舉下圖說明：
然鵝，真正使用指令徒手敲代碼畫圖的時候才真正發現，這就是個坑啊。。。畢竟我們還要測量距離、像素，找起點、終點，最頭疼的是還要用貝塞爾繪制折線曲率。。。有這時間還不如去學學UI了
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53670.html
摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。 在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。 經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...
摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。 在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。 經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...
摘要：超過的，是一個動畫庫，可以處理屬性，單個轉換，或任何屬性以及對象。在，是一個快速的動畫引擎，具有與的相同的。在，這個功能和反應動畫庫只重。由和其他人使用，這個庫既流行又令人驚訝地有用。 在瀏覽網頁尋找一個整潔的Javascript動畫庫時，我發現很多recommended的動畫庫一段時間都沒有維護。 經過一些研究，我收集了11個最好的庫，在你的應用程序中使用。我還添加了一些，主要是非維...
摘要：從形狀到另外一個形狀的轉化就是移動坐標點而已。今天我們來使用之前多次提到過的這個庫來實現動畫。在執行的時候，會自動讀取數組里顏色的值，填充到路徑中去，從而實現兩個形狀填充顏色的動畫。 這個實例來看看如何使用anime.js來實現一個形變（morphing）動畫。 至于什么是morphing動畫，看完下面這個圖就知道了。 showImg(https://segmentfault.com/...
摘要：了解的應該會明白，一般在設計好基本的形狀的時候，使用貝賽爾曲線工具，可以做很多的變化，從而使用一個基本的形狀可以做出不同形狀的變化?？梢院蛯傩?，，元素和對象一起工作，制作出各種高性能，平滑過渡的動畫效果。下面就針對來介紹下使用來實現動畫。 何為Morphing動畫 開始之前，先來了解下什么是Morphing動畫。所謂Morphing動畫是表示，同一個模型，從一個形狀變到另一個形狀。如下...
閱讀 2965·2021-11-23 10:12
閱讀 2690·2021-11-23 09:51
閱讀 2040·2021-11-15 11:37
閱讀 1352·2019-08-30 15:55
閱讀 1965·2019-08-29 15:40
閱讀 1165·2019-08-28 18:30
閱讀 1650·2019-08-28 18:02
閱讀 2640·2019-08-26 12:00
