SVG动画：animate的使用方法

七娃博客 2020-09-26 944人阅读

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,可以是一个正常次数，也可以是无限循环

效果：

SVG动画：animate的使用方法-QUI-Notes

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...

效果：

SVG动画：animate的使用方法-QUI-Notes

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>

属性讲解: