CocosCreator 转盘效果

游戏大转盘逻辑,通过代码控制转盘的 加速、高速、减速三个状态,方便调整效果。
如果是unity可以采用animtion来调整动画节奏。cocosCreator暂时还没找到对应的ApI
以下是代码逻辑:

// Learn TypeScript:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/typescript.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - [Chinese] http://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html
//  - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html

const { ccclass, property } = cc._decorator;

@ccclass
export default class UITurnplateAnimation {

    isPlay: boolean = false

    /**显示旋转结果回调 */
    private OnEndCallBack: Function

    /**加速转圈数
    finalAngle: number = 0

    /** 转动状态 1:加速  2:减速  **/
    wheelState: number = 0

    /** 当前速度 **/
    curSpeed: number = 2

    /**当前旋转值 **/
    curRotation: number = 0

    /**最大旋转速度 **/
    maxSpeed: number = 30

    /**加速度 **/
    acc = 1

    /**减速转券数 **/
    decAngle: number = 1 * 360

    /**加速转券数 **/
    accAngle: number = 1 * 360

    /**是否回弹 **/
    springback: boolean = false

    /**最近一格的角度 **/
    private gearAngle = 360 / 6

    /** 最终旋转角度 */
    private finalAngle: number

    /**目标旋转对象**/
    private targetNode: cc.Node

    private maxSpeedRun: boolean = true


    StartRun(rotationNode: cc.Node, finalAngle: number, cellNum: number, endCallBack) {
        this.isPlay = true
        this.targetNode = rotationNode

        this.gearAngle = 360 / cellNum
        this.OnEndCallBack = endCallBack

        this.finalAngle = finalAngle + this.accAngle

        if (this.springback) {
            this.finalAngle += this.gearAngle;
        }
        this.maxSpeed = 30
        this.wheelState = 1
        this.curSpeed = 2
        this.curRotation = this.curRotation % 360
        this.targetNode.rotation = this.curRotation
        this.maxSpeedRun = true
    }

    update(dt) {
        if (this.isPlay) {
            if (this.wheelState == 1) {
                this.curRotation = this.targetNode.rotation + this.curSpeed;
                this.targetNode.rotation = this.curRotation
                if (this.curSpeed <= this.maxSpeed) {
                    this.curSpeed += this.acc;
                }
                else {
                    if (this.maxSpeedRun) {
                        //console.log(".....最大速度旋转2圈")
                        this.finalAngle += 360 * 1
                        this.maxSpeedRun = false
                    }

                    if (this.curRotation <= this.finalAngle) {
                        return;
                    }
                    // cc.log('....开始减速');
                    //设置目标角度
                    this.maxSpeed = this.curSpeed;
                    this.targetNode.rotation = this.finalAngle;
                    this.wheelState = 2;
                }
            }
            else if (this.wheelState == 2) {
                // cc.log('......减速');
                var curRo = this.targetNode.rotation; //应该等于finalAngle
                var hadRo = curRo - this.finalAngle;
                this.curSpeed = this.maxSpeed * ((this.decAngle - hadRo) / this.decAngle) + 0.2;
                this.targetNode.rotation = curRo + this.curSpeed;

                if ((this.decAngle - hadRo) <= 0) {
                    //cc.log('....停止');
                    this.wheelState = 0;
                    this.targetNode.rotation = this.finalAngle;
                    if (this.springback) {
                        //倒转一个齿轮
                        var act = cc.rotateBy(0.5, -this.gearAngle);
                        var seq = cc.sequence(cc.delayTime(0.1), act, cc.callFunc(() => {
                            if (this.OnEndCallBack != null) {
                                this.OnEndCallBack();
                                this.OnEndCallBack = null
                            }
                        }, this));
                        this.targetNode.runAction(seq);
                    }
                    else {
                        if (this.OnEndCallBack != null) {
                            this.OnEndCallBack();
                            this.OnEndCallBack = null
                        }
                    }
                }
            }
        }
    }
}


//使用方式:
//this.turnplateAnimation.StartRun(this.img_pointer, rotation, 6, end)
//this.update(dt) 需要在管理中每帧启动调用

猜你喜欢

转载自my.oschina.net/u/698044/blog/2252510