關于html動畫馋嗜，一般來說我們有這么幾種實現方式：
1，用css的transform結合transition來實現位移业踢、旋轉盅蝗、縮放等；
2，用css的animation，通過@keyframe來實現更個性化的分幀動畫；
3旷赖，用js操作dom來實現更加復雜的或特殊的動畫；
4更卒，用canvas標簽然后通過js來繪制動畫等孵，功能強大但操作可能會很復雜；
今天蹂空，我想介紹另一種動畫實現方式俯萌，svg。通過svg上枕，我們可以以非常簡單的方式實現復雜的動畫咐熙。下面是一個簡單的示例：
1，內聯路徑
如上所示辨萍，我們在svg標簽中棋恼，添加了一個circle標簽，在頁面繪制了一個半徑為41的圓锈玉，在circle標簽中嵌套了一個<animateMotion>標簽爪飘，animateMotion標簽包含兩個屬性path 和 dur。下面我分別來解釋一下這些標簽和屬性的作用：
. ?animateMotion標簽：這就是svg動畫的必要因素拉背，它通過定義一組路徑及動作時間等屬性來實現元素的動畫悦施；
.? path屬性：在animateMotion標簽的path屬性規(guī)定了動畫的動作路徑；上例通過path規(guī)定了一條直線路徑去团；
.? dur屬性：在animateMotion標簽的dur屬性規(guī)定了動畫的動作時間； ?上例規(guī)定了動畫執(zhí)行時間為5秒；
2土陪，指向特定外部對象路徑
如此昼汗，我們便讓circle在頁面動了起來，我們會看到頁面刷新后哦一個圓圈在頁面向左移動一定距離后鬼雀，回到了原來的位置顷窒；
但有時候我們有這樣的需求，我們希望元素的動畫路徑是可見的源哩，比如元素沿著一個可見的不規(guī)則線條運動鞋吉；
我們可以看到，我們新增了一個path標簽励烦，此時的path標簽繪制了一個不規(guī)則圖形谓着；而animateMotion標簽中的path屬性移除了，多了一個<mpath>子標簽坛掠。這里mpath標簽將circle的animate路徑通過xlink:href屬性指向了id＝“path”的path標簽赊锚，也就規(guī)定了circle的運動路徑是path標簽繪制的路徑；由此屉栓，我們便實現了小球沿著不規(guī)則路線運動了舷蒲！是不是很簡單？
如果你夠細心友多，會發(fā)現animateMotion標簽中新增了一個屬性-->repeatCount牲平；我們前面說過，動畫結束后域滥，運動的元素會停止運動并回到最初的位置纵柿。聰明的你肯定會想到我們新增的這個屬性repeatCount便是讓元素的動畫一直循環(huán)的吧！（animateMotion還有其他一些屬性也很有用處骗绕，我就不一一列舉了）
想想如果用js去現實這樣一個動畫藐窄，還是很復雜的，需要通過坐標計算得出運動軌跡點然后循環(huán)去改變紅色球的位置酬土；但是svg幾行html代碼就搞定了荆忍，有沒有很方便？
附上我自己的一個案例網址：圓圈在頁面不規(guī)則漂浮動畫撤缴。頁面底部的圓圈不規(guī)則漂浮動畫便是利用svg的路徑動畫實現的刹枉，相對于js去實現這類型動畫，在表現上會平滑柔和許多屈呕，真正實現了不規(guī)則的漂浮微宝，而且代碼也簡單的多！
3虎眨，如何得到復雜的path路徑
聰明如你我蟋软，在最初看到path路徑的參數時镶摘，肯定都是一臉懵逼的，心中默念著‘這他媽是什么鬼……’岳守；今天我也不打算跟大家去講解path路徑到底怎么寫凄敢，怎么理解，因為我至今還是不明白（笑cry）湿痢。大家感興趣可以自行去找資料學習這些高等函數……
那么涝缝，我們如何才能得到我們想要的路徑呢？很簡單譬重。
1拒逮，通過可以導出svg圖的繪圖工具制作路徑圖并導出，例如AI臀规，sketch等等……然后將導出的svg通過瀏覽器打開滩援，打開控制臺便可以找到圖形的path信息，復制便好以现；
2狠怨，推薦一個在線生成svg圖形的利器：在線生成svg圖形。使用非常簡單邑遏，各種圖形模版也有佣赖，也可以手動繪制；然后導出為svg就好记盒，使用方法同上憎蛤；
