SVG动画

svg-animate

在前端开发中经常需要一些过渡动画，可以借助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变化之上。

animateMotion

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

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

css

.loading-audio {
    background-image: url('data:image/svg+xml,')
}

.loading-ball-triangle {
    background-image: url('data:image/svg+xml,');
}

.loading-bars {
    background-image: url('data:image/svg+xml,');
}

.loading-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-grid {
    background-image: url('data:image/svg+xml,');
}

.loading-oval {
    background-image: url('data:image/svg+xml,');
}

.loading-puff {
    background-image: url('data:image/svg+xml,');
}

.loading-spinning-circles {
    background-image: url('data:image/svg+xml,');
}

.loading-tail-spin {
    background-image: url('data:image/svg+xml,');
}

.loading-three-dots{
    background-image: url('data:image/svg+xml,');
} 

效果

image