【游戏客户端】如何实现环形进度条

Hello大家好，我是Lampard。好久没写博客了，之前在忙着制作项目的一个大的副本，趁着过年得闲，和大家分享一下制作过程中遇到的一些有趣的问题。今天主要是分享如何在cocos制作一个环形的进度条

(一) ProgressTimer

直线的进度条相信大家通过LoadingBar已经使用得非常熟练了，但是如果有一天，策划想实现一个环形的进度条，那LoadingBar明显就不能满足条件了，这是就得请出我们今天的主角--ProgressTimer

ProgressTimer就是拿一张Sprite精灵图片来作为进度条，然后根据一个百分比属性，实现显示/隐藏图片的一部分区域，达到图形化显示进度的作用。在ProgressTimer里我们可以通过设置进度条属性为ProgressTimerTypeRadial（矩形属性)，即可实现我们的环形的进度条

(二)如何使用ProgressTimer实例化一个进度条

ProgressTimer需要用一个精灵纹理作为参数实例化。然后需要设置其进度条的类型，百分比的比例，锚点的位置，以及旋转的方向等即可

(三)举个栗子

CCSprite *icon =CCSprite::create("Icon.png"); // 用一张图片来创建一个精灵对象 
timer = CCProgressTimer::create(icon);        // 创建ProgressTimer
timer->setType(kCCProgressTimerTypeBar);      // 设置进度条的类型为扇形
timer->setPercentage(100);                      // 设置当前的进度条百分比信息
layer:addChild(timer);                        // 添加到 layer

这样我们已经可以生成一个扇形条，比如我想实现一个倒计时3秒的功能，那么我们只需要启用一个计时器，在3秒内对timer进行setPercent更新，那么我们就可以看到下面的效果

扫描二维码关注公众号，回复： 14698154 查看本文章

只要我们把生成进度条的纹理换成环形的图片，那么就可以实现环形进度条的效果了