cocos creator实现自定义进度条

在上篇文章我们说到了如何实现原生组件的进度条,我们将复用原来的js


自定义进度条组件分为2个素材,1:进度条外圈,2:进度条内部进度显示

仙士可博客

仙士可博客

仙士可博客最后效果


通过外圈新增sprite组件,固定宽高和排版

仙士可博客


使用内圈素材作为此节点的子节点:

将 type类型改为FILLED,Fill Type改为HORIZONTAL  

注意,宽高需要比外圈小一点,要不然看不到外圈的框

 仙士可博客


之前的文字和原来一样,不做另外说明


脚本编写:

import log = cc.log;

const {ccclass, property} = cc._decorator;

@ccclass
export default class ProgressBar extends cc.Component {
    num = 0;//进度数据
    isShow = false;//是否显示
    show() {
        //显示
        this.isShow = true;
        this.node.active = true;
        cc.find("MainMenu/Mask").active = true;
    }
    hide() {
        //隐藏
        this.isShow = false;
        this.node.active = false;
        cc.find("MainMenu/Mask").active = false;
    }

    update() {
        let progressBar = cc.find('MainMenu/ProgressBar/Inside').getComponent(cc.Sprite);
        progressBar.fillRange = this.num;//更新进度条ui的图
        cc.find('MainMenu/ProgressBar/num').getComponent(cc.Label).string= Math.trunc(this.num*100)+'%';//更新进度条文字
    }
}





仙士可博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论
  • 本站由白俊遥博客程序搭建
    © 2017-1-17 php20.cn 版权所有 ICP证:闽ICP备17001387号
  • 联系邮箱:1067197739@qq.com