svg波浪動畫

以前作過CSS動畫、canvas動畫，但svg動畫第一次作，最終效果以下圖所示。

分析

由上圖能夠看出，波浪動畫是由多個不一樣的‘波浪’組成，而每一個波浪則是由近似正弦圖形組成，最後的‘波動’效果，實際上是靜態的波浪循環向左運動產生的。

同時介紹後面會用到的幾個svg相關標籤：

• path：定義形狀的基礎元素，其中d屬性就是圖形的路徑。靜態的波浪就是這個元素繪製的，後面會再單獨介紹

• animateTransform：定義目標元素的變形屬性，波浪的循環移動就是使用這個屬性實現的

• g：組合對象的容器

繪製單個靜態波浪

<svg
    xmlns="http://www.w3.org/2000/svg"         
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <path
        d="
            M0 70
            Q 75 39, 150 70
            T 300 70 
            V 100 H 0 V 0"
        fill="#ccc">
    </path>
</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),從而造成閉合曲線。

動起來

<svg
    xmlns="http://www.w3.org/2000/svg"     
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="300"
    height="200">
    <g >
        <path
            d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"
            fill="#ccc">
        </path>
        <animateTransform
            attributeName="transform"
            attributeType="XML"
            type="translate"
            from="0" to="-300" dur="1.5s" 
            repeatCount="indefinite">
        </animateTransform>
    </g>
</svg>

增長了animateTransform後就動其來了，該標籤的幾個屬性含義爲：

attributeName：須要運動的屬性
type：具體運動的類型
from：運動初始值
to：運動終點值
dur：運動時間
repeatCount：重複次數，indefinite爲無限循環

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

多個波浪合成

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="200">
    <g fill="rgba(106,127,239,0.1)">
        <path d="M 0 70 Q 75 39, 150 70 T 300 70 T 450 70 T 600 70 T 750 70 V 100 H 0 V 0"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-300" dur="1.5s" repeatCount="indefinite"></animateTransform>
    </g>
    <g fill="rgba(106,127,239,0.15)">
        <path d="M 0 70 Q 87.5 47, 175 70 T 350 70 T 525 70 T 700 70 T 875 70 T 1050 70 V 100 H 0 V 0"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-350" dur="3s" repeatCount="indefinite"></animateTransform>
    </g>
    <g fill="rgba(106,127,239,0.18)" transform="translate(-903.868 0)">
        <path d="M 0 70 Q 135 36, 270 70 T 540 70 T 810 70 T 1080 70 V 100 H 0 V 0" transform="translate(-38.232284367796474, 0)"></path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="-540" dur="2s" repeatCount="indefinite"></animateTransform>
    </g>
</svg>

抽象成組件

當手寫兩個波浪以後，就會發現不少地方是相同的，總結以後會發現只有svg的寬高、週期、峯值、移動速度、初始偏移量（即正弦的初相位）、填充顏色、疊加波浪個數這幾個是變化的，所以能夠作成組件，隱藏內部的複雜度。