SVG动画效果
先来放一个自己写的效果:
OK,现在我们来聊一聊SVG描边动画的实现
一、基础知识
1、stroke相关属性
- stroke:表示描边的颜色。
- stroke-width :表示描边的粗细。
- stroke-linecap :表示描边端点表现方式。可用值有:butt, round, square, inherit.
- stroke-linejoin 表示描边转角的表现方式。可用值有:miter, round, bevel, inherit.
- stroke-miterlimit :表示描边相交(锐角)的表现方式。默认大小是4.
- stroke-dasharray :表示虚线描边。可选值为:none,
<dasharray>
, inherit. none表示不是虚线;<dasharray>
为一个逗号或空格分隔的数值列表。表示各个虚线段的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。 - stroke-dashoffset :表示虚线的起始偏移。可选值为:
<percentage>
,<length>
, inherit. 百分比值,长度值,继承。 - stroke-opacity 表示描边透明度。默认是1。
2、css动画
语法
animation: name duration timing-function delay iteration-count direction;
- animation-name:规定需要绑定到选择器的 keyframe 名称。
- animation-duration:规定完成动画所花费的时间,以秒或毫秒计。
- animation-timing-function:规定动画的速度曲线。
- animation-delay:规定在动画开始之前的延迟。
- animation-iteration-count:规定动画应该播放的次数。
- animation-direction:规定是否应该轮流反向播放动画。
二、实战
HTML代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="454px"
height="340px" viewBox="0 0 454 340" enable-background="new 0 0 454 340" xml:space="preserve">
// 设置文字渐变颜色
<linearGradient id="linearGradient_1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/>
<stop offset="50%" style="stop-color:rgb(255,0,255); stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(0,255,0); stop-opacity:1"/>
</linearGradient>
<g id="SVG">
<g fill="none" stroke="url(#linearGradient_1)" stroke-width="2">
<path d="..." />
<path d="..."/>
<path d="..."/>
</g>
</g>
</svg>
css代码主要是实现动画,让它动起来,具体如下:
path {
/*stroke:#000;*/
stroke-dasharray: 25;
stroke-dashoffset: 300;
animation: dash 5s linear infinite;
}
@keyframes dash {
0% {stroke-dashoffset: 300; }
100% {stroke-dashoffset: 0;}
}