本篇文章给大家带来了关于前端的相关知识,其中主要跟大家聊一聊前端是怎么实现打字机插件的,感兴趣的朋友下面一起来看一下吧,希望对大家有帮助。
前言
前端实现打字机效果,在网上找到的通过修改dom节点的方式无法跨端使用,考虑到跨端问题作出兼容方案:使用回调函数,在每次打字变化的时候调用回调并且把更新后的字符串抛出,让用户自己去处理之后的渲染,这样就能够做到跨平台,在各个端都能够正常使用。
最简单的打字机
const dom = document.querySelector('.content')
const data = '最简单的打字效果代码'.split('')
let index = 0
function writing(index) {
if (index < data.length) {
dom.innerHTML += data[index]
setTimeout(writing.bind(this), 200, ++index)
}
}
writing(index)
最简单的打字机,简单的通过定时器实现了文字的增加,通过这个例子我们能够得到一个具体的实现思路,当然一些功能或者性能上的问题还需要不断地优化,但是我们可以以此作为基础来设计一款插件。
1. 新增向后删除动效
所以我们新增一个当前的打字状态
当 state 为 "typing" 的时候代表向前打字,相反为向后删除,
然后就是处理删除部分的逻辑,这部分的逻辑和向前新增是一样的,并且我们也要在删除到最后一个字符之后把状态改为 "typing"
2. 新增速度,向后删除速度可控
然后还可以自定义向前新增或者向后删除的速度,通过当前的状态来判断就可以
3. 输入文字可以为单个字符串也可以为字符串数组
并且支持传入一个字符串数组而不是单个的字符串,因为实际的需求可能是多个字符串之间一直轮换
首先单个字符的逻辑没什么好说的,字符串的数组的话,就需要新增一个index用于判断当前打字机进行到了哪一个字符串,
通过 changeTextIndex 这个函数,就可以不断地更新当前字符串,做到字符串数组循环播放的效果
4. 开启延迟
新增字符串开始和结束的延迟
用于控制每次打字结束之后,需要等待的时间
5. 停止打字
打字机运行的过长当中,由于底层是通过定时器实现的,那么就一定需要在不使用的时候将其关闭,避免造成性能的浪费,比方说在首页实例化了一个打字机,但是进入到别的页面的时候就不再需要这个打字机了,那么就需要将其停下。
通过在实例上绑定一个函数来停下当前打字机的进行,当调用的时候,会将下一个定时器赋值为 null,从而停下打字机的运行。
6. 使用 callback 回调解决小程序问题
上述的代码当中,我们都去修改了 dom 节点来实现打字机字符的改变,那么在小程序或者是其他不存在 dom 或者是 dom 修改的 api 不再是 innerhtml 的时候,插件就无法进行支持,所以对此进行兼容,显示通过 callBackText 来保存当前的字符串,然后在利用一个函数来决定,这个字符串的使用方式
在存在 callback 的情况下,优先将字符串通过 callback 回调出去,让业务拿到这个字符串并且自己去处理改变的逻辑,这样在哪都能够进行打字效果,并且不在依赖环境。
这里那我自己的 uniapp 项目做一个示例
效果:
第三方 typed.js 库
大部分逻辑具体参考了 [typed.js]-JavaScript打字动画库
这里属于自定义了一款插件,支持的功能不如 typed.js 但是胜在更加轻量,并且可以自己定义更多自己需要的功能。
总结
在不考虑环境的情况下,最简单的打字机效果就是直接利用定时器在每隔一段时间后更新节点内容文字,在其基础上还可以做出扩展,更新出比较完善的打字机插件.
以上就是详解怎么在前端里实现打字机插件的详细内容,更多请关注编程网其它相关文章!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
软考中级精品资料免费领
- 历年真题答案解析
- 备考技巧名师总结
- 高频考点精准押题
- 资料下载
- 历年真题
193.9 KB下载数265
191.63 KB下载数245
143.91 KB下载数1148
183.71 KB下载数642
644.84 KB下载数2756
相关文章
发现更多好内容- Java 重构到底有哪些作用呢?(Java重构有什么用)
- 在 Java 中如何利用 Vector 来定义二维数组?(java中怎么用vector定义二维数组)
- 为何 Java 环境变量配置总是难以成功?(java环境变量配置为什么不成功)
- 如何配置 Java 文件上传接口?(java文件上传接口怎么配置)
- 如何在 JAVA 中直接读取文件流内容?(JAVA怎么直接读取文件流内容)
- 如何将 Java 文件转换为可执行文件?(java文件如何变成可执行文件)
- 如何合理设置缓存池大小?(缓存池大小如何设置)
- 如何轻松进行 java 反汇编?超详细步骤教你快速上手!(如何进行java反汇编)
- 在 Java 中如何实现旧文件内容的覆盖?(java如何将旧文件内容覆盖)
- Java 中如何实现字符串字段的升序排序?(Java字符串字段升序排序怎么实现)