svg-animate动画

1. 属性

• attributeName： 定义发生变化的属性名
• attributeType： 当 attributeType=”XML” 时，attributeName 被认为是 XML 的属性；当 attributeType=”CSS” 时，attributeName 被认为是 css 的属性；不指定 attributeType 时，默认为 “auto”, 会将 attributeName 作为 css 的属性，如果无效，再将 attributeName 作为 XML 的属性
• from、to、by：from 和 to 分别定义发生变化的属性的初始值和终止值。from 可缺省，表示初始值即为 animate 父元素相应的属性值。可用 by 替换 to，表示变化偏移量，可以理解为 to = from + by
• begin dur end：begin 定义动画开始时间，dur 定义动画所需时间，end 定义动画终止时间。时间单位 h：小时；min：分钟；s：秒；ms：毫秒。默认时间单位为 s。
• fill：当 fill=”freeze” 时，动画终止时，发生变化的元素属性值停留在动画终止时的状态；当 fill=”remove” 时，动画终止时，发生变化的元素属性值回复到动画终起始时的状态。默认属性值为 remove。
• repeatCount： indefinite 无限循环

2. animateTransform

• 实现 transform 属性改变的动画，animateTransform 来代替 animate 元素
• type 属性指定需要改变的属性，如 translate scale rotate skewX skewY 等

<svg viewBox='0 0 200 200' width='600'>
  <rect x='10' y='10' width='20' height='20' fill='red' >
    <animate
      attributeName='width'
      from='20'
      to='300'
      dur='3s'
      fill='freeze'
    />
    <animate
      attributeName='height'
      from='20'
      to='200'
      dur='3s'
      fill='freeze'
    />
    <animate
      attributeName='fill'
      attributeType='XML'
      values='red; yellow; orange'
      dur='3s'
      fill='freeze'
    />
    <animateTransform
      attributeName='transform'
      type='scale'
      attributeType='XML'
      from='1'
      to='0.2'
      dur='3s'
      fill='freeze'
    />
  </rect>
</svg>

<div>
  <div onclick="this.click()">click</div>
  <svg viewBox='-50 -50 100 100' width='100' click="this.clickSvg()">
  <circle cx='10' cy='0' r='6' fill='red' >
    <animate
      attributeName='opacity'
      values='0.8;0.8;0.6;0.4;0.6;0.8;0.8'
      dur='1.2s'
      repeatCount='indefinite'
    />
  </circle>
  <circle cx='-10' cy='0' r='6' fill='red' >
    <animate
      attributeName='opacity'
      values='0.8;0.8;0.8;0.4;0.8;0.8;0.8'
      dur='1.2s'
      begin='0.5'
      repeatCount='indefinite'
    />
  </circle>
  <circle cx='0' cy='10' r='6' fill='red' >
    <animate
      attributeName='opacity'
      values='0.8;0.8;0.6;0.4;0.6;0.8;0.8'
      dur='1.2s'
      begin='0.25'
      repeatCount='indefinite'
    />
  </circle>
  <circle cx='0' cy='-10' r='6' fill='red' >
    <animate
      attributeName='opacity'
      values='0.8;0.8;0.6;0.4;0.6;0.8;0.8'
      dur='1.2s'
      begin='0.75'
      repeatCount='indefinite'
    />
  </circle>
</svg>
</div>

3. animateMotion

• animateMotion 可以让父元素沿着指定的路径运动
• 路径使用和 <path> 相同的方式进行定义
• rotate 可以设置是否根据路径的正切角度来旋转

<svg viewBox='0 0 400 400' width='600' >
    <circle cx="0" cy="50" r="15" fill="red" >
        <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
    </circle>
</svg>

<svg viewBox='-150 -150 800 800' width='600' >
    <circle cx="0" cy="50" r="15" fill="red" >
        <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
    </circle>
    <rect x='0' y='80' height='20' width='20' rx='3' fill="red" >
        <animateMotion path="M40 40, L160 80, L20 100, Z" dur="3s" repeatCount="indefinite" />
    </rect>
    <rect x='0' y='140' height='20' width='20' rx='3' fill="red" >
        <animateMotion path="M50 50, A50 50 0 0 0 150 150, A50 50 0 1 0 50 50" dur="3s" repeatCount="indefinite" rotate="auto" />
    </rect>
</svg>