creator小功能----头像框计时器TimeBar的增加和减少，代码获取和组件绑定的多种实现

在游戏开发中经常会遇到这样一个需求：就是在玩家头像框周围，又个倒计时的TimeBar。

如下面：

那么这个功能，使用creator是怎么实现的呢？

seat_normal_bk是头像底框；

seat_time_bar是进度条框；Type选择filled填充模式，Fill Type选择radial扇形模式，fill center设置成中心0.5，fill start是控制起始点位置的，通过改变fill range来改变进度。

下面简单介绍下Filled模式：

1:  配置Filled模式

2: 配置Filled模式, 设置为Radius参数;

3: 配置Radius的参数模式,

            中心: 位置坐标(0, 1小数), (0, 0)左下脚, (1, 1) 右上角 (0.5, 0.5) 中心点

           Fill Start 开始的位置: 0 ~1, 右边中心点开始，逆时针走

           Fill Range: 填充总量(0, 1];

           FillRange为正，那么就是逆时针，如果为负，那么就是顺时针;

4: 个性化时间进度条案例; 5: 游戏中道具的时间进度显示都可以;

下面看看代码：

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

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //     // ATTRIBUTES:
        //     default: null,        // The default value will be used only when the component attaching
        //                           // to a node for the first time
        //     type: cc.SpriteFrame, // optional, default is typeof default
        //     serializable: true,   // optional, default is true
        // },
        // bar: {
        //     get () {
        //         return this._bar;
        //     },
        //     set (value) {
        //         this._bar = value;
        //     }
        // },

        //获取组件实例2：编辑器绑定
        timeBar: {
            default: null,
            type: cc.Sprite,
        },

        //走完的时间
        act_time: 15,
    },

    // LIFE-CYCLE CALLBACKS:

    onLoad () {
        //获取组件实例1：代码获取
        this.tBar1 = this.getComponent(cc.Sprite);

        this.add_time = 0;
        this.sub_time = this.act_time;
    },

    start () {

    },

    update (dt) {
        //----增加----
        this.add_time += dt;
        var persent = this.add_time / this.act_time;
        if(persent >= 1){
            persent = 1;
            this.add_time = 0;
        }
        //this.tBar1.fillRange = persent;//----1--
        this.timeBar.fillRange = persent;//----2--


        //----减少----
        this.sub_time -= dt;
        var per = this.sub_time / this.act_time;
        if(per <= 0){
            per = 0;
            this.sub_time = this.act_time;
        }
        //this.tBar1.fillRange = per;//------3--
        //this.timeBar.fillRange = per;//----4--
    },
});

this.tBar1 = this.getComponent(cc.Sprite);
是通过代码获取的组件实例

timeBar: {
            default: null,
            type: cc.Sprite,
        },
是通过编辑器绑定获取的组件实例

this.tBar1.fillRange = persent;//----1--

this.timeBar.fillRange = persent;//----2--

是timeBar增长的例子

 this.tBar1.fillRange = per;//------3--

 this.timeBar.fillRange = per;//----4--

是timeBar减少的例子

//----------------------------------------------------------------------------------

另外的一种实现方法

cc.Class({
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...

        action_time: 15,
        clockwise: false, // 是否为顺时针
        reverse: false, // false, 由少变多，否者的话的就是由多变少;

        play_onload: true, // 是否在加载的时候开始倒计时
    },

    // use this for initialization
    onLoad: function () {
        this.now_time = 0;
        this.is_running = false;
        this.node.active = false; 

        this.sprite = this.getComponent(cc.Sprite);
        if (this.play_onload) {
            this.start_clock_action(this.action_time);
        }    
    },


    start_clock_action: function(action_time, end_func) {
        if (action_time <= 0) {
            return;
        }

        this.end_func = end_func;

        this.node.active = true;
        this.action_time = action_time;
        this.now_time = 0;
        
        this.is_running = true;
    },

    stop_clock_action: function() {
        this.node.active = false;
        this.is_running = false;
    },
    
    // called every frame, uncomment this function to activate update callback
    update: function (dt) {
        if (!this.is_running) {
            return;
        }

        this.now_time += dt;
        var per = this.now_time / this.action_time;
        if (per > 1) { // 结束了，超时了
            per = 1;
            this.is_running = false;
            if (this.end_func) {
                this.end_func();
            }
            
        }
        
        if (this.reverse) {
            per = 1 - per;
        }

        if (this.clockwise) {
            per = -per;
        }
        this.sprite.fillRange = per;
    },
});