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

一、动画

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

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

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

   <svg width="500" height="500">
    <circle id="myCircle" cx="100" cy="100" r="50" fill="#7fd"></circle>
    <animate
        attributeName="r"
        from="50"
        to="100"
        dur="5s"
        xlink:href="#myCircle"
    ></animate>
</svg>

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

   <svg width="500" height="500">
      <circle cx="100" cy="300" r="50" fill="#7fd">
       	 <animate attributeName="r" from="50" to="100" dur="5s" fill="freeze"></animate>
  	  </circle>
	</svg>

二、动画常用属性

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

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                attributeName="r"
                from="50" to="100"
                dur="2s"
                fill="freeze"
                repeatCount="2"
                repeatDur="6s"
                begin="click+2s"
                calcMode="linear"
                keyTimes="0;0.5;1"
                values="10;50;20"
        ></animate>
    </circle>
</svg>

三、常用动画

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

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                attributeName="r"
                from="50"
                to="100"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
        <animate
                attributeName="fill"
                from="#afe"
                to="#f3c"
                dur="2s"
                fill="freeze"
                begin="click+1s"
        ></animate>
    </circle>
</svg>

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

<svg width="500" height="500">
    <circle cx="100" cy="100" r="50" fill="#7fd">
        <animate
                id="toRight"
                attributeName="cx"
                from="100"
                to="300"
                dur="2s"
                begin="0;toLeft.end"
                fill="freeze"
        ></animate>
        <animate
                id="toLeft"
                attributeName="cx"
                from="300"
                to="100"
                dur="2s"
                begin="toRight.end + 1s"
                fill="freeze"
        ></animate>
    </circle>

</svg>

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

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

<svg width="500" height="500">
    <rect x="100" y="100" width="300" height="200" fill="#a4d">
        <animateTransform
            attributeName="transform"
            type="translate"
            from="0 0"
            to="100 0"
            dur="2s"
            begin="1s"
            fill="freeze"
        ></animateTransform>
    </rect>
</svg>

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

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
       <animateTransform
               attributeName="transform"
               type="rotate"
               from="0"
               to="45"
               dur="2s"
               begin="1s"
               fill="freeze"
       ></animateTransform>
   </rect>
</svg>

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

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
   		<animateTransform
               attributeName="transform"
               type="rotate"
               from="0 100 100"
               to="45 100 100"
               dur="2s"
               begin="1s"
               fill="freeze"
      		 ></animateTransform>
   </rect>
</svg>

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

<svg width="500" height="500">
   <rect x="100" y="100" width="300" height="200" fill="#a4d">
   	 <animateTransform
               attributeName="transform"
               type="scale"
               from="1 1"
               to="0.5 1"
               dur="2s"
               begin="1s"
               fill="freeze"
       ></animateTransform>
   </rect>
</svg>

路径动画

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

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

<svg width="500" height="500">
    <path d="M 100 100 C 100 300 300 300 300 100" stroke="#4a6" stroke-width="2" fill="none"></path>
    <rect x="100" y="100" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
                path="M 100 100 C 100 300 300 300 300 100"
                dur="5s"
                begin="1s"
                fill="freeze"
        ></animateMotion>
    </rect>
    </rect>
</svg>

本例：正确执行

<svg width="500" height="500" viewBox="-100 -100 500 500">
    <path d="M 0 0 C 0 300 300 300 300 0" stroke="#4a6" stroke-width="2" fill="none"></path>
    <rect x="0" y="0" width="40" height="40" fill="rgba(255,0,0,0.5)">
        <animateMotion
                path="M 0 0 C 0 300 300 300 300 0"
                dur="5s"
                begin="1s"
                fill="freeze"
                rotate="auto"
        ></animateMotion>
    </rect>
</svg>