svg文本描边动画

马黑黑 · 发表于 2024-9-25 13:03

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2024-9-25 18:05 编辑

一、需要用到的核心属性

（一）stroke-dasharray ：描边线段数值列表，单值表示线段长度和线段间的间隔距离一样，双值时第一个数指线段长度第二个数指间隔距离，三值时，比如a b c，线段长度a、间隔距离b、线段长度c接着间隔距离a、线段长度b、间隔距离c然后从头再来，其他多值列表时，偶数值参考双值变化、奇数值参考三值变化，原理是按“线段·间隔·线段·间隔···”方式循环取数值列表值，值用完从头再循环数值。双值以上用空格或逗号隔开各值。

（二）stroke-dashoffset ：描边线段偏移，表示线段与路径起点的偏移距离，支持几乎所有的svg内部可视元素。属性值为数值，正数表示正向偏移，负数表示反向偏移。

上述两个属性，第一个用来设置虚线，第二个用来设置虚线偏移。我们经常使用的CSS相抵路径运动来源于此，主要利用第二个属性加offset-path实现。svg文本标签没有path可用，所以需要第一个属性 stroke-dasharray 来描述描边形态，再用第二个属性 stroke-dashoffset 驱动描边偏移产生描边动画。

二、纯svg方式文本描边动画的实现

以下是效果和代码，后边略做解释：

<svg width="500" height="120" viewBox="-125 -30 250 60">
	<text x="0" y="18" fill="none" stroke="teal" stroke-width="2" stroke-dasharray="60 10" font-size="50" font-weight="bold" text-anchor="middle">
		花潮论坛
		<animate attributeName="stroke-dashoffset" from="-70" to="0" dur="2s" begin="0s" repeatCount="indefinite"/>
	</text>
</svg>

首先注意svg的宽高和viewBox属性设置的关系：它们按照2:1的方式设计+坐标系右下位移便于定位，需要说明的是，我们是在viewBox中作画，所以30的字体大小会放大一倍，其他数值很多依此类推。其次是动画的核心内容：text标签做了常规属性设置，其中的stroke-dasharray="60 10"设置的是文本描边的线段样式；animate 标签中的 stroke-dashoffset 偏移范围从（from）-70 到（to）0 之间循环往复变化，from 的值应设置得当，动画的头尾衔接才相对正常。

三、使用CSS实现svg文本描边动画

CSS对svg的支持度很高，试看下面使用CSS实现上例效果的演示：

<style>
.text {
	fill: none;
	stroke: teal;
	stroke-width: 2;
	stroke-dasharray: 60 10;
	font-size: 50px;
	font-weight: bold;
	text-anchor: middle;
	animation: textstroke 2s linear infinite;
}
@keyframes textstroke {
	from { stroke-dashoffset: -70; }
	to { stroke-dashoffset: 0; }
}
</style>

<svg width="500" height="120" viewBox="-125 -30 250 60">
	<text class="text" x="0" y="18">花潮论坛</text>
</svg>

这里，CSS设计了一个 .text 选择器，它将svg的text标签里的属性除了x、y之外都设置了，并加上一个animation属性调用 @keyframes 设计的名为 textstroke 的CSS动画。CSS动画也是通过 from 和 to 描述 stroke-dashoffset 的数值变化；CSS还可以使用百分比描述动画过程不同阶段的数值变化，功能等同于svg的 values 属性。

svg动画和CSS动画到底用哪一个好？由于CSS天然启用设备的GPU进行加速，动画的执行性能更为卓越，一般的建议是，对复杂动画而言，能用CSS实现的动画就尽量使用CSS动画，实在不行的就用svg动画；简单动画则无需考虑什么，哪个更上手就用哪一个。