我们在玩大型rpg游戏中，经常可以看到每个人物会有很多的技能，技能在施放的时候，可能需要吟唱一段时间，此时屏幕上会有个水平的时间条计时，当技能施放过后，又有cd时间，即所谓的冷却，这个时候技能槽就会呈现一个扇形转圈的时间倒计时。在cocos2d-html5中，我们依然可以十分轻松的将这个两种时间进度表现出来，就是progressaction。由于篇幅可能比较多，我打算分两次来阐述。
progressaction需要用到两个函数：
1.cc.progressto.create(duration, percent);
duration：进度计时器的时间周期（单次）
percent：进度的百分比
2.cc.progresstimer.create(sprite);
sprite：精灵类的图片
我们先从扇形类型的说起吧。
代码如下：
我要评论
var to1 = cc.progressto.create(5, 100); //定义好经历的时间和百分比
var to2 = cc.progressto.create(8, 100);
var left = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
left.settype(cc.progress_timer_type_radial); //设置进度的类型为扇形
left.setposition(cc.p(size.width/4, size.height / 2));
this.addchild(left);
left.runaction(to1); //执行动作
var right = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
right.settype(cc.progress_timer_type_radial);
right.setreversedirection(true); //设置反方向进行旋转
right.setposition(cc.p(size.width/4*3, size.height / 2));
this.addchild(right);
right.runaction(cc.repeatforever.create(to2));
效果如下：
如果你可以运行起来，你会发现，由于我设置左边的时间为5秒，右边的为8秒，左边会很快执行完，而且左边只执行了一次，右边会一直反复的运动，从这里也可以看出cc.progressto其实是一个action。
下面我调整一下百分比，并且都只执行一次，我们看下结果。
代码如下：
var left = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
left.settype(cc.progress_timer_type_radial); //设置进度的类型为扇形
left.setposition(cc.p(size.width/4, size.height / 2));
this.addchild(left);
left.runaction(cc.progressto.create(5, 70)); //由于progressto是一个动作，为了方便，可以直接写在runaction中
var right = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
right.settype(cc.progress_timer_type_radial);
right.setreversedirection(true); //设置反方向进行旋转
right.setposition(cc.p(size.width/4*3, size.height / 2));
this.addchild(right);
right.runaction(cc.progressto.create(8, 100)); //left的百分比是70，而right是100
效果如下：
可以看到左边会在图片的70%的地方结束，并且这70%所花的时间是5秒，而不是5*70%！
接着我们再看下条形进度计时器。
这里有两个很重要的方法：
setbarchangerate(barchangerate) 设置进度条的方向，即水平或者垂直进度条
setmidpoint(mpoint) 设置进度条的走向，即若为水平方向控制从左到右还是从右到左，若为垂直方向控制从上到下还是从下到上
注：这两个方法的参数都是cc.point类型的，setmidpoint是受限于setbarchangerate参数的，比如水平进度条，setbarchangerate(cc.p(1,0)) ,如x为1，y为0，那么setmidpoint的参数y就不起作用了，只有x可以设置1或者0，0代表从左往右，1代表从右往左。
下面给出水平的进度条代码：
var to1 = cc.progressto.create(5, 100);
var to2 = cc.progressto.create(2, 100);
var left = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
left.settype(cc.progress_timer_type_bar);
left.setbarchangerate(cc.p(1, 0));
left.setmidpoint(cc.p(0, 0));
this.addchild(left);
left.setposition(cc.p(size.width/4, size.height/2));
left.runaction(cc.repeatforever.create(to1));
var right = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
right.settype(cc.progress_timer_type_bar);
right.setbarchangerate(cc.p(1, 0));
right.setmidpoint(cc.p(1, 0));
this.addchild(right);
right.setposition(cc.p(size.width/4*3, size.height/2));
right.runaction(cc.repeatforever.create(to2));
效果如下：
竖直进度条的代码：
var to1 = cc.progressto.create(5, 100);
var to2 = cc.progressto.create(2, 100);
var left = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
left.settype(cc.progress_timer_type_bar);
left.setbarchangerate(cc.p(0, 1));
left.setmidpoint(cc.p(0, 0));
this.addchild(left);
left.setposition(cc.p(size.width/4, size.height/2));
left.runaction(cc.repeatforever.create(to1));
var right = cc.progresstimer.create(cc.sprite.create("res/powered.png"));
right.settype(cc.progress_timer_type_bar);
right.setbarchangerate(cc.p(0, 1));
right.setmidpoint(cc.p(0, 1));
this.addchild(right);
right.setposition(cc.p(size.width/4*3, size.height/2));
right.runaction(cc.repeatforever.create(to2));
效果如下：
我想通过这几个实例可以弄明白这个进度条的走向和方向了吧，关键就是在于理解setbarchangerate和setmidpoint这两个方法，下一节继续讨论这个进度计时器的知识点。
不早了，睡觉了。。。
如对本文有疑问， 点击进行留言回复！！
基于质谱的蛋白质鉴定，第3节：基于MALDI-MS肽指纹图谱的蛋白质质谱鉴定
HEVC代码学习：帧间预测——MVP过程中MV的获取、传递及存储
网友评论