一个把输入文字转换成描边动画 svg 的小东西
https://oubenruing.github.io/svg-text-animate/
如果有什么想法，请给我点建议~
如果觉得不错，请给个 star~
谢谢~
爱意满满的作品展示区。
This topic created in 2555 days ago, the information mentioned may be changed or developed.
Supplement 1 · Dec 13, 2019
重新组织了代码，除了支持 css 生成动画的方式外，还增加了 svg SMIL 的动画方式，该模式下生成的动画可以直接复制粘贴进微信公众号的文章使用，顺便也写了个生成用的小工具。
注：生成 path 的功能来自于 opentype.js
对提出意见，以及 star 的朋友们，表示感谢！
注：生成 path 的功能来自于 opentype.js
对提出意见，以及 star 的朋友们，表示感谢！
 |
1ONov 12, 2019
1
我配给您建议吗？
|
 |
monkJayNov 12, 2019
2
666
|
 |
vtwoextbNov 12, 2019
3
输入中文显示乱码；可以增加背景颜色、大小、字体倾斜、下载等功能就好了，目前市场有这方面的需求，而且国外有人专门做这个卖的
|
 |
fengfuliuNov 12, 2019
4
文档写的很规范 老程序员了
|
 |
liuzhiyongNov 12, 2019 via Android
5
我靠，威武，还有这操作。
|
 |
sologgfunNov 12, 2019
6
我配给您建议吗？
|
 |
itechifyNov 12, 2019 via Android
7
我配给您建议吗？
|
 |
ZredoCNov 12, 2019
8
我不配给您建议
|
 |
azh7138mNov 12, 2019
9
这个是描边，不是按笔画
字转 path 是 opentype 做的 描边是个 stroke-dashoffset 做的动画 读代码啊朋友们 代码里面的_this 出现的很诡异，不知道为啥要这么写。。。也没必要 |
 |
lizhendaNov 12, 2019
10
厉害啊
|
 |
xiaotuziNov 13, 2019 via iPhone
11
首先，是一个不错的点子！
其次，这个 JS 不是你自己的，只能说搬过来用，跟以前一个前端写在线打开文档一样，用的是别人的 api😂 但，不可否认，感谢提供 api 的 demo |
 |
genius2kNov 13, 2019
13
我不配给您建议
|
 |
rabbirbot00Nov 13, 2019
14
README 上的英文文档链接貌似指向的还是中文文档
|
 |
melonccNov 13, 2019
15
|
 |
duanxianzeNov 13, 2019
17
大佬啊 太强了 我不配提建议
|
 |
18
@vtwoextb 中文要导入中文字体才能使用
|
|
19
@azh7138m 是的，代码写的不太仔细，回头在调整下。
|
|
20
@xiaotuzi 因为产生这个点子的时候，也查了很多看有没有人已经做出类似东西，生成 path 这个也有别人写好的东西，就拿来用了。
|
|
21
@meloncc 感谢，我去从新组织下代码
|
|
22
@chengxy 被看穿了。。。
|
|
23
@rabbirbot00 感谢~
|
|
24
@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
@vtwoextb 字体大小目前有参数可以控制。斜体与否是根据使用字体来控制的，背景默认透明，在使用中可以通过父元素来控制。下载功能后续完善。
|
 |
lzuntalentedNov 14, 2019
26
挺漂亮的，还可以在描边时增加特效，可以参考下这个效果 https://github.com/lzuntalented/lz-paint-text
|
|
27
@lzuntalented 你的这个效果挺好！不过动画是用 js 控制的，我这个主要是 svg 用 css 动画，我看看能不能加上一些效果。谢谢！
|
 |
ty89Nov 14, 2019
28
动画效果比较单一，建议多增加一些效果
这个需求还是有的，比如做视频片头就很有用 |
Select Language