×

基于jQuery的text文字显示特效应用

作者:Terry2017.09.06来源:Web前端之家浏览:16140评论:0
关键词:TheaterJS

回顾上篇文章“谈谈Text的一些交互体验”,其中提到文字的特效:打字效果,今天主要分享如何实现这种酷炫的效果。

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

123.png

使用方法

可以使用下面的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方法的参数是以角色的名字为前缀的字符串。它实际上添加了三个场景:

场景名称描述
actorSet the current speaking actor to the passed one.
eraseErase the current speech value.
actorType 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方法接收三个参数:第一个是作用域,第二个是事件,第三个是参数。

案例

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

<!doctype html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>移动支付正在维护中 - Web前端之家</title><meta name="keywords" content="" /><meta name="description" content="" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><link href="/demo/dazi/d1/css/lp228.css" rel="stylesheet" type="text/css"></head><body><script type="text/javascript">
    function recalc() {
        var x = 750,clientWidth = document.body.clientWidth;
        if (!clientWidth) return;
        document.documentElement.style.fontSize = 100 * (clientWidth / x) + 'px';
    };
    if (window.addEventListener) {
        recalc();
        var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
        window.addEventListener(resizeEvt, recalc, false);
    }</script><div class="cen-loading-box">
    <p class="cen-p-fon">移动支付正在维护中,带来不便,敬请谅解</p>
    <p class="cen-p-fon2">请您用<strong>电脑登录客户中心</strong>进行存款</p>
    <div class="cen-comp-box scene">
        <div class="inp-fon" id="vader"></div>
    </div>
    <pre id="nodebug" style="display:none"><code>
      theater.write(        <span id="log"></span>
      );    </code></pre></div><script src="/demo/js/jq.js"></script><script src="/demo/dazi/d1/js/theater.min.js"></script><script type="text/javascript">

    (function () {
        "use strict";
        var $log    = document.querySelector("#log");
        var theater = new TheaterJS();
        theater            .describe("Vader", .8, "#vader");
        theater            .on("*", function (eventName, originalEvent, sceneName, arg) {
                var args  = Array.prototype.splice.apply(arguments, [3]),
                    log   = '{\n      name: "' + sceneName + '"';

                if (args.length > 0) log += ",\n      args: " + JSON.stringify(args).split(",").join(", ");
                log += "\n    }";

                $log.innerHTML = log;
            })
            .on("say:start, erase:start", function (eventName) {
                var self    = this,
                    current = self.current.voice;

                self.utils.addClass(current, "saying");
            })
            .on("say:end, erase:end", function (eventName) {
                var self    = this,
                    current = self.current.voice;

                self.utils.removeClass(current, "saying");
            });

        theater            .write("Vader:Web前端之家", 2000)
            .write(function () { theater.play(true); });
    })();</script></body></html>本段代码来自 https://www.jiangweishan.com/article/textBasicYingyong.html

是不是感觉一目了然了呢。

总结

文字的特效有很多,TheaterJS是我比较喜欢的一种,如果您有更好的,可以分享出来,一起学习探讨!!!记得加入我们前端群295431592。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/TheaterJS.html

网友评论文明上网理性发言 已有0人参与

发表评论: