最近在做首頁動畫的時候，引入有背景色的mp4動圖時，動圖的背景色不能很好的融入相同背景色的不同瀏覽器和不同顯示器，出現了下圖這種尷尬的情況：
動圖的邊界始終有根分界線，即使調整了背景色適應這個邊界，也總是會在不同的顯示器中顯示出不同程度的分界線。
於是我決定用代碼實現整個動圖。
製作這樣一套動圖，只靠前端攻城獅是有點費勁的，畢竟需要很多線圖的繪製，沒有專業的UI支持很難設計出標準漂亮的動圖。
拿我這次做的動圖來說
整體由css操作png和svg搭建流轉路線構成
首先需要UI同學把整體佈局，距離、素材規劃出來
然後就是根據整體佈局和距離把素材撲上去
最最重要的是svg繪製的流動線路
1.svg path
這種線路圖，UI同學一般繪製完都是向下面這樣的：
<path class="st0" d="M208,224.6c-0.5,0-1-0.1-1.5-0.4c-0.9-0.5-1.5-1.5-1.5-2.6l-0.6-36.3c0-0.6,0.4-1,1-1c0,0,0,0,0,0
c0.5,0,1,0.4,1,1l0.6,36.3c0,0.5,0.4,0.8,0.5,0.9c0.2,0.1,0.6,0.2,1,0l67.5-40.3c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2,0-0.6-0.5-0.9
l-82.9-49.8c-0.9-0.5-1.5-1.5-1.5-2.6c0-1.1,0.6-2,1.5-2.6l98.5-58.6c0.4-0.3,0.5-0.7,0.5-0.9c0-0.2-0.1-0.6-0.5-0.9l-50-29.2
c-0.9-0.5-1.5-1.5-1.5-2.5c0-1,0.5-2,1.4-2.6l9.4-6c0.5-0.3,1.1-0.2,1.4,0.3s0.2,1.1-0.3,1.4l-9.4,6c-0.4,0.3-0.5,0.7-0.5,0.9
s0.1,0.6,0.5,0.8l50,29.2c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-98.5,58.6c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9
l82.9,49.8c0.9,0.5,1.5,1.5,1.5,2.6c0,1.1-0.5,2-1.5,2.6l-67.5,40.3C209.1,224.5,208.5,224.6,208,224.6z"/>
<path class="st0" d="M324.9,158.7c-0.2,0-0.4,0-0.5-0.1l-64.2-39.3c-0.9-0.5-1.4-1.5-1.4-2.6c0-1.1,0.5-2,1.5-2.6l99-59.4
c0.4-0.3,0.5-0.7,0.5-0.9s0-0.6-0.5-0.9l-71.3-42.7c-0.5-0.3-0.6-0.9-0.3-1.4s0.9-0.6,1.4-0.3l71.3,42.7c0.9,0.5,1.5,1.5,1.5,2.6
s-0.5,2-1.5,2.6l-99,59.4c-0.4,0.3-0.5,0.7-0.5,0.9c0,0.2,0,0.6,0.5,0.9l64.2,39.3c0.5,0.3,0.6,0.9,0.3,1.4
C325.6,158.6,325.2,158.7,324.9,158.7z"/>總之就是很長很亂的一段。。。
這是因爲AI繪製svg的時候每一條線都是由兩條線和一些彎曲的規則（貝塞爾曲線）組成。建議直接用UI同學給的svg編輯器打開後直接引用，因爲”貝塞爾曲線“真的不是隨便就能Hold住的。。。
下面附上svg path指令
對比上面的代碼可以看出路徑d由M作爲路徑起始座標點開始由z結束這段閉合曲線。
直線由L或者l繪製，分別代表絕對路徑和相對路徑
曲線由貝塞爾曲線規則繪製
C(C x1, y1, x2, y2, x,y )
爲了更方便展現出貝塞爾的奧義，舉下圖說明：
然鵝，真正使用指令徒手敲代碼畫圖的時候才真正發現，這就是個坑啊。。。畢竟我們還要測量距離、像素，找起點、終點，最頭疼的是還要用貝塞爾繪製折線曲率。。。有這時間還不如去學學UI了🙄當然，無權阻止大神們的探索。。。
所以踩了這些坑的我還是直接用了UI繪製好的svg
繪製
- 直接上path
<svg>
<path />
<svg>
首先這樣肯定是可以繪製出線的，但是我們的目的不光是要畫出線，還要在線上加動畫效果
動畫
我是用一小段漸變色的流動來表示數據的流動，所以首先需要給線段--漸變色
在SVG中，有兩種主要的漸變類型：
- 線性漸變（LinearGradient）
- 放射性漸變|徑向漸變（RadialGradient）
區別在於：
使用徑向漸變可以定義漸變中心原點的座標，半徑，更方便加在線上。
直接上代碼：
<radialGradient cx="194.1" cy="128.9" r="20" gradientUnits="userSpaceOnUse" id="linearGradientCordPath1">
<stop stop-color="#ffff00" offset="0%"></stop>
<stop stop-color="#ffff00" offset="25%"></stop>
<stop stop-color="#22A1FF" offset="100%"></stop>
</radialGradient>漸變的顏色範圍可由兩種或多種顏色組成。每種顏色通過一個<stop>標籤來規定。offset屬性用來定義漸變的開始和結束位置。大致效果如下：
然後我們需要讓這段漸變的顏色動起來
<animation>
<animate attributeName="cx" values="252.3;242.6;292.6;194.1;277;205;205.4;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate>
<animate attributeName="cy" values="25;34.1;68.5;128.9;183.9;221.6;184.3;" dur="3s" calcMode="linear" repeatCount="indefinite"></animate>attributeName要變化的元素屬性名稱分別爲x軸和y軸方向，values是每一個經過的關鍵值座標點，可以直接用Adobe AI打開svg在線上直接拿到關鍵點的座標分別寫入cx,cy的value中，調整dur時間，加上indefinite循環：
