box-client/assets/script/launch/view/UpdateProgress.js

// 更新进度条
cc.Class({
    editor: {
        menu: 'Launch/UpdateProgress'
    },

    extends: cc.Component,

    properties: {
        backgroundSprite: cc.Sprite,
        progressSprite: cc.Sprite,
        statusSprite: cc.Sprite,
        progressLabel: cc.Label,
        glowSprite: cc.Sprite,
        atlas: cc.SpriteAtlas
    },

    onLoad () {
        this.status = JMC.UPDATE_STATUS.UNSTART;
        this.downloadedBytes = 0;
        this.totalBytes = 0;

        // 背景
        this.backgroundSpriteMap = {};
        this.backgroundSpriteMap[JMC.UPDATE_STATUS.UNSTART] = 'launch_update_progress_green_bg';
        this.backgroundSpriteMap[JMC.UPDATE_STATUS.DOWNLOADING] = 'launch_update_progress_green_bg';
        this.backgroundSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_PAUSE] = 'launch_update_progress_red_bg';
        this.backgroundSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FINISHED] = 'launch_update_progress_green_bg';
        this.backgroundSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FAILED] = 'launch_update_progress_red_bg';

        // 进度条
        this.progressSpriteMap = {};
        this.progressSpriteMap[JMC.UPDATE_STATUS.UNSTART] = 'launch_update_progress_green_long';
        this.progressSpriteMap[JMC.UPDATE_STATUS.DOWNLOADING] = 'launch_update_progress_green_long';
        this.progressSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_PAUSE] = 'launch_update_progress_red_long';
        this.progressSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FINISHED] = 'launch_update_progress_green_long';
        this.progressSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FAILED] = 'launch_update_progress_red_long';

        // 状态标示
        this.statusSpriteMap = {};
        this.statusSpriteMap[JMC.UPDATE_STATUS.UNSTART] = '';
        this.statusSpriteMap[JMC.UPDATE_STATUS.DOWNLOADING] = 'launch_update_icon_down_jt';
        this.statusSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_PAUSE] = 'launch_update_icon_stop';
        this.statusSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FINISHED] = 'launch_update_icon_finish';
        this.statusSpriteMap[JMC.UPDATE_STATUS.DOWNLOAD_FAILED] = 'launch_update_icon_error';
    },

    onEnable () {
        this.reloadView();
    },

    reloadView () {
        let percent = (this.totalBytes == 0) ? 0 : this.downloadedBytes / this.totalBytes;
        let percentStr = Math.floor((percent) * 100);

        this.progressSprite.fillRange = percent;

        let downloadedMb = G.UpdateUtils.bytesToMb(this.downloadedBytes).toFixed(1);
        let totalMb = G.UpdateUtils.bytesToMb(this.totalBytes).toFixed(1);
        this.progressLabel.string = `${percentStr}% (${downloadedMb}M/${totalMb}M)`;

        this.backgroundSprite.spriteFrame = this.atlas.getSpriteFrame(this.backgroundSpriteMap[this.status]);
        this.progressSprite.spriteFrame = this.atlas.getSpriteFrame(this.progressSpriteMap[this.status]);
        this.statusSprite.spriteFrame = this.atlas.getSpriteFrame(this.statusSpriteMap[this.status]);
        this.statusSprite.node.x = this.progressLabel.node.x - this.progressLabel.node.width / 2 - this.statusSprite.node.width / 2;
    },

    setDownloadStatus (status) {
        this.status = status;
    },

    setProgress (downloadedBytes, totalBytes) {
        this.downloadedBytes = downloadedBytes;
        this.totalBytes = totalBytes;
        this.reloadView();
    },

    doFinishAnim () {
        if (!this.glowSprite)
            return;

        this.glowSprite.opacity = 0;
        let anim = cc.tween()
            .to(1, {opacity: 0})
            .to(1, {opacity: 255});
        cc.tween(this.glowSprite)
            .repeat(3, anim)
            .start();
    }
});