看到了一个很有趣的动画打字效果的js库, 所以分析一下类似的打字动画的基础原理。原始链接在在这里 typical

需求分析

1. 光标闪烁
2. 打字动画

ityped

代码来自 iTyped

光标闪烁

这个可以很简单的通过 css 中的关键帧来达成

.ityped-cursor {
    opacity: 1;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}
@keyframes blink {
    100% {
        opacity: 0;
    }
}

打字效果

一个字一个字的打出来, setTimeout() setInterval()

const typewrite = (strings) => {
    setTimeout(() => {
      typeString(strings);
    }, startDelay); //初始化
  };

  const typeString = (str) => {
    let index = 0,
      strLen = str.length;
    let intervalID = setInterval(() => {
      element.textContent += str[index]
      if (++index === strLen) return onStringTyped(intervalID);
    }, typeSpeed);//用 textcontent 来记录
  };

  const onStringTyped = (id, props) => {
    clearInterval(id);
    setTimeout(() => eraseString(props), backDelay); //此时往回删除
  };

文字删除效果

又把字符串挨个删去, 此时调用的时候将象征着打印并删除完整过程的某个 index 增加 1 来记录, 如果字符串是多个的话

const eraseString = (props) => {
    let str = element.textContent,
      strLen = str.length;
    let intervalID = setInterval(() => {
      element.textContent = str.substr(0, --strLen)
      if (strLen === 0) return onStringErased(intervalID);
    }, backSpeed);
  };

  const onStringErased = (id) => {
    clearInterval(id);
    ++i;
    typewrite(STRINGS_TO_ITERATE);//这里的这个变量=strings
  };

评价

typing

这代码结构和jquery的一模一样

代码来自 史上最华丽的打字效果JS插件

鼠标闪烁

和 ityped 实现模式是一致的

打字效果

这个就很有意思了, 不仅仅是打字, 还可以打印出 dom 结构, 它的执行流程是这样的:

1. 解析输入的 dom 元素为数组
2. 根据这个数组将 dom 节点一个个打印出来 (need update)

typical

代码来自 - typical

这个库用了大量的 es6 的语法, 也是最近出来的, 想调查一下也是因为它。不过, 到处都是 await, 有点眼花(真的, debug 半天, 全是用 yield 迭代返回, 花里胡哨的!(长见识了 = =)), 核心是 requestAnimationFrame(() => (node.textContent = edit))

打字简历

这就是上述的动态效果的一种展现形式, 通过打字的方式逐渐改变样式, 并且利用一些三方库来达到更加有趣的效果

代码来自 - STRML.net
当然, 就写法上来说, 可以选择高耦合只适合自己, 也可以封装一下, 在外部控制行为

总结

1. 注意一下递归调用的问题

//TODO 1. 递归调用的内存问题 2. 打字简历 3. 润色, 完善, 干, 作业怎么这么多!!