layout: post title: 模拟命令行操作的svg动画 categories:
最近看到一款可以将 Linux 终端会话录制成 SVG 动画的工具, 效果不错. 想着将它集成到我的脚本中, 就研究了一下它所用的svg格式. 弄明白之后, 觉得用svg来显示文字虽然性能好, 但过于麻烦, 而且文件也大, 如果直接使用js脚本来模拟显示文字, 得到的svg文件就小多了, 而且也更容易修改文字内容. 所以就保留了原软件的模板, 增加了一段js脚本达到了我需要的效果:
<object data="/pic/term.svg"></object>其中的打字机效果有两种实现方法:
效果如下:
<meta charset="UTF-8">
<style> @keyframes typing { from { width:0; } } @keyframes blink-caret { 50% { background-color: transparent; } } h4 { border-right: .2em solid; width: 30ch; overflow: hidden; animation: typing 50s steps(300, end), blink-caret .5s step-end infinite; } .con{ display: inline-block; position: relative; } span{ width: 3px; height: 20px; background-color: #f00; position: absolute; right: -10px; animation:blink-caret .5s step-end infinite; } </style><h4>QWERT</h4><div class="con" id='con'></div><script> var s = "QWERT"; var con = document.getElementById('con'); var index = 0, length = s.length, tId = null; function start() { con.innerHTML='<span></span>' tId=setInterval(function(){ con.append(s.charAt(index)); if(index++ === length){ clearInterval(tId); index = 0; start() } },400); } start(); </script>其他更复杂的实现方法就很多了, 如auto printer 自动打字机效果. 相关的js库也有很多, 如typer.js, js-printer, Typed.js, typing.js, TheaterJS, 就不再多说了.