svg動畫 · 前端技術總結

## 一、旋轉動畫 * animateTransform 變形動畫 * 屬性名：attributeName="transform" * 開始時間、動畫時間：begin="0s" dur="2s" * 從哪到哪：from="startAngle x y" to="endAngle x y" * 重復次數：repeatCount="indefinite" ![](https://box.kancloud.cn/babab8091f3d0bb749fe3cb199a79377_216x196.gif) ~~~ <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei" font-size="60" y="160" x="160">回</text> <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/> </g> </svg> ~~~ ## 二、按路徑旋轉動畫 * animateMotion 運動動畫 * rotate="auto"是讓文本自動旋轉 ![](https://box.kancloud.cn/d24698ceddf3dbe4e0404af88d74c475_308x120.gif) ~~~ <svg width="360" height="200" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">馬 <animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" rotate="auto" repeatCount="indefinite"/> </text> <path d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none" /> </svg> ~~~ ## 三、事件動畫點擊圓點執行動畫 ![](https://box.kancloud.cn/3f7d21b1e1c243c26331db0415f56e4c_232x139.jpg) ~~~ <svg id="svg" width="320" height="200" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="100" cy="100" r="50"></circle> <text font-family="microsoft yahei" font-size="120" y="160" x="160">馬 <animate attributeName="x" to="60" begin="circle.click" dur="3s" /> </text> </svg> ~~~ ## 四、鏈接觸發動畫 ![](https://box.kancloud.cn/b0bce9413dc5e608508976f004baf8a4_176x190.jpg) ~~~ <svg width="320" height="200" font-family="microsoft yahei" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text font-size="120" y="160" x="160">馬 <animate id="animate" attributeName="x" to="60" begin="indefinite" dur="3s" repeatCount="indefinite" /> </text> <a xlink:href="#animate"> <text x="10" y="20" fill="#cd0000" font-size="30">點擊我</text> </a> </svg> ~~~ ## 五、動畫暫停與播放 * 暫停 pauseAnimations(); * 播放 unpauseAnimations(); ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫暫停與播放</title> <script src="jquery.min.js"></script> </head> <body> <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <g> <text font-family="microsoft yahei" font-size="60" y="160" x="160">回</text> <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/> </g> </svg> <script type="text/javascript"> $('svg')[0].pauseAnimations(); // $('svg')[0].unpauseAnimations(); </script> </body> </html> ~~~ 對于不想使用svg原生寫的，可以下載 [svg.js](http://svgjs.com/) svg.js已經封裝好了常用的圖形動畫 api界面看著也很清爽 ![](https://box.kancloud.cn/a79961476a230620b7492f55d41bf312_923x633.jpg) 來一個簡單的動畫示例 ![](https://box.kancloud.cn/7ed700d6d0449a7bcebd5c5b74a38cc8_256x164.gif) ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>動畫暫停與播放</title> <script src="svg.min.js"></script> </head> <body> <svg id="drawing"></svg> <script type="text/javascript"> var draw = SVG('drawing').size(300, 130); var rect = draw.rect(100, 100).fill('#f06').move(20, 20); rect.animate().move(200, 200).animate().dmove(50,50).size(300,400) </script> </body> </html> ~~~ 想嘗試的話去下載吧 [svg.min.js [for production]](http://svgjs.com/installation/) 參考鏈接：[超級強大的SVG SMIL animation動畫詳解](http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/)