Egret社区

新手教程-----跑马灯

2018-2-26 18:54
17483
本帖最后由 不会飞的猪 于 2018-2-26 18:58 编辑


今天带来跑马灯的实现方式,新手教程,记住只适用于新手,若有不足之处,大家多多指教~~~~

1.png

首先新建一个exml,如上图:
解决了3个问题:
1、矩形掩码动态裁剪跑马灯内容
2、动态设置lable宽度
lable.wordWrap = true;,这个恶心了我好几个小时
3、lable移动,这个比较简单
接下来代码如下:

/**
* 跑马灯
* zw
*/
class Notice extends BaseClass{
        public constructor() {
                super();
                this.Init();
        }

        private width:number = 0;
        private com: eui.Component;
        private isRunning : boolean = false;
        private allMsg:Array<any>= new Array();
        
        public Init()
        {
                this.com = new eui.Component();
                this.com.skinName = "resource/eui_game/marquee/Marquee.exml";
                this.com.x = GameCenter.StageUtils.getWidth() / 2;
                this.com.y = 100;
                this.com.touchEnabled = false;
                this.com.touchChildren = false;
                let image:eui.Image = <eui.Image>this.com.getChildAt(0);
                this.com.mask =  new egret.Rectangle(0,0,this.com.width,this.com.height);
                this.com.anchorOffsetX = 500;
                this.com.anchorOffsetY = 20;
                this.width = this.com.width;
        }


        public NotifyMsg(msg:string,isRich:boolean = false)
        {
                if(this.isRunning == true)
                {
                        this.allMsg.push({content:msg,isrich:isRich});
                }
                else
                {
                        this.ExcuteMsg(msg,isRich);
                }
               
        }

        private ExcuteMsg(msg:string,isRich:boolean = false)
        {
                let lable:eui.Label = <eui.Label>this.com.getChildAt(1);
                this.isRunning = true;
                lable.wordWrap = true;
                if(isRich == true)
                {
                        lable.textFlow = (new egret.HtmlTextParser).parser(msg);
                }
                else
                {
                        lable.text = msg;
                }
                GameCenter.StageUtils.getUIStage().addChild(this.com);
                egret.Tween.get(lable).to({ x: (lable.x - (lable.width + this.width)) }, 12000).call(() => {
                        lable.x += (lable.width + this.width);
                        lable.text = "";
                        if(this.allMsg.length > 0)
                        {
                                let temp:any = this.allMsg.shift();
                                this.ExcuteMsg(temp.content,temp.isrich);
                        }
                        else
                        {
                                this.isRunning = false;
                                egret.Tween.removeTweens(lable);
                                GameCenter.StageUtils.getUIStage().removeChild(this.com);
                        }
                });
        }
}
最后欢迎大家加群260396379,一起讨论问题哦~~~


分享到 :
0 人收藏

3 个回复

倒序浏览
app小王子  社区管理员 | 2018-2-27 11:13:32
感谢分享。。。
大西几  圆转纯熟 | 2018-10-10 10:52:24

感谢分享。。。
mtyppsh  登堂入室 | 2018-12-24 10:42:41
BaseClass没贴出来emmmm
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号 )

Powered by Discuz! X3.4 © 2001-2019 Comsenz Inc.

返回顶部