mk_framework/assets/script/game/component/ProgressBar.ts

const { ccclass, property } = cc._decorator;

@ccclass
export default class ProgressBar extends cc.Component {
    @property({ type: cc.Sprite, displayName: '进度条背景' })
    blood_1: cc.Sprite = null;

    @property({ type: cc.Sprite, displayName: '进度条动画节点' })
    blood_2: cc.Sprite = null;

    @property(cc.Label)
    lbl_progress: cc.Label = null;

    private maxlen: number;
    private current: number;
    private max: number;
    private tweenSpeed: number = 100;

    onLoad() {
        this.maxlen = this.blood_1.node.width;
    }

    init(current, max) {
        this.current = current;
        this.max = max;
        this.blood_2.node.width = this.maxlen;
        this.updateLabel();
    }

    setProgress(current, tween: boolean = false) {
        let dis = (this.current - current) * this.maxlen / this.max;
        this.current = current;
        let w = current / this.max * this.maxlen;
        if (tween) {
            let t = dis / this.tweenSpeed;
            cc.tween(this.blood_2.node).to(t, { width: w }).start();
        }
        else {
            this.blood_2.node.width = w;
        }

        this.updateLabel();
    }

    updateLabel() {
        if (this.lbl_progress) {
            this.lbl_progress.string = Math.floor(this.current) + "/" + Math.floor(this.max);
        }
    }
}