svg波浪動畫

LeoHsiun 發(fā)布于2019-08-21 11:52 / 1640人閱讀

摘要：分析由上圖可以看出，波浪動畫是由多個不同的波浪組成，而每個波浪則是由近似正弦圖形組成，最后的波動效果，其實是靜態(tài)的波浪循環(huán)向左運動產生的。

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

分析

由上圖可以看出，波浪動畫是由多個不同的‘波浪’組成，而每個波浪則是由近似正弦圖形組成，最后的‘波動’效果，其實是靜態(tài)的波浪循環(huán)向左運動產生的。

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

path：定義形狀的基礎元素，其中d屬性就是圖形的路徑。靜態(tài)的波浪就是這個元素繪制的，后面會再多帶帶介紹

animateTransform：定義目標元素的變形屬性，波浪的循環(huán)移動就是使用這個屬性實現(xiàn)的

g：組合對象的容器

繪制單個靜態(tài)波浪

上面是寫好的單個波浪，其中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：重復次數(shù)，indefinite為無限循環(huán)

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

多個波浪合成

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

抽象成組件

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

云服務器 GPU云服務器 svg動畫波浪線大波浪 html5波浪滾動

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87219.html

svg波浪動畫

摘要：分析由上圖可以看出，波浪動畫是由多個不同的波浪組成，而每個波浪則是由近似正弦圖形組成，最后的波動效果，其實是靜態(tài)的波浪循環(huán)向左運動產生的。之前做過CSS動畫、canvas動畫，但svg動畫第一次做，最終效果如下圖所示。showImg(https://segmentfault.com/img/bVSKfU?w=428&h=198); 分析由上圖可以看出，波浪動畫是由多個不同的‘波浪’...

voyagelab 2019-08-02 15:57 評論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實現(xiàn)圓形進度條前端掘金在開發(fā)微信小程序的時候，遇到圓形進度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業(yè)加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

張金寶 2019-08-20 17:44 評論0 收藏0
案例 - 收藏集 - 掘金

摘要：同行這么做使用實現(xiàn)圓形進度條前端掘金在開發(fā)微信小程序的時候，遇到圓形進度條的需求。實現(xiàn)也談數(shù)組去重前端掘金的數(shù)組去重是一個老生常談的話題了。百度前端技術學院自定義前端掘金一標簽概念元素表示用戶界面中項目的標題。閑話圖片上傳 - 掘金作者：孫輝，美團金融前端團隊成員。15年畢業(yè)加入美團，相信技術，更相信技術只是大千世界里知識的一種，個人博客: https://sunyuhui.com ...

huangjinnan 2019-08-29 12:54 評論0 收藏0
學習小結 | Vue+TweenMax做一個溫度計

摘要：原作者效果內容是一個溫度顯示儀器，上方一個當前溫度顯示，下方還有一個溫度刻線。原教程使用了布局，給整個容器加上了的高度，讓在沒有內容的時候也能被沾滿。設置上部分占高度的，下部分為。溫度的數(shù)據(jù)要從的實例中獲取，然后進行一個輸出。前言所謂站在巨人的肩膀上學習，是因為這個例子是來自于一個來自于國外的每周插件的欄目的教程，所以我很嚴肅的說清楚這點！這篇文章是自己通過這個例子的學習后，的一些...

smartlion 2019-08-29 16:08 評論0 收藏0
Codepen 每周精選：展現(xiàn) WEB 魅力的 26 個頁面特效（2018-6-4）

摘要：按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以打開原始頁面。按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以打開原始頁面。 1. 一個正 20 面體的骰子https://codepen.io/chrisvfrit... 2. 純 css 寫的夜間景色的視差滾動效果https://codepen.io/danbhala/p... 3. 機器人喝油的動畫https://co...

AlexTuan 2019-08-29 15:35 評論0 收藏0