SVG基本使用（四、动画、动画常用属性、复合动画/往返动画/形变动画/路径动画、脚本编程

一、动画

• 1.SVG动画
  在SVG中提供了三种常用动画标记
  animate：基础动画
  animateTransform：形变动画
  animateMotion：路径动画

• 2.SVG动画属性
  attributeType: CSS/XML 规定的属性值的名称空间
  attributeName: 规定元素的哪个属性会产生动画效果
  from/to: 从哪到哪
  dur: 动画时长
  fill: 动画结束之后的状态 保持freeze结束状态/remove恢复初始状态（默认值）

• 3.SVG动画使用方式
  3.1、创建动画, 告诉动画标记哪个元素需要执行动画

3.2、创建元素, 在元素中说明需要执行什么动画

二、动画常用属性

SVG常用动画属性

• repeatCount：动画重复执行次数

• repeatDur：动画重复执行总时间

• begin：规定动画开始的时间/什么时间触发了再执行动画
  begin=“1s”：1s后开始执行动画
  begin=“click”：click触发事件执行了再执行动画
  begin=“click + 1s”：点击之后，等两秒再执行动画

• restart: 规定元素开始动画之后，是否可以被重新开始执行
  always：动画可以在任何时候被重置。这是默认值。
  whenNotActive：只有在动画没有被激活的时候才能被重置，例如在动画结束之后，才能再执行。
  never：在整个SVG执行的过程中，元素动画不能被重置。

• calcMode: 规定每一个动画片段的动画表现
  linear：默认属性值, 匀速动画
  discrete: 非连续动画, 没有动画效果瞬间完成
  paced: 规定整个动画效果始终以相同的速度进行，设置keyTimes属性无效
  spline: 配合keySplines属性来定义各个动画过渡效, 自定义动画

• keyTimes:
  划分动画时间片段, 取值0-1

• values:
  划分对应取值片段的值

  更多: www.w3.org/TR/SVG/animate.html

三、常用动画

复合动画：
一个元素的多个属性执行动画

往返动画：
沿直线来回走
开始时，添加begin=“0;toLeft.end”：0表示第一次直接执行，toLeft.end表示之后的每一次toLeft这个动画执行完毕后再执行。
返回时，添加begin=“toRight.end”：表示toRight这个动画执行完毕后再执行。

形变动画：
形变动画注意点：
1.attributeName属性的值永远是transform
2.type属性说明做什么形变（平移、缩放、旋转）

• 1.平移：from=“0 0” to=“100 0”，是坐标系x往右平移了100

• 旋转：from=“0” to=“45”，是整个坐标系旋转45度

• 旋转：from=“0 100 100” to=“45 100 100”，是以100 100为原点旋转45度

• 缩放 ：from=“1 1” to="0.5 1"宽度缩小一半

路径动画

• 路径动画：可以让某一元素沿着某一路径运动，使用animateMotion标签
• 注意点：
  path属性：指定元素按照哪一路径执行。path中的M起点是相对于矩形位置的。
  rotate=“auto”:是动画沿着路径自动旋转

本例：不按照path路径执行，因为path中的M起点是相对于矩形位置的

本例：正确执行