先上效果圖：
這只是svg+js驅動的動畫的驚鴻一瞥，這裡用到的技術，只是其皮毛。三次以上的貝塞爾曲線，更加複雜的函式控制svg路徑……路總要一步一步走，先總結一下當前實現的效果吧！
功能：隨意指定高度和寬度（在svg path的d屬性中填寫相關引數），波浪的高度會在高度和-高度之間來會變動，時間控制使用了setinterval，因此可以指定動畫速度。
參考資料:
深度掌握svg路徑path的貝塞爾曲線指令 « 張鑫旭-鑫空間-鑫生活
路徑 - svg | mdn
如何獲取setinterval中函式的返回值?
svg波浪動畫
之前做過css動畫 canvas動畫，但svg動畫第一次做，最終效果如下圖所示。由上圖可以看出，波浪動畫是由多個不同的 波浪 組成，而每個波浪則是由近似正弦圖形組成，最後的 波動 效果，其實是靜態的波浪迴圈向左運動產生的。上面是寫好的單個波浪，其中d屬性繪製了形狀，fill屬性表示填充的顏色。d屬性...
SVG濾鏡波浪動畫效果
挫折之花，綻放於與命運的抗衡。司馬遷因秉筆直書，不溢美，不隱惡 而遭受腐刑，然而他在獄中卻堅強的與命運作鬥爭，面對挫折，他選擇了勇敢 面對挫折，他選擇了發憤 面對挫折，他選擇了秉筆直書。終於，他 著成信史照塵寰 留下了千古美名！讓挫折之花綻放了兩千年！挫折之花，綻放於與命運的抗衡。司馬遷因秉筆直書，...
乙個靈活的，可配置的波浪動畫外掛程式
效果展示 github 春節放假前的第二天上午，看到設計稿上的圖 如下 於是發生了下面的對話 我 把這個圖傳一下吧。ui 好的，你是要 gif 吧。我 啥？這個是個動畫？ui 啥？這不是動畫？我 打擾了。於是在剩下的一天裡，我擼出了這個波浪動畫 想想需求 首先我們能想到的是，波浪的數量一定是可定製的...