svg animation動畫應用

最近在作首頁動畫的時候，引入有背景色的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循環：