• 2018-09-16 08:25:12

最近看到一款可以将 Linux 终端会话录制成 SVG 动画的工具, 效果不错. 想着将它集成到我的脚本中, 就研究了一下它所用的svg格式. 弄明白之后, 觉得用svg来显示文字虽然性能好, 但过于麻烦, 而且文件也大, 如果直接使用js脚本来模拟显示文字, 得到的svg文件就小多了, 而且也更容易修改文字内容. 所以就保留了原软件的模板, 增加了一段js脚本达到了我需要的效果:

其中的打字机效果有两种实现方法:

1. 使用css动画, 只适用于单行文字

2. 使用js脚本, 用于块元素

效果如下:

QWERT

QWER

其他更复杂的实现方法就很多了, 如auto printer 自动打字机效果. 相关的js库也有很多, 如typer.js, js-printer, Typed.js, typing.js, TheaterJS, 就不再多说了.

本文地址: https://jerkwin.github.io/2018/09/16/模拟命令行操作的svg动画/, 转载请注明◆
◆评论问题: https://jerkwin.herokuapp.com/category/3/博客, 欢迎留言