Svg - Animate&AnimateTransform - 《代码知识结构》

01 Animate
02 AnimateTransform
03 animate morph
04 animateMotion
05 SET
06 img
07 svg变换的规则

animate: 相当于 CSS 中的 transition
animateTransform: 相当于 CSS 中的 transform

01 Animate

<rect x="10" y="10" width="200" height="20" stroke="black" fill="none">
  <animate
    attributeName="width"   // 指定某一个属性将会做如下的动画
    attributeType="XML"   // svg的格式
    from="200" to="20"   // 变化的规则
    begin="0s" dur="5s"  // 时间的规则
    fill="freeze" />  // 填充的格式
</rect>

通过将animate 标签嵌套在指定的图形里面，即可实现变换的效果。另外，还有animateTransform，它主要是用来做变形动画的。

02 AnimateTransform

<rect x="-10" y="-10" width="20" height="20"
    style="fill: #ff9; stroke: black;">
    <animateTransform attributeType="XML"
      attributeName="transform" type="scale"  
      from="1" to="4 2"
      begin="0s" dur="4s" fill="freeze"/>
</rect>

基本图形元素, , , , , , , , , ,

元素	元素	说法
动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。		attributeName
path元素是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建。

use元素在SVG文档内取得目标节点，并在别的地方复制它们。它的效果等同于这些节点被深克隆到一个不可见的DOM中，然后将其粘贴到use元素的位置，很像HTML5中的克隆模板元素。因为克隆的节点是不可见的，所以当使用CSS样式化一个use元素以及它的隐藏的后代元素的时候，必须小心注意。隐藏的、克隆的DOM不能保证继承CSS属性，除非你明文设置使用CSS继承。	black

贝塞尔曲线

03 animate morph

元素	用法	说法
attributeName	用于确定动画的改变的原svg对应的某一个值
dur	一个周期内动画所花费的时间
repeatCount	重复类型	indefinite ｜
keyTimes	可以理解为ae中的关键帧
calcMode	用来定义动画具体的插值模型。类似于ae中可以定义渐进渐出的效果	discrete \| linear[default] \| paced \| spline
keySplines	如果calcmode设置为spline的时候需要设置对应贝塞尔曲线的格式需要在每一个keytime的时候会需要一个贝塞尔曲线的插值	使用格式是通过 ; 来分隔每一个值 keySplines = “.31,.57,.93,.46;”
value	直接结合 attributeName 属性，来设置具体的值，每个值之间使用 ; 进行分隔。

<path fill="#1EB287"> 
  <animate 
    attributeName="d" 
    dur="1440ms"
    repeatCount="indefinite" 
    keyTimes="0; .0625; .208333333; .3125; .395833333; .645833333; .833333333; 1" 
    calcMode="spline" 
    keySplines="0,0,1,1; .42,0,.58,1; .42,0,1,1; 0,0,.58,1; .42,0,.58,1; .42,0,.58,1; .42,0,.58,1" 
    values="M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,100 50,100 50,100 0,100 0,50 0,50 0,0 Z; 
        M 0,0 C 50,0 50,0 100,0 100,50 100,50 100,100 50,100 50,100 0,100 0,50 0,50 0,0 Z; 
        M 50,0 C 75,25 75,25 100,50 75,75 75,75 50,100 25,75 25,75 0,50 25,25 25,25 50,0 Z; 
        M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z; 
        M 25,50 C 37.5,25 37.5,25 50,0 75,50 75,50 100,100 50,100 50,100 0,100 12.5,75 12.5,75 25,50 Z;
        M 50,0 C 77.6,0 100,22.4 100,50 100,77.6 77.6,100 50,100 22.4,100, 0,77.6, 0,50 0,22.4, 22.4,0, 50,0 Z; 
        M 50,0 C 77.6,0 100,22.4 100,50 100,77.6 77.6,100 50,100 22.4,100, 0,77.6, 0,50 0,22.4, 22.4,0, 50,0 Z;
        M 100,0 C 100,50 100,50 100,100 50,100 50,100 0,100 0,50 0,50 0,0 50,0 50,0 100,0 Z; "/> 
</path>

04 animateMotion

<g>
  <rect x="0" y="0" width="30" height="30" style="fill: #ccc;"/>
  <circle cx="30" cy="30" r="15" style="fill: #cfc; stroke: green;"/>
  <animateMotion from="0,0" to="60,30" dur="4s" fill="freeze"/>
</g>
<rect x="0" y="0" width="30" height="30" style="fill: #ccc;">
    <animateMotion
    path="M50,125 C 100,25 150,225, 200, 125"
    dur="6s" fill="freeze"/>
</rect>
//或者引用外部的路径进行运动
  <path d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"
      stroke="lightgrey" stroke-width="2" 
      fill="none" id="theMotionPath"/>
  <circle cx="10" cy="110" r="3" fill="lightgrey"  />
  <circle cx="110" cy="10" r="3" fill="lightgrey"  />
  <!-- Red circle which will be moved along the motion path. -->
  <circle cx="" cy="" r="5" fill="red">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
      <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
  </circle>

路径的作用范围。mpath>path>values>from/to

元素	属性	值
from，to	指定两点的位置，位置参数是以元素的坐标为原点的。	对应改变的图形的属性的值
fill	指定动画结束后停留的装填。remove 表示回到动画开始的位置，freeze 表示停留在动画结束的位置	remove｜freeze
rotate	auto：让物体垂直于路径的切线方向运动。不过，如果你的路径是闭合曲线的话，需要注意起始点的位置。	auto-reverse：让物体垂直于路径的切线方向并 + 180°。也就是和 auto 运动关于切线对称。Number：让物体以固定的旋转角度运动。这个就相当于使用 transform:rotate(deg) 进行控制。在动画设置标签中，还有一个更简单的–set。

05 SET

该标签也是用来模拟 transition 效果的。它和 animate 的主要区别是，它仅仅需要 to 的指定属性，而不需要其他的参考属性，比如 from，by 等。那它有啥特别的存在意义吗？
有的，因为 set 针对于所有属性，甚至包括 style 里面的相关 CSS 属性。所以，可以靠它来很好描述一些非 number 的属性值。

<text text-anchor="middle" x="60" y="60" style="visibility: hidden;"> <set attributeName="visibility" attributeType="CSS" to="visible" begin="4.5s" dur="1s" fill="freeze"/> All gone! </text>

06 img

SVG文档中的SVG元素包含图像信息。它表现为图像文件或者其他SVG文件。
SVG图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确。
SVG文件是这样的一种图像：不被当做外部资源加载，不可以用:visited 样式，不能有交互。使用动态SVG元素，可以用引入外部的URL。使用SVG文件并添加scripts在里面，可以用