用SVG 描边动画送一份平安夜祝福
发布网友
发布时间：2024-09-17 05:31
共1个回答
热心网友
时间：2024-11-26 14:26
我做了一个 SVG 描边动画，效果是这样的：
SVG 是用 Illustrator 画的，苹果是手绘的。
我们来学习下它的实现原理。
SVG 是网页上画矢量图的技术，有 line（线）、polyline（折线）、polygon（多边形）、rect（矩形）、circle（圆形）、ellipse（椭圆）等图形，也可以通过 path 来描述任意的形状。
其中 M 是 moveTo，移动到某个位置开始画，L 是 lineTo，画一条直线，Z 是 closePath，完成绘制。
那我们需要用代码手画苹果和文字的 path 么？
不用，可以用 Illustrator 这种矢量绘图软件，它有钢笔、文字等各种绘图工具，用这些工具绘制完然后导出 SVG 就行。
SVG 可以设置两个方面的属性，一个是线条相关的，主要是 stroke，一个是填充相关的，主要是 fill。
stroke 相关的样式有 stroke-dasharray 来指定用虚线画。
比如 stroke-dasharray:10 20; 是虚线长度 10px，间隔 20px。
也可以用 stroke-dasharray 指定虚线的 offset，也就是偏移位置，往左偏移是正，往右是负。
比如 stroke-dashoffset: 1 就是往左偏移 1px。
这个 stroke-dashoffset，我们往左偏移全部的长度，然后再慢慢移动回原来位置，也就是 offset 由正数到 0，不就是描边的效果的呢？
这就是 SVG 描边动画的原理。
知道了这种动画要改变什么属性，那我们要用定时器自己去改变么？不用，可以用一些动画框架来修改属性值，比如 anime.js，它还支持设置时间函数，比如匀速、加速等。
我们来实现下吧。
首先准备 SVG，使用 Illustrator 来画：
使用文字工具写祝福的文字，然后选择“创建轮廓”，变成轮廓数据，导出 SVG。
苹果可以用钢笔手画，画完后变成 path 的形式，导出 SVG。
画好了 SVG 之后，我们实现动画效果：
给每个 path 加上一个 class，然后用 anime.js 来改变 stroke-dashoffset 实现描边的动画效果。
需要传入这些参数：
每个元素设置了不同的动画 delay 时间。
每个元素执行结束之后，判断时间，如果是已执行完动画的元素，就 fill 上颜色。
stokeDashOffset 的初始值是 SVG 的长度（向左偏移），然后慢慢变为 0（回到原点）。
我们来看一下实现效果。
总结：
SVG 描边动画原理简单，通过 stroke-dashoffset 属性值的变化实现描边效果，用 anime.js 可以实现动画。
希望这个动画能给你的平安夜带来欢乐，祝大家平安夜快乐，周五也快乐！
