一个loading-更规范的svg动画

使用SVG的animate元素实现SVG动画

书接上文，SVG本身有规范的animate等动画元素实现动画。先从这里开始 animate-SVG | MDN

对于这个方案，我也有一个实践，如下图

其源码如下

<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <path fill="#00f" d="M512 512V412a100 100 0 110 200 100 100 0 110-200z">
    <animate attributeName="d" dur="3s" repeatCount="indefinite"
      values="M512 512 v-106 a106 106 0 0 1 0 212 a106 106 0 0 1 0 -212 z; M512 512 v-92 h-52 h106 a40 40 0 0 1 40 40 v106 a40 40 0 0 1 -40 40 h-106 a40 40 0 0 1 -40 -40 v-106 a40 40 0 0 1 40 -40 h106 z; M512 512 v-92 h-52 h106 a40 40 0 0 1 40 40 v106 a40 40 0 0 1 -40 40 h-106 a40 40 0 0 1 -40 -40 v-106 a40 40 0 0 1 40 -40 h106 z; M512 512 v-106 a183.6 183.6 0 0 1 91.8 159 a183.6 183.6 0 0 1 -183.6 0 a183.6 183.6 0 0 1 91.8 -159 z; M512 512 v-106 a183.6 183.6 0 0 1 91.8 159 a183.6 183.6 0 0 1 -183.6 0 a183.6 183.6 0 0 1 91.8 -159 z; M512 512 v-106 a106 106 0 0 1 0 212 a106 106 0 0 1 0 -212 z" />
    <animate attributeName="fill" dur="3s" repeatCount="indefinite" values="blue;green;green;orange;orange;blue" />
    <animateTransform attributeName="transform" begin="0s" attributeType="XML" type="rotate" from="0 512 512"
      to="360 512 512" dur="1s" repeatCount="indefinite" />
    <animateMotion begin=".2" path="M0 150 0 -300 0 -300 0 150z" dur="1s" repeatCount="indefinite" />
  </path>
  <path fill="#CBCAC3" d="M202 698h620a10 10 0 0110 10v3a10 10 0 01-10 10H202a10 10 0 01-10-10v-3a10 10 0 0110-10z"
    stroke="#e8e8e8" stroke-width="5">
    <animate attributeName="d"
      values="M202 698 h620 a10 10 0 0 1 10 10 v3 a10 10 0 0 1 -10 10 h-620 a10 10 0 0 1 -10 -10 v-3 a10 10 0 0 1 10 -10 z; M202 698 q310 112.83, 620 0 a10 10 0 0 1 6.84 18.79 q-316.84 112.83, -633.68 0 a10 10 0 0 1 6.84 -18.79 z; M202 698 q310 112.83, 620 0 a10 10 0 0 1 6.84 18.79 q-316.84 112.83, -633.68 0 a10 10 0 0 1 6.84 -18.79 z; M202 698 q310 -54.66, 620 0 a 10 10 0 0 1 -3.47 19.70 q-306.53 -54.66, -613.06 0 a 10 10 0 0 1 -3.47 -19.70 z; M202 698 h620 a10 10 0 0 1 10 10 v3 a10 10 0 0 1 -10 10 h-620 a10 10 0 0 1 -10 -10 v-3 a10 10 0 0 1 10 -10 z; M202 698 h620 a10 10 0 0 1 10 10 v3 a10 10 0 0 1 -10 10 h-620 a10 10 0 0 1 -10 -10 v-3 a10 10 0 0 1 10 -10 z"
      dur="1s" repeatCount="indefinite" />
  </path>
</svg>

简单解析以下

先交代几个公有属性

from：属性在动画起点的值，相当于css动画的from。
to：属性在动画终点的值，相当于css动画的to。
by：指定动画的偏移值，起始值需由from指定。
values：动画使用的值列表，使用分号分隔每一个值。一旦values被设置，则from、to、by都将失效。
dur：标识了动画的简单持续时间，其值应符合 Clock-value 或者是 indefinite。简单地，类似1s表示持续一秒。如不指定此值，则默认持续时间无限长，此时插值不能起作用。
repeatCount：标识动画发生的次数，指定 indefinite 表示不断重复。
calcMode：指定动画的插值计算方式。可选值 discrete | linear | paced | spline。
- discrete表示动画在内容的单个值之间跃动。比如内容是字符串时，则会在字符间跃动而不是平滑地补间。
- linear表示在values指定的值之间线性地平滑地插值，对字符串不起作用，会自动转为discrete（对于其他使用calcMode的非animateMotion元素来说，此值是默认值）。
- paced表示线性地平滑地插值。这仅支持可以定义线性数值范围的值，并且可以计算点之间的“距离”的一些属性（例如position、width、height等）。与linear不同的是，如果指定了paced，则keyTimes或keySplines都将被忽略。此值对于animateMotion元素来说是默认值。
- spline定义插值为三次贝塞斯曲线，计算values列表中两点之间的插值算法，曲线的样条点在keyTimes属性中定义，区间控制点在keySplines属性中定义。
keyPoints：指定动画的关键点（百分比），取值为[0-1]，值之间使用分号分隔。对应keyTimes中的每一个值，表示在该点时动画已持续的时间。
keyTimes：表示用于控制动画节奏的时间值列表，取值为[0-1]，值之间使用分号分隔。每个时间对应values中的一个值。

animate

attributeName：标识需要需要变化的属性名，如d，fill等。
attributeType：标识attributeName所属的命名空间，可选值 CSS | XML | auto。
- CSS说明attributeName的属性是一个CSS属性。
- 同理XML说明attributeName是一个XML属性名。

animateTransform

指定目标元素上的一个变形属性。，允许动画控制转换、缩放、旋转和斜切。

type：决定那些随时间变化的值的转换的类型，可选值为 translate | scale | rotate | skewX | skewY

animateMotion

定义了一个元素如何沿着运动路径进行移动。

path：路径信息的数组。值同SVG中path元素的d属性。
rotate：标识执行路径动画的元素如何旋转。可选值 auto | auto-reverse | <number>。
- auto表示元素会在移动的同时自动旋转以使自身相对与前进方向的角度不变。
- auto-reverse则与auto行为相似，只是元素始终与auto时的角度相差180°。
- 如果是一个数字，则元素始终保持一个固定的角度移动。默认为0。