Egret 滚动背景图的实现

最终的示例:

实现思路就是两张图的一个循环调换位置的过程

A/B其中一张超出视图区域就立刻调转位置

 向左侧移动

 

 

 

A向后移动

 

 

 

对于timer和帧事件的选择:

TimerEvent.TIMER，从Timer的参数就可以看出来，当一个函数执行完成后再Delay多久。

所以如果针对每一帧进行操作的话，最好用Event.ENTER_FRAME，否则用TimerEvent.TIMER

使用ENTER_FRAME:

this.addEventListener(egret.Event.ENTER_FRAME, () => { }, this);

 尝试了一下用for循环去处理图片 , 没有报错 , 但是UI界面没有成功绘制

namespace ui {
    export class GameSenceBg extends eui.Component {
        constructor() {
            super();
            this.addEventListener(eui.UIEvent.ADDED_TO_STAGE, this.BgInit, this)
        }
        private BgInit() {
            this.addEventListener(egret.Event.ENTER_FRAME, () => {
                this.BG1.$children[0].x -= 5
                this.BG1.$children[1].x -= 5
                if (this.BG1.$children[0].x <= -640) {
                    this.BG1.$children[0].x = 640
                }
                if (this.BG1.$children[1].x <= -640) {
                    this.BG1.$children[1].x = 640
                }
                this.BG2.$children[0].x -= 2
                this.BG2.$children[1].x -= 2
                if (this.BG2.$children[0].x <= -640) {
                    this.BG2.$children[0].x = 640
                }
                if (this.BG2.$children[1].x <= -640) {
                    this.BG2.$children[1].x = 640
                }
                this.BG3.$children[0].x -= 1
                this.BG3.$children[1].x -= 1
                if (this.BG3.$children[0].x <= -640) {
                    this.BG3.$children[0].x = 640
                }
                if (this.BG3.$children[1].x <= -640) {
                    this.BG3.$children[1].x = 640
                }
            }, this);
        }
        private BG1: eui.Group;
        private BG2: eui.Group;
        private BG3: eui.Group;
    }
}