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/)