Cocos2d-x可以有多种进度条的展示方式,进度条的种类是根据进度条运动的方向来区分,包括顺时针,逆时针,从左到右,从右到左,从下到上和从上到下6种方式,这和WP8的进度条是由很大的区别的。那么Cocos2d-x的进度条是需要用图片来进行展示,然后从不同的方向来渐渐把图片显示出来实现进度条的效果。

第一步需要创建一个CCProgressTo对象和CCProgressTimer对象,我们可以通过CCProgressTo::create(2, 100)方法创建CCProgressTo定义了进度条的时间和图片的百分比,第一个参数是时间是一个CCTime对象,第二个参数是结果显示图片的百分比。通过CCProgressTimer::progressWithFile("cat.png")方法创建CCProgressTimer定义了进度条的图片文件。

CCProgressTo *to1 = CCProgressTo::create(2, 100);
   CCProgressTimer *left = CCProgressTimer::progressWithFile("cat.png");

第二步通过CCProgressTimer指针设置进度条的类型。

调用setType设置类型,

kCCProgressTimerTypeRadialCW   顺时针生成

kCCProgressTimerTypeRadialCCW  逆时针生成

kCCProgressTimerTypeHorizontalBarLR 从左到右生成

kCCProgressTimerTypeHorizontalBarRL 从右到左生成

kCCProgressTimerTypeVerticalBarBT 从下到上生成

kCCProgressTimerTypeVerticalBarTB 从上到下生成

left->setType( kCCProgressTimerTypeRadialCW );

第三步添加到场景,设置位置和重复的频率

addChild(left);
  left->setPosition(CCPointMake(100, size.height*3/4));
  left->runAction( CCRepeatForever::create(to1));

示例代码:

         //逆时针转动
CCProgressTo *to1 = CCProgressTo::create(, );
CCProgressTimer *left = CCProgressTimer::progressWithFile("cat.png");
left->setType( kCCProgressTimerTypeRadialCW );
addChild(left);
left->setPosition(CCPointMake(, size.height*/));
left->runAction( CCRepeatForever::create(to1));
//顺时针转动
CCProgressTo *to2 = CCProgressTo::create(, );
CCProgressTimer *right = CCProgressTimer::progressWithFile("cat.png");
right->setType( kCCProgressTimerTypeRadialCCW );
addChild(right);
right->setPosition(CCPointMake(, size.height/));
right->runAction( CCRepeatForever::create(to2)); //从左到右
CCProgressTo *toHorizontalBar1 = CCProgressTo::create(, );
CCProgressTimer *leftHorizontalBar = CCProgressTimer::progressWithFile("cat.png");
leftHorizontalBar->setType( kCCProgressTimerTypeHorizontalBarLR );
addChild(leftHorizontalBar);
leftHorizontalBar->setPosition(CCPointMake(, size.height*/));
leftHorizontalBar->runAction( CCRepeatForever::create(toHorizontalBar1));
//从右到左
CCProgressTo *toHorizontalBar2 = CCProgressTo::create(, );
CCProgressTimer *rightHorizontalBar = CCProgressTimer::progressWithFile("cat.png");
rightHorizontalBar->setType( kCCProgressTimerTypeHorizontalBarRL );
addChild(rightHorizontalBar);
rightHorizontalBar->setPosition(CCPointMake(, size.height/));
rightHorizontalBar->runAction( CCRepeatForever::create(toHorizontalBar2)); //从底部到顶部
CCProgressTo *toVerticalBar1 = CCProgressTo::create(, );
CCProgressTimer *leftVerticalBar = CCProgressTimer::progressWithFile("cat.png");
leftVerticalBar->setType( kCCProgressTimerTypeVerticalBarBT );
addChild(leftVerticalBar);
leftVerticalBar->setPosition(CCPointMake(, size.height*/));
leftVerticalBar->runAction( CCRepeatForever::create(to1));
//从顶部到底部
CCProgressTo *toVerticalBar2 = CCProgressTo::create(, );
CCProgressTimer *rightVerticalBar = CCProgressTimer::progressWithFile("cat.png");
rightVerticalBar->setType( kCCProgressTimerTypeVerticalBarTB );
addChild(rightVerticalBar);
rightVerticalBar->setPosition(CCPointMake(, size.height/));
rightVerticalBar->runAction( CCRepeatForever::create(toVerticalBar2));

运行的效果:

 

[Cocos2d-x For WP8]Progress 进度条的更多相关文章

  1. 微信小程序组件解读和分析:六、progress进度条

    progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. pro ...

  2. 微信小程序 progress 进度条 内部圆角及内部条渐变色

    微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80&q ...

  3. android中progress进度条的使用

    activity.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" ...

  4. progress 进度条

      进度条.  属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean false 在进度条右侧显示百分比 stroke-width Numb ...

  5. progress进度条的样式修改

    由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他 ...

  6. bootstrap3的 progress 进度条

    : 2.3版               3.0版 .bar .progress-bar .bar-* .progress-bar-* 2.代码: <!DOCTYPE html PUBLIC & ...

  7. 使用div实现progress进度条

    在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*)  可以在CSS里改样式,可以JS里改进度. <div cla ...

  8. html。PROGRESS进度条使用测试

    效果图 : 代码: ----------------------------------- //本文来自:https://www.cnblogs.com/java2sap/p/11199126.htm ...

  9. 详解HTML5中的进度条progress元素简介及兼容性处理

    一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...

随机推荐

  1. AspectJ报错:error at ::0 can't find referenced pointcut XXX

    今天在使用AspectJ进行注解切面时,遇到了一个错误. 切点表达式就是无法识别——详细报错信息如下: Exception in thread "main" org.springf ...

  2. 异常:The absolute uri: http://www.springframework.org/security/tags cannot be resolved in either web.xml or the jar files deployed with this application

    The absolute uri: http://www.springframework.org/security/tags cannot be resolved in either web.xml ...

  3. HDOJ 1690

    Bus System Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  4. maven An error occurred while filtering resources

    转自:http://stackoverflow.com/questions/18145774/eclipse-an-error-occurred-while-filtering-resources m ...

  5. 61. 从1到n,共有n个数字,每个数字只出现一次。从中随机拿走一个数字x,请给出最快的方法,找到这个数字。如果随机拿走k(k>=2)个数字呢?[find k missing numbers from 1 to n]

    [本文链接] http://www.cnblogs.com/hellogiser/p/find-k-missing-numbers-from-1-to-n.html  [题目] 从1到n,共有n个数字 ...

  6. iOS 推荐学习__bridge等ARC知识的好资料

    请下载 iOS5 by Tutorials!写得很好的!

  7. c++流的读写

    std::istream input_stream;//这是一个文件流,想把它写入文件 思路是,先将input_stream流读入一个char* buffer; 然后用std::ofstream将bu ...

  8. Androidi性能优化之Java代码优化(摘自Android性能优化一书)

    代码优化不是应用开发的首要任务,提供良好的用户体验并专注于代码的可维护性,这才是你的首要任务.事实上,代码优化应该是最后才做,甚至完全可能不去做,不过,良好的优化可以使程序性能直接达到一个可接受的水平 ...

  9. oracle 序列 详解

    序列: 是oacle提供的用于产生一系列唯一数字的数据库对象. l  自动提供唯一的数值 l  共享对象 l  主要用于提供主键值 l  将序列值装入内存可以提高访问效率 创建序列: 1.  要有创建 ...

  10. ytu 2011: C语言实验——找中间数(水题)

    2011: C语言实验——找中间数 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 212  Solved: 122[Submit][Status][Web ...