如下圖所示的波浪動畫效果，實現方法有很多，比如CSS或者是js等方法都可以實現。不過，要是使用SVG來實現的，我覺得比其它兩種方法都要簡單。這篇文章就來講講使用SVG來實現類似這樣的波浪動畫效果是多么的簡單。
先來分析下這個波浪效果的實現原理。
波浪效果主要是由兩個動畫構成，一個是波浪上下位置的變化即改變元素的Y軸的值；另外一個波浪滾動的效果，其實是改變一個大的由SVG繪制的波浪的X軸的變化形成的。
整個效果的一個關鍵是使用矢量設計軟件比如AI來設計一個波浪的形狀：
類似的波浪形狀使用AI中的鋼筆工具很輕松就能繪制出來，SVG代碼如下：
<svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" </path></svg> SVG默認路經填充是黑色的，可以在AI中直接定義路經的顏色，也可以通過樣式來定義填充顏色。
波浪形狀有了，下面來實現動畫效果，先來定義基本的HTML效果：
<div class="wrapper"> <h3>animated svg</h3> <div> <div class="wave-svg-shape"> <svg class="wave-svg" xmlns="http://www.w3.org/2000/svg" id="738255fe-a9fa-4a5e-963a-8e97f59370ad" data-name="3-waves" viewBox="0 0 600 215.43"><title>wave shape</title><path class="871c1787-a7ef-4a54-ad03-3cd50e05767a" d="M639,986.07c-17-1-27.33-.33-40.5,2.67s-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S456,987.07,439,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06S256,987.07,239,986.07s-27.33-.33-40.5,2.67-24.58,11.84-40.46,15c-13.56,2.69-31.27,2.9-46.2,1.35-17.7-1.83-35-9.06-35-9.06v205.06h600V996S656,987.07,639,986.07Z" transform="translate(-76 -985)"></path></svg> </div> </div> </div> 類名為wave-svg-shape用來實現波浪在Y軸位置變化的動畫效果；類名為wave-svg用來實現波浪在X軸變化的動畫效果。
定義基本的CSS：
body > .wrapper { margin: 50px auto; text-align: center; } h3 { margin-bottom: 50px; } body > .wrapper > div { width: 100px; height: 100px; overflow: hidden; display: block; margin: 0 auto; position: relative; } .wave-svg-shape { position: absolute; top: 0; left: 0; width: 300px; height: 100%; overflow: hidden; transform: translateX(-100px); } .wave-svg-shape .wave-svg { width: 100%; height: auto; overflow: hidden; float: left; fill: #00A1DF; margin: 0; } 在樣式中，使用transform定義了波浪在X軸的初始位置，並且改變了波浪形狀的填充顏色。
接下來是來編寫兩個動畫效果的animation的keyframe，首先是類名為wave-svg-shape的動畫效果，主要是transform來實現：
@keyframes fillUpSvg { 0% { transform: translateY(calc(100px/2)) scaleY(0); } 50% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(calc(100px/2)) scaleY(0); } } 從上面代碼中可以看出主要是用來translateY和scaleY這兩個屬性，在初始的0%的點，元素在Y軸的位置為50px並且在Y軸的方向上的縮小為0，這樣元素剛好是在可視范圍之外。然后再改變元素的值為默認的值，就實現了波浪上下滾動的動畫效果。
上下效果實現了，接下來是類名wave-svg元素在X軸上的滾動動畫效果：
@keyframes waveSvgAnim { 0% { transform: translateX(calc(-100px * 2)); } 100% { transform: translateX(100px * 2); } } 這里就簡單了，就是移動元素在X軸上的位置。整體CSS代碼如下：
body > .wrapper { margin: 50px auto; vertical-align: top; text-align: center; } h3 { margin-bottom: 50px; } body > .wrapper > div { width: 100px; height: 100px; overflow: hidden; display: block; margin: 0 auto; position: relative; } .wave-svg-shape { position: absolute; top: 0; left: 0; width: 300px; height: 100%; overflow: hidden; transform: translateX(-100px); animation: fillUpSvg 10s ease-in-out infinite; } .wave-svg-shape .wave-svg { width: 100%; height: auto; overflow: hidden; float: left; fill: #00A1DF; margin: 0; animation: waveSvgAnim 1s linear infinite; } @keyframes fillUpSvg { 0% { transform: translateY(calc(100px/2)) scaleY(0); } 50% { transform: translateY(0) scaleY(1); } 100% { transform: translateY(calc(100px/2)) scaleY(0); } } @keyframes waveSvgAnim { 0% { transform: translateX(calc(-100px * 2)); } 100% { transform: translateX(100px * 2); } } 一個優雅的波浪滾動動畫效果就實現了。這樣類似的效果在一些加載動畫上面用的比較多。
現在瀏覽器對SVG的支持越來越好了，特別是移動端可以大膽的使用。好好的使用SVG這一利器，不僅能提高動畫開發的效率，還可以大大提升動畫的趣味性。