admin管理员组

文章数量:815290

cocos 扇形进度条

原文链接: cocos 扇形进度条

上一篇: cocos 简单时钟

下一篇: cocos 随机变色的拖尾

效果

主要是使用进度条组件, 动态设置start和range

代码比较简单, 但是cocos的设置比较麻烦

最外层用一个mask, 将方形剪裁成圆形, 不过最好让UI出个图

进度条的设置, 主要设置中心点, 不然是用矩形顶点进行旋转的, 设置填充方式和开始位置, 全部长度等, 不然是矩形那种从上到下的填充

代码

const { ccclass, property } = cc._decorator;@ccclass
export default class NewClass extends cc.Component {@property(cc.Node)bar: cc.Node = null;onLoad() {const pb = this.bar.getComponent(cc.ProgressBar);console.log(pb);console.log(pb.progress);const sp = this.bar.getComponent(cc.Sprite);setTimeout(() => {// 设置起始位置sp.fillStart = 0.2;pb.progress = 0.5;setInterval(() => {pb.progress += 0.01;if (pb.progress >= 1) {pb.progress = sp.fillStart = 0;}}, 100);}, 1000);}
}

本文标签: cocos 扇形进度条