egret 示例实战六：延迟操作，实现打字效果

Posted 2020-12-03 wentingc

1.建立TextField对象

 1 /**建立文本对象 */
 2         this.txt = new egret.TextField();
 3         this.txt.size = 24;
 4         this.txt.textColor = 0xffffff;
 5         this.txt.lineSpacing = 10;
 6         this.txt.x = 30;
 7         this.txt.y = 100;
 8         // this.txt.text = ‘1111‘;
 9         this.addChild(this.txt);
10         this.isComplete = true;

2.点击舞台时调用延迟方法

1 Main.instance.stage.addEventListener(egret.TouchEvent.TOUCH_TAP,this.onTap,this);

 1     private num:number = 1;
 2     private backFun(){
 3         this.isComplete = true;
 4         this.num++;
 5     }
 6     private onTap(){
 7         if(this.isComplete){
 8             this.isComplete = false;
 9             this.txtEffect(this.txt,this.num+‘,哈哈哈噢噢噢噢哈哈哈哈单独的啦啦啦啦
‘,150,this.backFun);
10         }   
11     }

3.文字打字效果

 1     /**
 2      * obj  文本对象
 3      * content  文本内容
 4      * interval 打字间隔时间
 5      */
 6     private txtEffect(obj,content:string = ‘‘,interval:number = 200,backFun:Function = null ){
 7         let strArr = content.split(‘‘);
 8         let self = this;
 9         for(let i = 0;i<strArr.length;i++){
10             setTimeout(function(){
11                 obj.appendText(strArr[i]);
12                 if(i == strArr.length - 1 && backFun != null){
13                     self.backFun();
14                 }
15             },interval*i);
16         }
17     }

4.效果