svg波浪動畫

之前做過css動畫、canvas動畫，但svg動畫第一次做，最終效果如下圖所示。

由上圖可以看出，波浪動畫是由多個不同的『波浪』組成，而每個波浪則是由近似正弦圖形組成，最後的『波動』效果，其實是靜態的波浪迴圈向左運動產生的。

上面是寫好的單個波浪，其中d屬性繪製了形狀，fill屬性表示填充的顏色。

d屬性中使用了以下幾個命令：

m：m x y表示移動到(x, y)點(svg中左上角是(0,0)點)

q：q x1 y1, x2 y2表示繪製二次貝塞爾曲線，x1 y1為二次貝塞爾的控制點，x2 y2為終點，可以使用貝塞爾生產曲線工具幫助生成。

t：t x y表示生成上乙個二次貝塞爾曲線的映象，其終點座標為(x,y)

v：v y表示從當前點(x0,y0)垂直移動到(x0, y)

h：h x表示從當前點(x0, y0)水平移動到(x, y0)

所以上面**可以翻譯後為：首先移動到(0,70)處，再繪製起點為(0,70)，終點為(150,70)，控制點為(75,39)的二次貝塞爾曲線，接著繪製已(300,70)為終點的映象二次貝塞爾曲線，最後依次移動到(100,70)，(0,70)，(0,0),從而形成閉合曲線。

增加了animatetransform後就動其來了，該標籤的幾個屬性含義為：

attributename：需要運動的屬性 type：具體運動的型別 from：運動初始值 to：運動終點值 dur：運動時間 repeatcount：重複次數，indefinite為無限迴圈

看了後就發現其實很簡單，有一下幾個點需要注意，首先path繪製圖形的路徑至少是svg寬加上from-to的寬，第二，to的值為週期的n/2倍，這個可以想象一下正弦的波形。注意了這兩點，波浪看起來已經有點模樣了。

只有乙個波浪，看起來還是不夠逼真，將多個不同週期波浪合成，並填充不同透明度的顏色形成最終效果。

當手寫兩個波浪之後，就會發現很多地方是相同的，總結之後會發現只有svg的寬高、週期、峰值、移動速度、初始偏移量（即正弦的初相位）、填充顏色、疊加波浪個數這幾個是變化的，因此可以做成元件，隱藏內部的複雜度。