前端必知必会 | 学SVG看这篇就够了(十三)

3,013 阅读3分钟

这是SVG系列目录:

前言

现在,web页面中动画的实现方式有很多,例如原生的CSS3动画、JavaScript动画...等多种方法实现,甚至是直接使用animateanimemagic等这些开源的类库来实现。

动画

我们学过的很多种图形绘制都可以实现动画效果,transform、路径变化、描边等这些都是可以实现动画效果的。

一些SVG动画库

  • GSAP
  • Snap.svg
  • SVG.js
  • anime.js
  • Velocity.js
  • D3

在学习动画之前,我们先学习两个属性,这与后面我们要实现的动画有一定的关系。它们分别是stroke-dasharraystroke-dashoffset,从属性名称来看,它们都是与stroke(描边)有关的。

stroke-dasharray

该属性用于控制描边的点划线的长度,你需要传入一个参数,这个参数可以是一个数,也可以是一个数列,看下面这个例子。

<line x1="0" x2="50" y1="10" y2="10" stroke-width=".5" stroke="red" stroke-dasharray="5"></line>
<line x1="0" x2="50" y1="20" y2="20" stroke-width=".5" stroke="red" stroke-dasharray="10"></line>
<line x1="0" x2="50" y1="30" y2="30" stroke-width=".5" stroke="red" stroke-dasharray="5,10"></line>

58.png

图中,每条竖线的间隔是10px,线长是60px。我们先看第一条线条,这个的stroke-dasharray值是5,指线条每5px的实线长度就会有5px的间隔距离。同理,第二条线条,则每10px的实线长度就会有10px的距离。

第三条线条,这里是stroke-dasharray传入的是两个参数,使用空格隔开(也可以使用逗号隔开参数),第一个参数指的是实线的长度,第二个参数是间隔的距离。如图我们看到红线每5px的长度就会有10px的间隔距离。

第四条线条传入的是三个参数,前两个参数和上面一样,第三个参数是实线的长度,可以理解成奇数为实线长度,而偶数为间隔距离。

第五条线条传入的是四个参数,但参数是相同的,等价于 5 10

stroke-dashoffset

该属性用于起点的偏移,正数为x值向左偏移,负数为x值向右偏移,传入一个参数,用于设置偏移值。

该属性需要搭配上面的stroke-dasharray属性使用,否则无法看出偏移效果。

我们看下面这个例子:

<line x1="10" x2="90" y1="10" y2="10" stroke-width=".5" stroke="red" stroke-dasharray="20";></line>
<line x1="10" x2="90" y1="20" y2="20" stroke-width=".5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="-10"></line
<line x1="10" x2="90" y1="30" y2="30" stroke-width=".5" stroke="red" stroke-dasharray="20"; stroke-dashoffset="10"></line>

59.png

第一条线条没有设置stroke-dashoffset,默认为0

第二条线条stroke-dashoffset值设置为-10,即线条起始点向右偏移10px

第三条线条stroke-dashoffset值设置为10,即线条起始点向左偏移10px

最后

本篇文章介绍了关于SVG的一些动画类库,以及讲述了关于stroke-dasharray、stroke-dashoffset属性的,这两个属性在SVG动画中这很常见的,感谢你的阅读!

😀😀 关注我,不迷路! 😀😀