水域圖

最近項目涉及到一個簡單的在矢量地圖上附加水域流向小動畫，這對于很多人前端研發(fā)人員來說并不難的，可是目前就沒有條件沒人會。我也只好去百度上挖呀挖就挖出了3個小工具。雖然他們目前功能還很簡單，但是對于不會的人來說還是算能用。

（一）Inline SVG Drawing Animation（點擊這里訪問）

https://maxwellito.github.io/vivus-instant/

這個工具只有一個很簡單的功能，就是路徑描邊動畫。輸出也是SVG格式文件菜包的最愛。

操作非常簡單從瀏覽器選中一個SVG文件拖入瀏覽器即可，動畫都是自動執(zhí)行的。

默認模式

1、頂部選項卡基本忽略切換也沒有任何實際意義；

2、Animation type：動畫類型（有3種類型，感覺差異很小或許是與我發(fā)的圖有關(guān)用默認就好）

3、Delayin ms：動畫開始的時間（默認是0立即開始，需要延遲開始就設(shè)置需要的秒數(shù)）

4、Durationin ms：動畫完成時長（就是從開始到結(jié)束的時間跨度單位毫秒）

5、Path timing function：路徑運行方式（感覺沒啥區(qū)別）

6、Loop：循環(huán)（默認是關(guān)閉的，打才有循環(huán)功能）

循環(huán)參數(shù)

7、Start delayin ms：重新開始間隔時間（單位毫秒）

8、End pausein ms：結(jié)束停止時間（根據(jù)需要設(shè)置）

9、Fade durationin ms：動畫消失重新開始所需要的時間（根據(jù)需要設(shè)置）

最后下載下來就好了

（二）svgartista（點擊這里訪問）

https://svgartista.net/

這個工具動畫功能更多一點，但是又沒有循環(huán)控制，定制完動畫效果后只會播放一遍，可能動手能力強的妖孽更喜歡這個工具，他輸出的事代碼，可以繼續(xù)編輯的，研究一下css3動畫屬性就可以控制動畫的循環(huán)播放了。

添加SVG文件

首先把需要添加動畫的svg從左上角按鈕傳入工具。

設(shè)置動畫屬性

Elements class：定義CSS動畫類名稱

Background color：場景背景顏色設(shè)置（方便查看動畫效果）

Animation type：動畫類型（不用理解2種都可以用默認的就好）

動畫設(shè)置面板

他可以分別給描邊與填充元素做不同的動畫，屬性也就差不多。

描邊元素

Animation duration：動畫時長

Stagger step：每一個動畫元素間隔時長

Animation delay：下一個動畫元素開始時間

Animation easing：動畫執(zhí)行的順序（正向或反向）

填充元素

前三個都相同

Animation easing：動畫的類型有好多種可以都試試看哪種最合適選哪種。

動畫輸出按鈕

DRAW（忽略）

PLAY（執(zhí)行動畫）

</>GET CODE（輸出動畫代碼）

輸出代碼

SVG CODE （copy到body部分需要顯示的位置）

TRANSITION CODE（copy到CSS配置文件中）

額外的屬性就需要自行去代碼里修改了。

（三）Progress bar.js（點擊這里訪問）

http://kimmobrunfeldt.github.io/progressbar.js/

這是是帶JS控制的功能更強大一些（菜包完全不會用了）但是也可以仰望一下高端玩家

同樣是SVG描邊動畫功能的工具官網(wǎng)上，使用說明，使用案例一應(yīng)俱全動手能力強的妖孽可自行研究使用。

github里邊有整套源碼可以下載到本地慢慢研究。