最近项目里面用到了这个文字路径动画,不得不说确实挺好玩的,如果有需要的小伙伴可以参考!
代码片段
由于公司之前项目里也用到过,但是我是第一次写,所以第一时间还是先看看前辈是怎么处理的,借鉴一下长长经验哈哈,所以就找到了这个svg文字路径,上代码
(gif中第一个文字路径1
)
<svg
id="textPathDemo"
class="round-text"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="500"
viewBox="0 0 500 500"
>
<path
id="text-path1"
class="text-path"
d="M40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 z"
fill="#ccc"
stroke="#FF4444"
stroke-dasharray="5,2"
stroke-width="1"
/>
<text class="circle-text">
<textPath xlink:href="#text-path1" class="text-content" textLength="280" startOffset="0">
svg文字路径动画111111111111111111
<animate attributeName="startOffset" from="0" to="1020" begin="0s" dur="8s" repeatCount="indefinite" />
</textPath>
<textPath xlink:href="#text-path1" class="text-content" textLength="280" startOffset="520">
svg文字路径动画222222222222222222
<animate attributeName="startOffset" from="520" to="1540" begin="0s" dur="8s" repeatCount="indefinite" />
</textPath>
</text>
</svg>
属性介绍
找到代码后,就需要看一下属性都是什么意思了,介绍一下这里涉及到的属性
- 先看一下
svg
标签
- width:顾名思义就是svg的宽度
- viewBox:“x, y, width, height”,是svg容器的设置
x:左上角横坐标,y:左上角纵坐标,width:宽度,height:高度
path
标签也就是用来定义svg路径的标签
- d:是文字转动的路径,想让文字沿着圆转动,沿着长方形、菱形、平行四边形或者任何路径转动都可以,我是找了一个文档看了一下这个路径的书写规则,贴个链接,里面还可以在线测试,在线调整路径,我觉得还是挺好用的https://www.nhooo.com/svg/svg-path-element.html
- fill:可以填充当前形状的颜色,gif中第一个
文字路径1和文字路径2
,灰色区域,设置填充颜色#ccc - stroke:描边颜色,gif中都是用的#FF4444
- stroke-dasharray:虚线描边,可选值为none,inherit
- none 肯定是表示不用虚线描边
- inherit 这是一个逗号或者空格分隔的
数值列表
,第一个值表示线段的长度,第二个值表示线段间空白的长度
,gif中stroke-dasharray=“5 2"中,第一个数字 5 表示虚线中的线段的长度,而第二个数字 2 表示两个线段间的长度是 2px。所以出来的效果是每段虚线的间隔都是一样的。其实这个dasharray可以不只两个值,可以有很多个,会循环依次用到线段和空白之间。gif中最后一个文字路径9
设置的stroke-dasharray=”(20,5)",是不是能明显感受到差别
- stroke-width:描边宽度,gif中最后一个
文字路径9
为3,其他的都是1,类似border-width
textPath
标签也就是直接关系到文字的标签了,定义文字按照什么路径排列的
- xlink:href : 这里是指这个文字用用哪条路径,注意我们在
path
那设置的 id 属性。 - textLength : 表示文字的长度,可以根据想要的文字间距离来设置文字长度,文字长度越长,字与字之间距离越大,这里的280是我觉得文字距离比较适中。
- startOffset : 表示文字开始的偏移量,也就是文字开始点在路径中的位置。
animate
标签就是动画了
- attributeName:在动画中,父元素的需要被改变的属性名,类似我们的例子中使用了startOffset 作为
attributeName
,通过改变文字的偏移量让文字动起来。 - from:动画初始值
- to:动画最终值
- begin:动画开始的延时
- dur:整个动画的时间
- repeatCount:动画重复次数,indefinite是无限次,就是一直循环,如果是1的话,那么意思是动画只执行一次
路径长度计算
gif中每个例子中的长度其实都是我一点点调的,到现在我也不太清楚这个计算方式应该是怎么算。
我们看一下gif中,前面两组看不出任何破绽,都是无限重复循环的,但是这个路径长度如果计算不好会怎么样呢,看一下最右边那组文字路径8
,很明显在走完一遍后文字消失在了最右边,这就是长度写的太长了,导致文字已经到达文字边缘了,但是还有一截长度没走完,页面上看起来就消失了,但是上面路径6
和路径7
长度写的就会短一些,所以到最后还灭消失的时候又返回到了起点。
建议如果也不知道咋写的可以慢慢调试,但是作为程序员,写数据类的东西还是要精确一点。所以我又去找了各大文档文章等,然后看到了snap.svg.js的库,然后有个方法是可以计算出路径长度的Snap.path.getTotalLength(path)
let path = "M40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 H200 A28 28 0 0 1 226 40 V305 A28 28 0 0 1 200 332 H40 A28 28 0 0 1 12 306 V40 A28 28 0 0 1 40 12 z"
let pathLength = Snap.path.getTotalLength(path)
console.log(pathLength);
由于我项目里面那个文字动画已经搞定了,所以就没有继续引这个库去尝试,大家可以参考一下,如果项目允许的话可以尝试一下~
补充路径
//文字路径5 圆形
d="M 200 200 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0 M 200 200 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0"
//最后一组 路径都一样,只是属性不一样
d="M10,180 q100,120 120,20 q140,-50 160,0 q100,120 120,20 q140,-50 160,0"
总结
文字动画最重要的是路径,要文字沿着怎样的路径去运动,先确定路径之后再去看路径长度,路径长度比较笨的办法是自己一点点调,当然项目允许的话肯定还是要引库进去,能更精确一些,也是第一次跟svg文字路径动画打交道,知道的还不够详细,欢迎大家补充~有写错的地方也希望能指正~