svg动画

在前端开发中经常需要一些过渡动画，可以借助SVG作为背景动画实现。

原文链接

animate

svg中animate元素可以用于实现动画效果

• 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”时，动画终止时，发生变化的元素属性值回复到动画起始时的状态。fill属性默认值为：remove。

  ---

  
  

animateTransform

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

animateTransform还有个additive属性。默认情况下additive属性值为replace，表示当前animateTransform的初始状态与之前的animateTransform变化结果无关，如果additive=”sum”，表示当前animateTransform的变化基于之前的animateTransform变化之上。

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

animateMotion

animateMotion可以实现单凭css动画属性无法实现的效果。
animateMotion可以让父元素沿着指定的路径运动，如：

<g>
    <rect x="0" y="0" width="50" height="30" style="fill: #ccc;"/>
    <circle cx="40" cy="30" r="10" style="fill: #fff; stroke: black;"/>
    <circle cx="10" cy="30" r="10" style="fill: #fff; stroke: black;"/>
    <animateMotion path="M50,125 C 100,25 150,225, 200, 125" dur="4s" fill="freeze"/>
</g>

animateMotion有个rotate属性，默认为0，元素在运动时不会旋转。当设置为auto时，元素对应的水平轴会始终与path路径保持水平。

loading效果

利用background-image属性显示svg动画作为loading状态，注意url后需要添加数据说明：data:image/svg+xml,

公共css

.loading {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
}

html

<div class="loading loading-audio"></div>
<div class="loading loading-ball-triangle"></div>
<div class="loading loading-bars"></div>
<div class="loading loading-circles"></div>
<div class="loading loading-grid"></div>
<div class="loading loading-oval"></div>
<div class="loading loading-puff"></div>
<div class="loading loading-spinning-circles"></div>
<div class="loading loading-tail-spin"></div>
<div class="loading loading-three-dots"></div>

css

.loading-audio {
    background-image: url('data:image/svg+xml,<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#9fe8e0"><g transform="matrix(1 0 0 -1 0 80)"><rect width="10" height="20" rx="3"><animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite" /></rect><rect x="15" width="10" height="80" rx="3"><animate attributeName=