前端开发中的SVG动画

php中世界最好的语言

发布时间：2018-03-13 16:29:03

3100人浏览过

来源于php中文网

原创

这次给大家带来前端开发中的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变化之上。

animateMotion

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

NT80 购物系统

功能说明：1 会员可申请开店功能2 购买在线扣除金额3 冲值卡自动生成4 支持2级分类5 数据库压缩和备份6 会员分5个级别7 商品带讨论8 自带融合论坛，可关闭打开9 密码找回功能10 新闻``滚动新闻``帮助中心11 后台设置前台会员的上传权限12 可关闭/打开商店13 会员自助发布商品功能14 用户问题咨询管理

下载

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,');
}