在上一节的《SVG线条动画实现原理》一文中,了解了SVG中线动画是怎么做的。在这篇文章中,了解了怎么借助Sketch这样的制作软件绘制SVG的路径,然后借助于SVG的stroke-dasharray
和stroke-dashoffset
值设置为路径的长度(最好是大于其长度,可以通过.getTotalLength()
获取到路径的长度),在@keframes
中的100%
处设置stroke-dashoffset
的值为0
就可以实现线条自画的一个动画效果。原理很简单,但在上一篇文章中,看到的仅是一条路径(也就是一条线的自画效果),如果我们想对一图形进行依次自动动效呢?其实也是可以实现的。今天我们在这篇文章中就来学习一下,怎么实现。