CocosCreator 老虎機效果

代碼邏輯：執行Test 播放動畫，網頁也上效果不理想，再優化一版本

import { LoopItem } from "../../UI/Film/UI_FilmSelectScript";

const { ccclass, property } = cc._decorator;


@ccclass
export default class LoopSlide extends cc.Component {

    //224 爲圖片的高度
    private perMoveDis: number = -224 / 3
    private inertia: boolean = false;
    private brakeSpeed: number = 1;
    private movedeltaY: number = 9 * 3 + 1
    private solot_index: number

    @property(cc.Sprite)
    public img_1: cc.Sprite
    @property(cc.Sprite)
    public img_2: cc.Sprite
    @property(cc.Sprite)
    public img_3: cc.Sprite

    //中間一個
    img_cover: cc.Sprite

    private btnArr: cc.Sprite[] = [];

    start() {
        let parent: cc.Node = this.node.getChildByName("content")
        this.Init(parent, new cc.Vec2(400, -400), new cc.Vec2(500, 400))
    }

    public Test() {
        this.PlayAnimation()
        this.img_cover = this.img_1
    }

    PlayAnimation() {
        this.inertia = true
    }


    /**
     * 
     * @param itemParent 
     */
    public Init(itemParent: cc.Node, _yRange: cc.Vec2, _size: cc.Vec2) {
        this.btnArr.push(this.img_1)
        this.btnArr.push(this.img_2)
        this.btnArr.push(this.img_3)
        for (let i = 0; i < this.btnArr.length; i++) {
            let loopItem = this.btnArr[i].node.addComponent(LoopItem)
            loopItem.itemidx = 0
        }
    }

    update(dt) {
        dt = 1
        if (this.inertia) {
            if (this.movedeltaY > 0) {
                this.ruleReduceDeltaY(dt);
            }
            else if (this.movedeltaY < 0) {
                this.ruleAddDeltaY(dt);
            }
        }
    }

    private ruleAddDeltaY(dt: number) {
        this.movedeltaY += dt * this.brakeSpeed;
        if (this.movedeltaY < 5) {
            this.img_2.spriteFrame = this.img_cover.spriteFrame
        }
        if (this.movedeltaY > 0) {
            this.inertia = false;
            this.movedeltaY = 0;
            this.MoveStop()
        }
        else {
            this.movePosition(this.perMoveDis)
        }
    }

    private ruleReduceDeltaY(dt: number) {
        this.movedeltaY -= dt * this.brakeSpeed;
        if (this.movedeltaY < 5) {
            this.img_2.spriteFrame = this.img_cover.spriteFrame
        }

        if (this.movedeltaY < 0.01) {
            this.inertia = false;
            this.movedeltaY = 0;
            this.MoveStop()
        }
        else {
            this.movePosition(this.perMoveDis)
        }
    }
    private movePosition(y: number) {
        y = this.perMoveDis
        if (y > 0) {
            this.btnArr.forEach(element => {
                element.node.setPositionY(element.node.position.y + y);
            });
            let maxidx: number = 0;
            let miny: number = this.btnArr[0].node.position.y
            let maxy: number = this.btnArr[0].node.position.y
            for (let index = 1; index < this.btnArr.length; index++) {
                let element = this.btnArr[index];
                if (miny > element.node.y) {
                    miny = element.node.y;
                }
                if (maxy < element.node.y) {
                    maxy = element.node.y;
                    maxidx = index;
                }
            }
            if (maxy > 224) {
                this.btnArr[maxidx].node.setPositionY(miny - 224);
                let operationcell: LoopItem = this.btnArr[maxidx].node.getComponent(LoopItem)
                let idx: number = operationcell.itemidx;
                idx = idx + 1;
                if (idx > 3) {
                    idx = 1;
                }
                operationcell.refreshCellData(idx);
            }
        }
        else if (y < 0) {
            this.btnArr.forEach(element => {
                element.node.setPositionY(element.node.position.y + y);
            });
            let minidx: number = 0;
            let miny: number = this.btnArr[0].node.position.y
            let maxy: number = this.btnArr[0].node.position.y
            for (let index = 1; index < this.btnArr.length; index++) {
                let element = this.btnArr[index];
                if (miny > element.node.y) {
                    miny = element.node.y;
                    minidx = index;
                }
                if (maxy < element.node.y) {
                    maxy = element.node.y;
                }
            }
            if (miny < -224) {
                this.btnArr[minidx].node.setPositionY(maxy + 224);
                let operationcell: LoopItem = this.btnArr[minidx].node.getComponent(LoopItem)
                let idx: number = operationcell.itemidx;
                idx = idx - 1;
                if (idx < 1) {
                    idx = 3;
                }
            }
        }
    }

    MoveStop() {
        let moveDown1 = cc.moveTo(0.05, new cc.Vec2(0, -40))
        let moveUp2 = cc.moveTo(0.1, new cc.Vec2(0, 0))
        let moveDown3 = cc.moveTo(0.05, new cc.Vec2(0, -20))
        let moveUp4 = cc.moveTo(0.1, new cc.Vec2(0, 0))
        let callBack = cc.callFunc((target, data) => {

        })
        console.error("-------MoveStop-------")
        this.img_1.node.parent.runAction(cc.sequence(moveDown1, moveUp2, moveDown3, moveUp4, callBack))
    }

}

export class SlideCell extends cc.Component {
    index: number

    refreshCellData(p_index: number) {
        this.index = p_index
    }
}