SVG_11_动画专题之标签：animateTransform

写在前面：

动画是最直观的表达方式，比文字能够给人更大的冲击性。也是人们最容易查看、记忆最深刻，最过目不忘的友好表达方式，从本篇为第二篇文章，其他还有两篇讲述动画，共计三篇动画文档，满足动画你对动画渴求。

上一篇：SVG_10_动画专题之标签：animate

 

这个animateTransform标签，其实之前有一篇文章有讲过，但站的角度不同，想查阅的，点击跳转查看：SVG_8_CSS-animation_SVG-animateTransform标签_动画解析

 

这篇主要是展示效果，有的效果真的好看，不展示出来，无法想象到。

 

<animateTransform>元素可以执行变换属性的动画。这个新的元素是必要的，因为我们不能用一个简单的数值的属性就像x来制作这种动画。旋转属性就像：rotation(theta, x, y)，theta是一个角度，x和y是绝对坐标。

 

<animateTransform>比较重要的属性如下：

• attributeName="transform"   

这个属性的值不知道能不能 变为其他的，我试了下，没有成功；

 

• begin="0s" dur="5s" 

这是持续的时间，animate一个dur即可，这里的begin可有可无；

• type="rotate" 

这个type有五种类型：

分别是rotate（旋转）、scale（缩放）、translate（位移）、skewX（X轴方向偏移）、skewY（Y轴方向偏移）

• from="0 50 100" 

第一个参数代表开始角度，第二个参数代表X轴开始坐标，第三个参数代表Y轴开始坐标；

• to="90 150 100" 

第一个参数代表结束角度，第二个参数代表X轴结束坐标，第三个参数代表Y轴结束坐标；

• repeatCount="indefinite"

repeatCount代表执行次数，默认为一次；

indefinite表示无限次，用的最多；

运行效果被吃，看视频，或者去公众号看效果。

动画专题之标签animateTransform

可以做出很多喜人的效果，等你去发掘。

Xi说孔方兄出品LOGO