通常我们说的 Web 动画,包含了三大类。

  • ​CSS3​​ 动画
  • ​javascript​​ 动画(canvas)
  • ​html​​ 动画(SVG)

个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论的是我认为 SVG 中在实际项目中非常有应用价值 SVG 线条动画。


举个栗子

SVG 线条动画,在一些特定的场合下可以解决使用 CSS 无法完成的动画。尤其是在进度条方面,看看最近项目里的一个小需求,一个这种形状的进度条:

【Web动画】SVG 线条动画入门_SVG线条动画

把里面的进度条单独拿出来,也就是需要实现这样一个效果:

【Web动画】SVG 线条动画入门_SVG_02

脑洞大开一下,使用 CSS3 如何实现这样一个进度条呢。

CSS3 是可以做到的,就是很麻烦。但是如果采用 SVG 的话,迎刃而解。

我们假定你在阅读本文的时候有了一定的 SVG 基础,上面代码看看就懂了,好了,本文到此结束。

【Web动画】SVG 线条动画入门_Web动画_03

好吧,还是一步一步解释,上面进度条的主要 SVG 代码如下:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>


SVG 为何

可缩放矢量图形,即SVG,是W3C XML的分枝语言之一,用于标记可缩放的矢量图形。

上面代码中,先谈谈 ​​svg​​ 标签:

  • ​version​​​: 表示​​<svg>​​ 的版本,目前只有 1.0,1.1 两种
  • ​xmlns​​​:​​http://www.w3.org/2000/svg​​ 固定值
  • ​xmlns:xlink​​​:​​http://www.w3.org/1999/xlink​​ 固定值
  • ​xml:space​​​:​​preserve​​​ 固定值,上述三个值固定,表示命名空间,当数据单独存在​​svg​​文件内时,这3个值不能省略
  • ​class​​:就是我们熟悉的 class
  • ​width​​​ |​​height​​​: 定义​​svg​​ 画布的大小
  • ​viewbox​​: 定义了画布上可以显示的区域,当 viewBox 的大小和 svg 不同时,viewBox 在屏幕上的显示会缩放至 svg 同等大小(暂时可以不用理解)

有了 ​​svg​​​ 标签,我们就可以愉快的在内部添加 ​​SVG​​​ 图形了,上面,我在 ​​svg​​​ 中定义了两个 ​​polyline​​ 标签。


SVG 基本形状

​polyline​​:是SVG的一个基本形状,用来创建一系列直线连接多个点。

其实,​​polyline​​​ 是一个比较不常用的形状,比较常用的是​​path​​​,​​rect​​​,​​circle​​​ 等。这里我使用​​polyline​​​ 的原因是需要使用 ​​stroke-linejoin​​​ 和 ​​stroke-linecap​​ 属性,在线段连接处创建圆滑过渡角。

SVG 中定义了一些​​基本形状​​,在继续下文之前,建议点进去先了解一些基本图形的标签及写法:

【Web动画】SVG 线条动画入门_SVG线条动画_04


SVG 线条动画

好,终于到本文的重点了。

【Web动画】SVG 线条动画入门_Web动画_05

上面,我们给两个 ​​polyline​​ 都设置了 class,SVG 图形的一个好处就是部分属性样式可以使用 CSS 的方式书写,更重要的是可以配合 CSS 动画一起使用。

上面,主要的 CSS 代码:

.g-rect-path{
fill: none;
stroke-width:10;
stroke:#d3dce6;
stroke-linejoin:round;
stroke-linecap:round;
}

.g-rect-fill{
fill: none;
stroke-width:10;
stroke:#ff7700;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dasharray: 0, 1370;
stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite;
}

@keyframes lineMove {
0%{
stroke-dasharray: 0, 1350;
}
100%{
stroke-dasharray: 1350, 1350;
}
}

这尼玛是什么 CSS?怎么除了 ​​animation​​​ 全都不认识? ​【Web动画】SVG 线条动画入门_SVG_06

莫慌,其实很多和 CSS 对比一下非常好理解,只是换了个名字:

  • ​fill​​​:类比 css 中的​​background-color​​​,给​​svg​​ 图形填充颜色;
  • ​stroke-width​​​:类比 css 中的​​border-width​​​,给​​svg​​ 图形设定边框宽度;
  • ​stroke​​​:类比 css 中的​​border-color​​​,给​​svg​​ 图形设定边框颜色;
  • ​stroke-linejoin​​​ |​​stroke-linecap​​​:上文稍微提到过,​​设定线段连接处的样式​​;
  • ​stroke-dasharray​​:值是一组数组,没数量上限,每个数字交替表示划线与间隔的宽度;
  • ​stroke-dashoffset​​:则是虚线的偏移量

重点讲讲能够实现线条动画的关键属性 ​​stroke-dasharray​​ 。

​属性 stroke-dasharray 可​​控制用来描边的点划线的图案范式。

它是一个​​<length>​​​和​​<percentage>​​数列,数与数之间用逗号或者空白隔开,指定短划线和缺口的长度。如果提供了奇数个值,则这个值的数列重复一次,从而变成偶数个值。因此,5,3,2等同于5,3,2,5,3,2

解释很苍白,直接看例子:


上面,填充进度条,使用了下面这个动画 :

@keyframes lineMove {
0%{
stroke-dasharray: 0, 1350;
}
100%{
stroke-dasharray: 1350, 1350;
}
}

​stroke-dasharray: 0, 1350;​​,表示线框短划线和缺口的长度分别为 0 和 1350,所以一开始整个图形都是被缺口占据,所以在视觉效果上长度为 0。

然后过渡到 ​​stroke-dasharray: 1350, 1350​​,表示线框短划线和缺口的长度分别为 1350 和 1350,因为整个图形的长度就是 1350,所以整个进度条会被慢慢填充满。

掌握了这个技巧后,就可以使用 ​​stroke-dasharray​​​ 和 ​​stroke-dashoffset​​ 制作很多不错的交互场景:


SVG 线条动画实现按钮交互

【Web动画】SVG 线条动画入门_Web动画_07


SVG 线条动画实现圆形进度条


多 SVG 图形线条动画配合

之前我司一个 h5 里面应用过的,多​​SVG​​ 图形线条动画配合,可以制作一些比较酷炫的动画,很有科技感。

【Web动画】SVG 线条动画入门_SVG动画_08



正文结束,我在我的 Github 上,使用 SVG 实现了一些图形 -- ​​SVG奇思妙想​​​,​​Demo可以戳这里​​。

下篇文章将会详述非规则图形,如何使用 PS + AI 生成 ​​path​​ 路径,实现 SVG 动画,放个 Demo,敬请期待。

【Web动画】SVG 线条动画入门_SVG_09


(12.28更新,下篇文章已出:【Web动画】SVG 实现复杂线条动画) 

到此本文结束,如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。