这是SVG系列目录:
- 前端必知必会 | 学SVG看这篇就够了(一)
- 前端必知必会 | 学SVG看这篇就够了(二)
- 前端必知必会 | 学SVG看这篇就够了(三)
- 前端必知必会 | 学SVG看这篇就够了(四)
- 前端必知必会 | 学SVG看这篇就够了(五)
- 前端必知必会 | 学SVG看这篇就够了(六)
- 前端必知必会 | 学SVG看这篇就够了(七)
- 前端必知必会 | 学SVG看这篇就够了(八)
- 前端必知必会 | 学SVG看这篇就够了(九)
- 前端必知必会 | 学SVG看这篇就够了(十)
- 前端必知必会 | 学SVG看这篇就够了(十一)
- 前端必知必会 | 学SVG看这篇就够了(十二)
前言
现在,web页面中动画的实现方式有很多,例如原生的CSS3
动画、JavaScript
动画...等多种方法实现,甚至是直接使用animate
、anime
、magic
等这些开源的类库来实现。
动画
我们学过的很多种图形绘制都可以实现动画效果,transform
、路径变化、描边等这些都是可以实现动画效果的。
一些SVG动画库
- GSAP
- Snap.svg
- SVG.js
- anime.js
- Velocity.js
- D3
在学习动画之前,我们先学习两个属性,这与后面我们要实现的动画有一定的关系。它们分别是stroke-dasharray
和stroke-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>
图中,每条竖线的间隔是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>
第一条线条没有设置stroke-dashoffset
,默认为0
。
第二条线条stroke-dashoffset
值设置为-10
,即线条起始点向右偏移10px
。
第三条线条stroke-dashoffset
值设置为10
,即线条起始点向左偏移10px
。
最后
本篇文章介绍了关于SVG的一些动画类库,以及讲述了关于stroke-dasharray、stroke-dashoffset属性的,这两个属性在SVG动画中这很常见的,感谢你的阅读!
😀😀 关注我,不迷路! 😀😀