逼真的js打字机效果插件

当前位置:主页 > jQuery库 > 文本和超链接 > 逼真的js打字机效果插件
逼真的js打字机效果插件
分享:

    插件介绍

    TheaterJS十一款逼真模拟打字特效的js打字机效果插件。该js打字机效果通过参数设置来模拟一系列的打字机打字过程,打字效果十分逼真,可以设置回退、互动等特效。

    浏览器兼容性

    浏览器兼容性
    时间:01-13
    阅读:
简要教程

TheaterJS是一款模拟打字机效果的js打字机效果插件。

使用方法

可以使用下面的js代码来调用TheaterJS制作打字机效果:

var theater = new TheaterJS();

theater
  .describe("Vader", .8, "#vader")
  .describe("Luke", .6, "#luke");

theater
  .write("Vader:Luke.", 600)
  .write("Luke:What?", 400)
  .write("Vader:I am...", 400, " your father.");

theater
  .on("say:start, erase:start", function () {
    // add blinking caret
  })
  .on("say:end, erase:end", function () {
    // remove blinking caret
  })
  .on("*", function () {
    // do something
  });
                
多重角色

使用TheaterJS,你可以建立多个角色,每个角色都有自己的“经验”,它们使用这些“经验”可以互相“交谈”。

theater.describe("Vader", .8, "#vader");
                

上面的代码描述了一个新的角色,名字叫“Vader”,它的“经验”值为0.8(必须是0-1之间),它的voice是“#vader”。voice将用于打印的文字,Vader是一个html元素。

voice可以是两种类型:

  • 一个HTML元素(或一个CSS选择器),元素的innerHTML将被用于设置voice。
  • 用4个参数调用的函数:
    • newValue:新的speech值。
    • newChar:新的打印字符。
    • prevChar:前一个字符。
    • speech:所有的speech。

注意:当TheaterJS调用了这些函数,上下文this被设置为当前对象。

创作剧本

TheaterJS实际上是在创建一个剧本。

theater
  .write("Vader:I am your father.")
  .write(" For real....")
  .write(-1)
  .write(600)
  .write(function () { /* do something */ });
                

注意:write方法接收不定数量的参数。

theater
  .write("Vader:Hello!")
  .write("How are you doing?");
                

等效于

theater.write("Vader:Hello!", "How are you doing?");
                
设置 actor 和 speech
theater.write("Vader:I am your father.");
                

write方法的参数是以角色的名字为前缀的字符串。它实际上添加了三个场景:

场景名称 描述
actor Set the current speaking actor to the passed one.
erase Erase the current speech value.
actor Type the speech.
场景对象
theater
  .write("Vader:I am your father.")
  .write(" For real....")
  .write(-1)
  .write(600)
  .write(function () { /* do something */ });
              

它等效于

theater
  .write({ name: "actor", args: ["Vader"] })
  .write({ name: "erase", args: [] })
  .write({ name: "say", args: ["I am your father."] })
  .write({ name: "say", args: [" For real...."] })
  .write({ name: "erase", args: [-1] })
  .write({ name: "wait", args: [600] })
  .write({ name: "call", args: [function () { /* do something */ }] });
              
事件

TheaterJS有一些内置的事件。

theater
    .on("say:start", function (event, args...) {
      console.log("a say scene started");
    })
    .on("say:end", function (event, args...) {
      console.log("a say scene ended");
    });
              

: 之前的值是事件的作用域,其它部分是事件本身。要添加一个事件监听,可以使用逗号隔开它们。

theater
  .on("say:start, erase:start", function (event) {
    // add blinking caret
  })
  .on("say:end, erase:end", function () {
    // remove blinking caret
  });
              

如果你想监听所有的事件,使用theater.on("*", function (event, realEvent, args...) {});方法。

公共方法
theater
  .emit("scope", "event", ["your", "arguments", "go", "here"])
  .emit("customEvent", ["you might not need the event part"]);
              

emit方法接收三个参数:第一个是作用域,第二个是事件,第三个是参数。

更多详细信息请参考:https://github.com/Zhouzi/TheaterJS