tween-egret.Ease

各種緩動動畫型態圖解

class Main extends eui.UILayer {

    protected createChildren(): void {
        super.createChildren();
        egret.lifecycle.onPause = () => egret.ticker.pause();
        egret.lifecycle.onResume = () => egret.ticker.resume();
        egret.registerImplementation('eui.IAssetAdapter', new AssetAdapter());
        egret.registerImplementation('eui.IThemeAdapter', new ThemeAdapter());
        this.runGame();
    }

    private async loadResource() {
        let loadingView = this.stage.addChild(new LoadingUI()) as LoadingUI;
        await RES.loadConfig('resource/default.res.json', 'resource/');
        await new Promise(resolve => new eui.Theme('resource/default.thm.json', this.stage).once(eui.UIEvent.COMPLETE, resolve, this));
        await RES.loadGroup('preload', 0, loadingView);
        this.stage.removeChild(loadingView);
    }

    private async runGame() {
        await this.loadResource();
        // --- Edwin 給你最乾淨的程式碼, 從這行以下開始寫喔 ---

        // 設置 fps 影格速率
        egret.MainContext.instance.stage.frameRate = 60;

        // 排列所有緩動動畫模式
        // 每個 Ease 圖塊水平座標為時間, 垂直座標為位移
        for (let i = 0; i < 24; i++) {
            let x = 220 * (i % 3);
            let y = 140 * ~~(i / 3); // ~~ 表示去掉小數位
            this.addChild(new EaseFuncGraphic(x, y, i));
            await new Promise(resolve => setTimeout(resolve, 1000)); // 暫停 1 秒
        }

    }

}

// 枚舉宣告
enum EaseType {
    backIn,
    backInOut,
    backOut,
    bounceIn,
    bounceInOut,
    bounceOut,
    circIn,
    circInOut,
    circOut,
    cubicIn,
    cubicInOut,
    cubicOut,
    elasticIn,
    elasticInOut,
    elasticOut,
    quadIn,
    quadInOut,
    quadOut,
    quintIn,
    quintInOut,
    quintOut,
    sineIn,
    sineInOut,
    sineOut
}

// 自定義組建
class EaseFuncGraphic extends eui.Component {

    constructor(x: number, y: number, easeType: EaseType, txSpeed: number = 3) {
        super();
        this.x = x;
        this.y = y;

        // background
        const bg = new eui.Rect;
        bg.fillColor = 0xFFFFFF;
        bg.fillAlpha = .7;
        bg.width = 200;
        bg.height = 120;
        this.addChild(bg);

        // line to draw
        const shp = new egret.Shape;
        shp.graphics.lineStyle(1);
        shp.graphics.moveTo(0, 120);
        this.addChild(shp);

        // animation pointer
        const pointer = new egret.Shape;
        pointer.graphics.beginFill(0xFFCC00, .5);
        pointer.graphics.drawCircle(0, 0, 5);
        pointer.graphics.endFill();
        pointer.visible = false;
        this.addChild(pointer);

        // display ease name
        const label = new eui.Label(EaseType[easeType]);
        label.textColor = 0;
        label.size = 15;
        this.addChild(label);

        // time
        let tx = 0;
        let flag = false;

        // tween
        const params = {
            loop: true, onChange: () => {
                if (flag) return;
                tx += txSpeed;
                shp.graphics.lineTo(tx, pointer.y);
                if (pointer.y == 20) {
                    flag = true;
                    pointer.visible = true;
                }
            }
        }
        egret.Tween.get(pointer, params).set({ x: 190, y: 120 }).to({ y: 20 }, 1000, egret.Ease[EaseType[easeType]]);
    }
}