TheaterJS：模仿人类打字效果的 JavaScript 动画特效

TheaterJS是一个用于模拟人输入行为的JS库。

下面是一个简单完整的Demo，模拟了两个角色（Vader、luke）的对话，可以打开看一下运行效果和代码，然后复制代码到自己的项目中，试一试。

https://codepen.io/Zhouzi/pen/JoRazP

首先进行准备工作：

1、安装依赖npm install theaterjs
2、在你要写代码的页面引入theaterjs插件import theaterJS from 'theaterjs'

接下来开始看一下代码：

HTML:

<div class="body">
    <main class="scene">
      <!-- 此处有两个角色，vader和luke -->
      <div class="actor">
        <div class="actor__prefix">-</div>
        <div id="vader" class="actor__content"></div>
      </div>
      <div class="actor">
        <div class="actor__prefix">-</div>
        <div id="luke" class="actor__content"></div>
      </div>
    </main>
  </div>

CSS:(只有一部分)

.dark {
  color: $color-white;
  background-color: $color-black;
}
.actor__content--typing::after {//添加打字和删除时的光标
  content: '|';
  animation: blink 500ms infinite;
}

JS:

mounted(){
    //1,初始化一个theaterJS对象
    var theater = theaterJS()    
    //2,将演员添加到选角中。
    theater
      .addActor('vader', { speed: 0.8, accuracy: 0.6 })
      .addActor('luke')
    //3,将场景添加到场景中，options.autoplay为true，则播放场景。
    theater
      .addScene('vader:Luke.', 600)
      .addScene('luke:What?', 400)
      .addScene('vader:I am your father.', 400)
      .addScene('luke:Nooo...', -3, '!!! ', 600, 'No! ', 600)
      .addScene('luke:That\'s not true!', 600)
      .addScene('luke:That\'s impossible!', 400)
      .addScene('vader:Search your feelings.', 1600)
      .addScene('vader:You know it to be true.', 1000)
      .addScene('luke:Noooooooo! ', 600, 'No!', 400)
      .addScene('vader:Luke.', 600)
      .addScene('vader:You can destroy the Emperor.', 1600)
      .addScene('vader:He has foreseen this. ', 800)
      .addScene('vader:It is your destiny.', 1600)
      .addScene('vader:Join me.', 800)
      .addScene('vader:Together we can rule the galaxy.', 800)
      .addScene('vader:As father and son.', 1600)
      .addScene('vader:Come with me. ', 800)
      .addScene('vader:It is the only way.', 2000)
      .addScene(theater.replay.bind(theater))
    //4，添加在发出事件时执行的回调( ( 当场景开始/结束时、) )。
    //效果是当打字（type）和删除（erase）开始时，显示光标
    //当打字（type）和删除（erase）结束时，移除光标。
    //当vader打字（type）时，
    theater
      .on('type:start, erase:start', function () {
        theater.getCurrentActor().$element.classList.add('actor__content--typing')
      })
      .on('type:end, erase:end', function () {
        theater.getCurrentActor().$element.classList.remove('actor__content--typing')
      })
      .on('type:start, erase:start', function () {
        if (theater.getCurrentActor().name === 'vader') {
          document.body.classList.add('dark')
        } else {
          document.body.classList.remove('dark')
        }
      })
  },

先来了解几个单词的意思：

theater：戏剧；
type：打字；
erase：清除；

1、TheaterJS

需要提供一些选项来创建一个新的TheaterJS对象。
var theater = theaterJS(<options>)
参数默认描述{autoplay, locale, minSpeed, maxSpeed}

选项	默认	描述
autoplay	true	如果为true，则自动播放场景（调用addScene时）
locale	detect	确定在键入随机字符（错误）时使用哪个键盘。注意："detect"是一种检测用户的语言环境并在受支持的情况下使用的选项。
minSpeed	{erase:80, type: 80 }	每个键入字符之间的最小延迟（越低，速度越快）。
maxSpeed	{erase:450, type: 450 }	每个键入的字符之间的最大延迟（越大，越慢）。

注意：obj1等效于obj2。

let obj1 = {
  "minSpeed "：80，
  "maxSpeed"：450 
}
let obj2 = {
   "minSpeed "：{
     "erase"：80，
     "type"：80
  },
  
  "maxSpeed"：：{
     "erase"： 450，
     "type"： 450
  }
}

TheaterJS对象具有两个公共（只读）属性：

theater.options：对象的选项。
theater.status：对象的状态（“正在播放”，“正在停止”或“准备就绪”）。

2、addActor

将演员添加到演员表中。

theater.addActor(<name>, <options>, <callback>)

参数默认描述

参数	默认	描述
name		用于标识角色的名称
options	0.8	accuracy （0到1之间的数字）：用来决定演员犯错误的频率。speed （0到1之间的数字）：用于确定actor打字的速度。
callback		角色的显示值更改时调用的函数。

注意：actor回调是在设置其显示值时调用的函数。它也可以是字符串，在这种情况下，TheaterJS将假定它是DOM选择器并查找相应的元素。然后，当值更改时，将设置元素的innerHTML。如果为目标元素指定了具有参与者名称的id，则可以放心地忽略此参数。

theater.addActor('vader')
//在这种情况下，TheaterJS将查找 #vader 元素的元素。 另外，当使用选择器字符串时，actor将有一个引用DOM元素的附加 $element 属性。

3、addScene

将场景添加到场景中，如果 options.autoplay 为 true，则播放场景。

theater.addScene(<scene>)

<scene>有五种类型

theater
.addScene('vader:Luke...') //擦除演员显示值的当前值，然后键入新值。
.addScene(800) //在播放下一个场景之前，先中断800毫秒。
.addScene('I am your father!') //将值追加到参与者值的当前显示。
.addScene(-7) //擦除7字符。
.addScene(fn) //调用fn，它接收完成的回调作为第一个参数( 调用 done() 将播放场景中的下一个场景)。

注意，addScene实际上接受了无限数量的参数，因此你可以执行以下操作：

theater
. addScene('vader:Luke... ', 800, 'I am your father!')
. addScene(-7, 'mother!')
. addScene(fn)

4、监听事件

添加在发出事件时执行的回调( ( 当场景开始/结束时的比如 ) )。

theater.on(<eventName>, <callback>)

例子：

theater
      .on('type:start, erase:start', function () {
        theater.getCurrentActor().$element.classList.add('actor__content--typing')
      })
      .on('type:end, erase:end', function () {
        theater.getCurrentActor().$element.classList.remove('actor__content--typing')
      })
      .on('type:start, erase:start', function () {
        if (theater.getCurrentActor().name === 'vader') {
          document.body.classList.add('dark')
        } else {
          document.body.classList.remove('dark')
        }
      })