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>

属性讲解:

  1. attributeName 要变化的元素属性名称
  2.     a. 可以是元素直接暴露的属性,例如,元素上的x, y,r或者font-size; 
  3.     b. 可以是CSS属性。例如,透明度opacity 
  4. attributeType = "CSS | XML | auto" ,即将变化的属性是哪一类
  5. from 动画值起始值
  6. to 动画值结束值
  7. by 动画值相对结束值
  8. values 多个变化值
  9. begin 动画开始时间,单个值 beigin="3s":3秒后开始; 多个值:beigin="3s,6s,8s":3秒开始一次,6s开始一次...动画没有执行完也会重头重新执行
  10. end 动画结束时间,值于begin一样,可以参考begin
  11. dur 动画时间长度
  12. 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>

属性讲解:

  1. attributeName="transform",绑定动画类型为2D/3D类型
  2. 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>

属性讲解:

  1. mpath辅助元素 通过它,<animateMotion>等元素可以引用一个外部的定义的<path>

效果: