egret(白鹭引擎)实现跑马灯效果
ChrisXie Lv5

文字跑马灯实现过程

主要使用egret.Event.ENTER_FRAME监听文本,在motionNotice函数内通过判文字宽度是否到尾部再回滚到-900;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
private mainMarquee:eui.Label;
private marquees(): void { // 跑马灯
this.mainMarquee = new eui.Label();
this.addChildAt(this.mainMarquee, 30);
this.mainMarquee.y = 25;
this.mainMarquee.x = 91;
this.mainMarquee.height = 50;
this.mainMarquee.textColor = 0xe7be80;
this.mainMarquee.fontFamily = "Verdana";
this.mainMarquee.verticalAlign = "middle";
this.mainMarquee.text = "egret(白鹭引擎)实现跑马灯效果egret(白鹭引擎)实现跑马灯效果egret(白鹭引擎)实现跑马灯效果";
this.mainMarquee.size = 20;
this.mainMarquee.scrollRect = new egret.Rectangle(0, 0, 900, this.mainMarquee.height);
this.addEventListener(egret.Event.ENTER_FRAME, this.motionNotice, this);
}

private motionNotice(e: egret.Event): void {
this.mainMarquee.scrollRect.x++;
if (this.mainMarquee.scrollRect.x >= this.mainMarquee.textWidth) {
this.mainMarquee.scrollRect.x = -900;
}
this.mainMarquee.scrollRect = this.mainMarquee.scrollRect;
}

如果需要一个滚动的背景也是可以相同的方式添加的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private addGB():void{
this.bgBitmap = new egret.Bitmap(RES.getRes("catrbg_png"));
this.addChild(this.bgBitmap);
this.bgBitmap.y = 0;
this.bgBitmap.x = 0;
this.bgBitmap.scrollRect = new egret.Rectangle(0, 0, 640, this.bgBitmap.height);
this.addEventListener(egret.Event.ENTER_FRAME, this.bgNotices, this);
}
private bgBitmap: egret.Bitmap;
private bgNotices(e: egret.Event): void {
this.bgBitmap.scrollRect.x++;
if (this.bgBitmap.scrollRect.x >= this.bgBitmap.width) {
this.bgBitmap.scrollRect.x = -640;
}
this.bgBitmap.scrollRect = this.bgBitmap.scrollRect;
}
 评论
相关文章
标签云 更多