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

可以使用下面的js代码来调用TheaterJS制作打字机效果。回顾上篇文章“谈谈Text的一些交互体验”,其中提到文字的特效:打字效果,今天主要分享如何实现这种酷炫的效果。

我们需要用到一款插件:TheaterJS。TheaterJS能逼真模拟打字特效应用。

使用方法

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

vartheater=newTheaterJS();theater.describe("Vader",.8,"#vader").describe("Luke",.6,"#luke");theater.write("Vader:Luke.",600).write("Luke:What?",400).write("Vader:Iam...",400,"yourfather.");theater.on("say:start,erase:start",function(){//addblinkingcaret}).on("say:end,erase:end",function(){//removeblinkingcaret}).on("*",function;

多重角色

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

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

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

voice可以是两种类型:

可以使用下面的js代码来调用TheaterJS制作打字机效果。一个HTML元素,元素的innerHTML将被用于设置voice。

可以使用下面的js代码来调用TheaterJS制作打字机效果。用4个参数调用的函数:

newValue:新的speech值。

newChar:新的打印字符。

prevChar:前一个字符。

speech:所有的speech。

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

创作剧本

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

theater.write("Vader:Iamyourfather.").write("Forreal....").write.write{/*dosomething*/});

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

theater.write("Vader:Hello!").write("Howareyoudoing?");

theater.write("Vader:Hello!","Howareyoudoing?");

设置 actor 和 speech

theater.write("Vader:Iamyourfather.");

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

场景名称描述

actorSet the current speaking actor to the passed one.eraseErase the
current speech value.actorType the speech.场景对象

theater.write("Vader:Iamyourfather.").write("Forreal....").write.write{/*dosomething*/});

theater.write({name:"actor",args:["Vader"]}).write({name:"erase",args:[]}).write({name:"say",args:["Iamyourfather."]}).write({name:"say",args:["Forreal...."]}).write({name:"erase",args:[-1]}).write({name:"wait",args:[600]}).write({name:"call",args:[function;

事件

TheaterJS有一些内置的事件。

theater.on("say:start",function{console.log("asayscenestarted");}).on("say:end",function{console.log("asaysceneended");});

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

theater.on("say:start,erase:start",function{//addblinkingcaret}).on("say:end,erase:end",function(){//removeblinkingcaret});

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

公共方法

theater.emit("scope","event",["your","arguments","go","here"]).emit("customEvent",["youmightnotneedtheeventpart"]);

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

案例

掌握上面的基础知识,我们再回顾下上篇文章的例子:

移动支付正在维护中-Web前端之家functionrecalc(){varx=750,clientWidth=document.body.clientWidth;ifreturn;document.documentElement.style.fontSize=100*+'px';};if(window.addEventListener){recalc();varresizeEvt='orientationchange'inwindow?'orientationchange':'resize';window.addEventListener(resizeEvt,recalc,false);}移动支付正在维护中,带来不便,敬请谅解请您用电脑登录客户中心进行存款theater.write();

{“usestrict”;var$log=document.querySelector;vartheater=newTheaterJS();theater.describe(“Vader”,.8,”#vader”);theater.on(“*”,function(eventName,originalEvent,sceneName,arg){varargs=Array.prototype.splice.apply,log='{\nname:”‘+sceneName+'”‘;iflog+=”,\nargs:”+JSON.stringify.split.join;log+=”\n}”;$log.innerHTML=log;}).on(“say:start,erase:start”,function{varself=this,current=self.current.voice;self.utils.addClass(current,”saying”);}).on(“say:end,erase:end”,function{varself=this,current=self.current.voice;self.utils.removeClass(current,”saying”);});theater.write(“Vader:Web前端之家”,2000).write{theater.play;

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图