AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Cocos2dx 3.0 过渡篇（十）资源加载进度条Loading...

2014-04-15 1543
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <p style="color:rgb(54,46,43); font-family:Arial; font-size:14px; line-height:26px"> 尊重原创，转载请注明来自：star特530的CSDN博客 <a target="_blank" href="http://blog.csdn.net/start530/article/details/19420317"

尊重原创，转载请注明来自：star特530的CSDN博客 http://blog.csdn.net/start530/article/details/19420317


本来这篇博文是昨晚就要写的，可是因为今早要去参加考驾照相关的体检，而我最害怕的就是视力没能达到5.0，毕竟这阶段对着屏幕的时间过久。

所以呢，昨晚我几乎没碰电脑，没玩手机，早睡早起。体检顺利通过！


首先，我要说的是：这次我要写的主题是进度条。 额，等等，先收起你手里愤怒的西瓜刀。我也才知道TestCpp也有这个例子啊。不过TestCpp里的只有label的变化，而我的多加了个进度条。
请容我对我的这种手段取个好听的名称：画龙点睛！


恩，步骤如下：
1、创建label和progressTimer；
2、加载资源，每加载一张都调用回调函数；
3、加载完成，进入新的界面。


首先看下头文件：HelloWorld.h

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. #ifndef __HELLOWORLD_SCENE_H__  
  2. #define __HELLOWORLD_SCENE_H__  
  3.   
  4. #include "cocos2d.h"  
  5.   
  6. class HelloWorld : public cocos2d::Layer  
  7. {  
  8. public:  
  9.     HelloWorld():m_numSp(20),m_loadedSp(0),loadProgress(NULL){};  
  10.   
  11.     static cocos2d::Scene* createScene();  
  12.     virtual bool init();    
  13.   
  14.     void loadingCallback(Object* pSender);//加载一张图片完成后跳转的毁掉函数  
  15.   
  16.     void gotoNewLayer();//加载完后的跳转函数  
  17.     CREATE_FUNC(HelloWorld);  
  18.   
  19. private:  
  20.     cocos2d::ProgressTimer* loadProgress;//进度条  
  21.   
  22.     cocos2d::LabelTTF* percentLabel;//加载进度label  
  23.     cocos2d::LabelTTF* loadLabel;//显示 loading: 的label  
  24.   
  25.     int m_numSp;//要加载的精灵数目,初始化为 20 张  
  26.     int m_loadedSp;//已加载的精灵数目  
  27. };  
  28.   
  29. #endif // __HELLOWORLD_SCENE_H__  

1、创建

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. Size visibleSize = Director::getInstance()->getVisibleSize();  
  2. Point origin = Director::getInstance()->getVisibleOrigin();  
  3.   
  4. loadLabel = LabelTTF::create("Loading:","Arial",20);//创建显示Loading: 的label  
  5. loadLabel->setPosition(Point(visibleSize.width/2-30,visibleSize.height/2+30));  
  6. this->addChild(loadLabel,1);  
  7.   
  8. percentLabel = LabelTTF::create("0%","Arial",20);//创建显示百分比的label  
  9. percentLabel->setPosition(Point(visibleSize.width/2+35,visibleSize.height/2+30));  
  10. this->addChild(percentLabel,2);  
  11.   
  12. auto loadBg = Sprite::create("sliderTrack.png");//进程条的底图  
  13. loadBg->setPosition(Point(visibleSize.width/2,visibleSize.height/2));  
  14. this->addChild(loadBg,1);  
  15.   
  16. loadProgress = ProgressTimer::create(Sprite::create("sliderProgress.png"));//创建一个进程条  
  17. loadProgress->setBarChangeRate(Point(1,0));//设置进程条的变化速率  
  18. loadProgress->setType(ProgressTimer::Type::BAR);//设置进程条的类型  
  19. loadProgress->setMidpoint(Point(0,1));//设置进度的运动方向  
  20. loadProgress->setPosition(Point(visibleSize.width/2,visibleSize.height/2));  
  21. loadProgress->setPercentage(0.0f);//设置初始值为0  
  22. this->addChild(loadProgress,2);  

2、加载图片

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. //加载20张图片，每加载完一张就调用回调函数:loadingCallback  
  2. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  3. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld1.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  4. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld2.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  5. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld3.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  6. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld4.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  7. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld5.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  8. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld6.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  9. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld7.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  10. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  11. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  12.   
  13. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  14. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  15. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  16. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  17. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  18. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  19. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  20. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  21. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  
  22. Director::getInstance()->getTextureCache()->addImageAsync("HelloWorld.png",this,callfuncO_selector(HelloWorld::loadingCallback));  

3、图片加载后的回调函数：

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. void HelloWorld::loadingCallback(Object* pSender)  
  2. {  
  3.     ++m_loadedSp;//每进到这个函数一次，让m_loadedSp + 1  
  4.   
  5.     char buf_str[16];  
  6.     sprintf(buf_str,"%d%%",(int)(((float)m_loadedSp / m_numSp) * 100),m_numSp);  
  7.     percentLabel->setString(buf_str);//更新percentLabel的值  
  8.   
  9.     float newPercent = 100 - ((float)m_numSp - (float)m_loadedSp)/((float)m_numSp/100);//计算进度条当前的百分比  
  10.     //因为加载图片速度很快，所以就没有使用ProgressTo，  
  11.     //或者ProgressFromTo这种动作来更新进度条  
  12.     loadProgress->setPercentage(newPercent);//更新进度条  
  13.   
  14.     //图片加载完成后  
  15.     if(m_loadedSp == m_numSp)  
  16.     {  
  17.         this->removeChild(loadProgress);//将添加的几个对象删除掉  
  18.         this->removeChild(percentLabel);  
  19.         this->removeChild(loadLabel);  
  20.   
  21.         //加载完既要跳转到gotoNewLayer,在这里可以  
  22.         //创建新的Scene，新的Layer，或者其他什么乱七八糟的  
  23.         this->gotoNewLayer();  
  24.     }  
  25. }  

4、进入新的界面

[cpp]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. void HelloWorld::gotoNewLayer()  
  2. {  
  3.     auto size = Director::getInstance()->getWinSize();  
  4.   
  5.     auto sp = Sprite::create("HelloWorld.png");//用之前加载到缓存中的图片，创建一个精灵。  
  6.     sp->setPosition(Point(size.width/2,size.height/2));  
  7.     this->addChild(sp,1);  
  8. }  


因为代码里注释都写的挺详细的，所以我也就不说太多废话了。
恩，写完了。这篇是下班后加班写的，外面又下了大雨，我要赶紧冲回去吃饭了。 风一般的男纸 。


尊重原创，转载请注明原址： http://blog.csdn.net/start530?viewmode=contents
文章标签：
C++
微个日光日
目录
相关文章
编程的平行世界
|
缓存
Flutter ListView懒加载（滑动不加载，停止滑动加载）
前言：为了更好的减小网络的带宽，使得列表更加流畅，我们需要了解懒加载，也称延迟加载。关于上一章的登录界面，各位属实难为我了，我也在求ui小姐姐，各位点点赞给我点动力吧~
编程的平行世界
1191 0
哈你真皮
|
2天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时，为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
哈你真皮
25 13
疯狂的猿
|
1月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画，js循环动画，简单的画面设计。非常丝滑有意思，欢迎对此代码感兴趣的朋友前来下载参考。
疯狂的猿
28 2
白雾茫茫丶
|
6月前
|
前端开发 JavaScript API
Nuxt3 实战 (十一)：添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Nuxt3框架中页面和布局的过渡效果设置方法，以及首屏加载动画的添加。通过配置nuxt.config.ts文件和添加CSS样式，可以实现页面过渡效果。同时，文章也提到了在页面中设置不同的过渡效果和为布局和页面同时设置过渡效果的方法。最后，文章以一个Github仓库链接和一个线上预览地址作为总结，表示遵循官方文档操作即可完成相关设置。
白雾茫茫丶
166 0
Nuxt3 实战 (十一)：添加路由 Transition 过渡效果和 Loading 动画
鋜斗
|
7月前
|
JavaScript 前端开发
jQuery 第五章（效果，滑动，动画，停止动画）
jQuery 第五章（效果，滑动，动画，停止动画）
鋜斗
87 0
咖啡机（K.F.J）
|
Web App开发 移动开发 前端开发
多种方法实现Loading（加载）动画效果
当我们ajax提交一个按钮的时候，给那个按钮来个Loading效果会高端很多，体验也会上升个层次。 既能让用户知道正在提交中，也能防止二次提交，好处多多呢。
咖啡机（K.F.J）
1870 1
多种方法实现Loading（加载）动画效果
萌萌哒草头将军
|
前端开发 JavaScript
优美的Reactl列表动画：Styled-Components动画实践
优美的Reactl列表动画：Styled-Components动画实践
萌萌哒草头将军
84 0
chokcoco
|
前端开发 容器
巧用 CSS 实现动态线条 Loading 动画
巧用 CSS 实现动态线条 Loading 动画
chokcoco
639 0
巧用 CSS 实现动态线条 Loading 动画
fg3vnhvvi2tja
|
JavaScript 容器
原生 js 实现一个有动画效果的进度条插件 progress
原生 js 实现一个有动画效果的进度条插件 progress
fg3vnhvvi2tja
529 0
原生 js 实现一个有动画效果的进度条插件 progress
早起的年轻人
|
前端开发 容器
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
AnimatedDefaultTextStyle通过动画过渡的方式来切换文本的显示样式
早起的年轻人
996 0
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果

热门文章

最新文章

  • 1
    Gitlab----使用Docker方式安装部署Gitlab
  • 2
    Mac搭建安卓模拟器（支持M1/M2/M3/M4）
  • 3
    java报错javax.net.ssl.SSLHandshakeException:  sun.security.validator.ValidatorException
  • 4
    开发人员各级岗位胜任力模型
  • 5
    Hive之数据倾斜的原因和解决方法
  • 6
    【Java】留下没有基础眼泪的面试题
  • 7
    iptables系列教程（二）| iptables语法规则
  • 8
    13.4. 临时表是否需要建索引
  • 9
    共享的两种方式
  • 10
    Andriod动态布局
  • 1
    Linux 各发行版安装 ping 命令指南
    39
  • 2
    Linux缓存管理：如何安全地清理系统缓存
    97
  • 3
    《CMake：掌控 C++人工智能项目编译的魔法棒》
    31
  • 4
    《C++人工智能开发 IDE 全解析：助力智能创新之路》
    35
  • 5
    《解锁 Eigen 库在 C++人工智能项目中的潜能与优化之道》
    34
  • 6
    《解析 MXNet 的 C++版本在分布式训练中的机遇与挑战》
    23
  • 7
    《探索 Caffe2 的 C++接口在移动设备上的性能优化之路》
    26
  • 8
    docker高级篇（大厂进阶）：安装redis集群
    43
  • 9
    Lyra：SmartMore 联合香港多所高校推出的多模态大型语言模型，专注于提升语音、视觉和语言模态的交互能力
    59
  • 10
    LatentLM：微软联合清华大学推出的多模态生成模型，能够统一处理和生成图像、文本、音频和语音合成
    45

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。