1.animate 动画,放到闭合的曲线内,定义某个属性按时间发生变化
例如:
<circle cx="200" cy="200" r="50" stroke="#333" fill="red" opacity="0.2" >
<animate attributeType="CSS" attributeName="r" from="50" to="0" dur="5s" repeatCount="indefinite"/>
</circle>
属性讲解:
- attributeName 要变化的元素属性名称
- a. 可以是元素直接暴露的属性,例如,元素上的x, y,r或者font-size;
- b. 可以是CSS属性。例如,透明度opacity
- attributeType = "CSS | XML | auto" ,即将变化的属性是哪一类
- from 动画值起始值
- to 动画值结束值
- by 动画值相对结束值
- values 多个变化值
- begin 动画开始时间,单个值 beigin="3s":3秒后开始; 多个值:beigin="3s,6s,8s":3秒开始一次,6s开始一次...动画没有执行完也会重头重新执行
- end 动画结束时间,值于begin一样,可以参考begin
- dur 动画时间长度
- repeatCount 动画执行次数:6|indefinite,可以是一个正常次数,也可以是无限循环
效果:
2.animateTransform transform 2D/3D变换动画效果
例如:
<circle cx="300" cy="300" r="20" stroke="#333" fill="red" opacity="0.2" >
<animatetransform attributeType="XML" attributeName="transform" begin="0s" dur="5s" type="rotate" from="20 60 60" to="360 100 60" repeatCount="indefinite" />
</circle>
属性讲解:
- attributeName="transform",绑定动画类型为2D/3D类型
- type 绑定transform的变换类型,例如:rotate/scale/translate...
效果:
3.animateMotion 路径动画,沿着某个路径变化
例如:
<circle cx="300" cy="300" r="20" stroke="#333" fill="red" opacity="0.2" >
动画一:
<animatemotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" rotate="auto" />
动画一:
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</circle>
属性讲解:
- mpath辅助元素 通过它,<animateMotion>等元素可以引用一个外部的定义的<path>
效果:
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:
SVG动画:animate的使用方法 -
Qui-Note