svg文本路径动画：舞动的文字

花飞飞

马黑黑 发表于 2024-10-6 19:43
这个不算工具，是一种效果

动态招牌字体效果

马黑黑

花飞飞 发表于 2024-10-6 19:48
动态招牌字体效果

大概是的吧

花飞飞

马黑黑 发表于 2024-10-6 20:03
大概是的吧

酒幌子

红影

马黑黑 发表于 2024-10-6 19:31
是的

这次不是沿着路径走了，而是原地飘拂，看了一下，其实只改了一个数字，厉害。

红影

马黑黑 发表于 2024-10-6 19:34
这是文本框 oninput 事件触发的，每一个输入都会对路径上的文档产生作用

是的，是时时跟着变化呢。

红影

马黑黑 发表于 2024-10-6 19:35
是的。svg对文本的处理不是强项，不过它好歹支持

自己弄的时候可以根据文本长度做专门设计，这个里的是适应所有文本的，不一样的。

红影

马黑黑 发表于 2024-10-6 19:36
这是转义了。svg代码是自动生成的，它按 textContent 转义了一些符号，这些符号可能不是原始代码里的真面 ...

哦哦，这个是转义字符啊，也可以用到svg里呢。

马黑黑

红影 发表于 2024-10-6 20:19
哦哦，这个是转义字符啊，也可以用到svg里呢。

需要转义的时候才转义。这是JS自动转义，好比论坛会转义一些特殊字符一样

马黑黑

红影 发表于 2024-10-6 20:18
自己弄的时候可以根据文本长度做专门设计，这个里的是适应所有文本的，不一样的。

说得对

马黑黑

红影 发表于 2024-10-6 20:16
是的，是时时跟着变化呢。

这是非常简单的事情，你看看代码，就一句

马黑黑

红影 发表于 2024-10-6 20:14
这次不是沿着路径走了，而是原地飘拂，看了一下，其实只改了一个数字，厉害。

就是二次贝塞尔曲线的y控制点，一上一下

红影

马黑黑 发表于 2024-10-6 22:41
需要转义的时候才转义。这是JS自动转义，好比论坛会转义一些特殊字符一样

这个用在svg里的还是头一次看到呢

红影

马黑黑 发表于 2024-10-6 22:41
说得对

做单独一个的时候就可以保证它上下飞舞了。

红影

马黑黑 发表于 2024-10-6 22:42
这是非常简单的事情，你看看代码，就一句

效果却这么好呢

红影

马黑黑 发表于 2024-10-6 22:44
就是二次贝塞尔曲线的y控制点，一上一下

是的，就调了y的数值而已，其他的都没变，就能飞舞了

马黑黑

红影 发表于 2024-10-6 23:22
是的，就调了y的数值而已，其他的都没变，就能飞舞了

忽上忽下的Y坐标控制点能够让路径以曲线的方式抖动。你可以实例化一个路径看看：

<use href="#paidId" fill="none" stroke="purple" />

#pathId 使用前面设计的路径id

马黑黑

红影 发表于 2024-10-6 23:21
效果却这么好呢

form表单里的可输入控件，以及其它可输入元素，都可以监听它们的输入状态，实时将值传递给预设的目标

马黑黑

红影 发表于 2024-10-6 23:21
做单独一个的时候就可以保证它上下飞舞了。

是的

红影

马黑黑 发表于 2024-10-7 08:00
忽上忽下的Y坐标控制点能够让路径以曲线的方式抖动。你可以实例化一个路径看看：

嗯嗯，看到当中线的变化了，那些文字都在线上

红影

马黑黑 发表于 2024-10-7 08:01
form表单里的可输入控件，以及其它可输入元素，都可以监听它们的输入状态，实时将值传递给预设的目标

这个有趣。