文字旅行者:一种文本加载(类似打字机)效果

广告位招租
扫码页面底部二维码联系

我的博客首页会在一段时间后加上一个作品区【版权所有】唐霜 www.tangshuang.net【作者:唐霜】域,每个区域都会点缀一点点动效。在 Na著作权归作者所有,禁止商业用途转载。【关注微信公众号:wwwtangshuangnet】util 的部分,我想实现一个效果,就是转载请注明出处:www.tangshuang.net【作者:唐霜】在 Nautil 这个单词后面,不断切换【关注微信公众号:wwwtangshuangnet】原创内容,盗版必究。 Nautilidae, Nautilu【未经授权禁止转载】著作权归作者所有,禁止商业用途转载。s, Nautil.js 这几个单词,效【版权所有,侵权必究】本文版权归作者所有,未经授权不得转载。果就像用键盘输入、删除再输入的效果。

【版权所有】唐霜 www.tangshu【作者:唐霜】本文作者:唐霜,转载请注明出处。ang.net著作权归作者所有,禁止商业用途转载。【访问 www.tangshuang.n【转载请注明来源】未经授权,禁止复制转载。et 获取更多精彩内容】【版权所有,侵权必究】

在谷歌搜索了一段时间后,我确信没有一个库未经授权,禁止复制转载。【版权所有,侵权必究】能够完完整整的实现这个效果。它们都实现了【版权所有】唐霜 www.tangshuang.net原创内容,盗版必究。输入效果,但是没有回删效果。于是,我只能本文作者:唐霜,转载请注明出处。未经授权,禁止复制转载。自己写一个 js 库来实现这个效果。最终【版权所有】唐霜 www.tangshuang.net【作者:唐霜】的效果你可以在我的博客首页看到。但是,后【原创内容,转载请注明出处】转载请注明出处:www.tangshuang.net来我觉得,这是一个非常不错的效果,虽然在本文版权归作者所有,未经授权不得转载。未经授权,禁止复制转载。我的博客上看到的是一个输入的效果,但是实【本文首发于唐霜的博客】【未经授权禁止转载】际上,对它重新思考,会发现它比这个效果的原创内容,盗版必究。转载请注明出处:www.tangshuang.net想象空间大很多。你可以用它来断句、给视频【版权所有】唐霜 www.tangshuang.net本文作者:唐霜,转载请注明出处。打字幕、利用文字翻语音接口朗读小说。它像【版权所有,侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】一个具有生命的灵活工具,因此,我称它为“原创内容,盗版必究。【转载请注明来源】文字旅行者”(github:TextTraveler)。

【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。

【版权所有,侵权必究】转载请注明出处:www.tangshua原创内容,盗版必究。【原创不易,请尊重版权】ng.net本文版权归作者所有,未经授权不得转载。

遍历文本怎么才能做到对开发者友好呢?我们转载请注明出处:www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】以“视频字幕”来举例,如果你想写一个视频【作者:唐霜】原创内容,盗版必究。字幕,你会怎样?对于我来说,我想象中的写著作权归作者所有,禁止商业用途转载。本文版权归作者所有,未经授权不得转载。字幕的方式,就是在剧本中打断点。那么什么【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】样的方式可以让我们打断点呢?我想到了 E转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。S6 的字符串模板标签。于是,一个字幕效本文作者:唐霜,转载请注明出处。本文作者:唐霜,转载请注明出处。果就出来了:

【原创内容,转载请注明出处】【原创不易,请尊重版权】
`你話三年。${[0,100,1]}三年之後又三年,${[0,100,1]}三年之後又三年!${[0,100,1]}十年都嚟緊頭啦老細!${[0,1000]}`

通过在字符串模板中加入占位符,就可以给字原创内容,盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】符串打断点了。每个断点的地方加入参数,用未经授权,禁止复制转载。本文版权归作者所有,未经授权不得转载。以控制该断点前面的文字,将会以怎样的时间【本文受版权保护】【关注微信公众号:wwwtangshuangnet】或行为出现在字幕中。

【访问 www.tangshuang.n转载请注明出处:www.tangshuang.net著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】转载请注明出处:www.tangshua【作者:唐霜】原创内容,盗版必究。ng.net【原创内容,转载请注明出处】

如何利用这些参数呢?

原创内容,盗版必究。【本文首发于唐霜的博客】

使用标签函数即可。我写了 travelText 这个标签函数,它可以生成一个 text未经授权,禁止复制转载。著作权归作者所有,禁止商业用途转载。 traveler 用以处理每个段落。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】转载请注明出处:www.tangshua转载请注明出处:www.tangshuang.net【原创内容,转载请注明出处】ng.net
const traveler = travelText`你話三年。${[0,100,1]}三年之後又三年,${[0,100,1]}三年之後又三年!${[0,100,1]}十年都嚟緊頭啦老細!${[0,1000]}`

接下来所有的事情就交给 traveler【原创内容,转载请注明出处】【转载请注明来源】 去做。但他实际上只是一个记录者,你可以【关注微信公众号:wwwtangshuangnet】【本文受版权保护】通过 on 方法监听他记录的内容,并作出相应的界面本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。修改。

本文版权归作者所有,未经授权不得转载。【原创内容,转载请注明出处】转载请注明出处:www.tangshua【原创内容,转载请注明出处】著作权归作者所有,禁止商业用途转载。ng.net

而为了更方便的实现我想要的那个效果,我又【原创内容,转载请注明出处】【作者:唐霜】写了 createTextWriter 函数,它直接在一个 DOM 元素中不断【未经授权禁止转载】原创内容,盗版必究。的根据 traveler 的记录情况重写【原创不易,请尊重版权】【本文受版权保护】 html 中的文本,从而达到我想要的效【原创不易,请尊重版权】【未经授权禁止转载】果。

原创内容,盗版必究。【原创不易,请尊重版权】

一切的一切都在 github 上。

【转载请注明来源】【本文受版权保护】

 

【访问 www.tangshuang.n【本文受版权保护】著作权归作者所有,禁止商业用途转载。et 获取更多精彩内容】转载请注明出处:www.tangshua著作权归作者所有,禁止商业用途转载。未经授权,禁止复制转载。ng.net未经授权,禁止复制转载。