这是一个创建于 1845 天前的主题，其中的信息可能已经有所发展或是发生改变。
一个把输入文字转换成描边动画 svg 的小东西
https://oubenruing.github.io/svg-text-animate/
如果有什么想法，请给我点建议~
如果觉得不错，请给个 star~
谢谢~
第 1 条附言 · 2019-12-13 17:59:19 +08:00
重新组织了代码，除了支持 css 生成动画的方式外，还增加了 svg SMIL 的动画方式，该模式下生成的动画可以直接复制粘贴进微信公众号的文章使用，顺便也写了个生成用的小工具。
注：生成 path 的功能来自于 opentype.js
对提出意见，以及 star 的朋友们，表示感谢！
注：生成 path 的功能来自于 opentype.js
对提出意见，以及 star 的朋友们，表示感谢！
 |
1
1O 2019-11-12 18:02:20 +08:00
我配给您建议吗？
|
 |
2
monkJay 2019-11-12 18:30:50 +08:00
666
|
 |
3
vtwoextb 2019-11-12 18:34:12 +08:00
输入中文显示乱码；可以增加背景颜色、大小、字体倾斜、下载等功能就好了，目前市场有这方面的需求，而且国外有人专门做这个卖的
|
 |
4
fengfuliu 2019-11-12 18:37:06 +08:00
文档写的很规范 老程序员了
|
 |
5
liuzhiyong 2019-11-12 18:49:00 +08:00 via Android
我靠，威武，还有这操作。
|
 |
6
sologgfun 2019-11-12 19:15:19 +08:00
我配给您建议吗？
|
 |
7
oneisall8955 2019-11-12 19:47:07 +08:00 via Android
我配给您建议吗？
|
 |
8
ZredoC 2019-11-12 21:02:17 +08:00
我不配给您建议
|
 |
9
azh7138m 2019-11-12 21:04:14 +08:00
这个是描边，不是按笔画
字转 path 是 opentype 做的 描边是个 stroke-dashoffset 做的动画 读代码啊朋友们 代码里面的_this 出现的很诡异，不知道为啥要这么写。。。也没必要 |
 |
10
lizhenda 2019-11-12 21:23:26 +08:00
厉害啊
|
 |
11
xiaotuzi 2019-11-13 07:48:08 +08:00 via iPhone
首先，是一个不错的点子！
其次，这个 JS 不是你自己的，只能说搬过来用，跟以前一个前端写在线打开文档一样，用的是别人的 api😂 但，不可否认，感谢提供 api 的 demo |
 |
13
genius2k 2019-11-13 12:30:02 +08:00
我不配给您建议
|
 |
14
rabbirbot00 2019-11-13 13:47:46 +08:00
README 上的英文文档链接貌似指向的还是中文文档
|
 |
15
meloncc 2019-11-13 14:42:04 +08:00
|
 |
17
duanxianze 2019-11-13 18:04:31 +08:00
大佬啊 太强了 我不配提建议
|
 |
18
oubenruing OP @vtwoextb 中文要导入中文字体才能使用
|
|
19
oubenruing OP @azh7138m 是的，代码写的不太仔细，回头在调整下。
|
|
20
oubenruing OP @xiaotuzi 因为产生这个点子的时候，也查了很多看有没有人已经做出类似东西，生成 path 这个也有别人写好的东西，就拿来用了。
|
|
21
oubenruing OP @meloncc 感谢，我去从新组织下代码
|
|
22
oubenruing OP @chengxy 被看穿了。。。
|
|
23
oubenruing OP @rabbirbot00 感谢~
|
|
24
oubenruing OP @meloncc @azh7138m
setFont 中 之前写法是 const _this = this new Promise(function (resove, reject){ console.log(this) //局部作用域 console.log(_this) } 此处的 this 是指向局部作用域 因此返回 undefined ；因此我在 Promise 外面先定义一个_this 来获得一个实例本身的引用。 现在改成 new Promise((resove, reject)=>{ console.log(this) } 使用箭头函数，箭头函数内的 this 不会指向自身。 我的理解是否有误，请见教。 |
|
25
oubenruing OP @vtwoextb 字体大小目前有参数可以控制。斜体与否是根据使用字体来控制的，背景默认透明，在使用中可以通过父元素来控制。下载功能后续完善。
|
 |
26
lzuntalented 2019-11-14 00:53:45 +08:00
挺漂亮的，还可以在描边时增加特效，可以参考下这个效果 https://github.com/lzuntalented/lz-paint-text
|
|
27
oubenruing OP @lzuntalented 你的这个效果挺好！不过动画是用 js 控制的，我这个主要是 svg 用 css 动画，我看看能不能加上一些效果。谢谢！
|
 |
28
ty89 2019-11-14 10:05:24 +08:00
动画效果比较单一，建议多增加一些效果
这个需求还是有的，比如做视频片头就很有用 |
Select Language