码迷，mamicode.com
首页 > 其他好文 > 详细

进阶教程（8）- 制作载入进度条

时间：2014-12-04 18:05:17      阅读：292      评论：0      收藏：0      [点我收藏+]

标签：krpano   全景   

载入进度动画条与启动画面一样，有着安抚用户急不可耐的小心脏的重要作用。如果没有一个百分比或者进度条的显示，遇到网络比较慢的情况，可能用户会马上关闭了这个全景链接。尤其是在这个讲求快感的时代，让用户知道还有多久能够看到清晰的全景，你就能多留住更多的客户。


默认的cofu皮肤只有一个“loading”的文字提示，当载入一个新的场景时，只出现一个文字提示是不够的。在官方的安装包的路径 examples\xml-usage\progress


如果直接双击html文件，就能看到下图的进度条动画，一共有三种形态，一个是自转的动画，一个是百分比数字，一个是进度条。

bubuko.com,布布扣

然后我们来看example.xml，实际上起作用的就是那三段include代码。



  1. <include url="progress_loadinganimation.xml" />

  2. <include url="progress_loadingpercent.xml" />

  3. <include url="progress_loadingbar.xml" />


既然这样，我们可以把这三个xml文件以及loadinganimation.png拷贝到我们自己的项目文件夹。然后将上面这三段include的代码复制到tour.xml里。用DW打开这三个xml文件。


先看第一个progress_loadinganimation.xml，这是控制那个png图片序列进行不断自转表示正在载入的代码。


  1. <krpano>

  3. <!-- loading animation text -->

  6. <!-- loading animation events -->

  7. <events name="loadinganimation" keep="true"

  8. onxmlcomplete="loadinganimation_startloading();"

  9. onloadcomplete="delayedcall(0.25, loadinganimation_stoploading() );"

  10. />

  13. <!-- loading animation graphic -->

  14. <layer name="loadinganimation"

  15. keep="true"

  16. visible="false"

  17. url="loadinganimation.png"

  18. crop="0|0|64|64"

  19. align="top" y="25%"

  20. frame="0" frames="8"

  21. />

  24. <!-- loading percent actions -->

  25. <action name="loadinganimation_startloading">

  26. set(loadinganimation_isloading, true);

  27. set(layer[loadinganimation].visible, true);

  28. loadinganimation_animate();

  29. </action>

  31. <action name="loadinganimation_stoploading">

  32. set(loadinganimation_isloading, false);

  33. set(layer[loadinganimation].visible, false);

  34. </action>

  36. <action name="loadinganimation_animate">

  37. mul(xcrop, layer[loadinganimation].frame, 64);

  38. txtadd(layer[loadinganimation].crop, get(xcrop), ‘|0|64|64‘);

  40. if(loadinganimation_isloading,

  41. inc(layer[loadinganimation].frame);

  42. if(layer[loadinganimation].frame GE layer[loadinganimation].frames, set(layer[loadinganimation].frame,0));

  43. delayedcall(0.05, loadinganimation_animate() );

  44. );

  45. </action>

  47. </krpano>


其实上面这段代码的核心和动画热点（也就是png图片序列是一样的）下面是动画热点的核心代码


  1. <!-- hotspot animation action -->

  2. <action name="hotspot_animate">

  3. inc(frame,1,get(lastframe),0); mul(ypos,frame,frameheight); txtadd(crop,‘0|‘,get(ypos),‘|‘,get(framewidth),‘|‘,get(frameheight)); delayedcall(0.03, if(loaded, hotspot_animate() ) );

  4. </action>



我们直接来看进度动画的每一段代码的意思



  1. <events name="loadinganimation" keep="true"

  2. onxmlcomplete="loadinganimation_startloading();"

  3. onloadcomplete="delayedcall(0.25, loadinganimation_stoploading() );"

  4. />


进度动画需要显示的时间间歇是在onxmlcomplete和onloadcomplete之间，因此在onxmlcomplete响应（xml文件代码解析完毕）时则开始执行loadinganimation_startloading，也就是进度动画开始，当onloadcomplete（全景图片加载完成后，也就是百分百加载结束后）就得结束进度动画，即loadinganimation_stoploading。




  1. <action name="loadinganimation_startloading">

  2. set(loadinganimation_isloading, true);

  3. set(layer[loadinganimation].visible, true);

  4. loadinganimation_animate();

  5. </action>

  7. <action name="loadinganimation_stoploading">

  8. set(loadinganimation_isloading, false);

  9. set(layer[loadinganimation].visible, false);

  10. </action>


loadinganimation_startloading首先是让一个参数loadinganimation_isloading为true，然后设置png图片这个图层可见，并执行loadinganimation_animate（图片序列动起来的代码）。loadinganimation_stoploading则是一个简单的逆向设定，把true该为false。



  1. <action name="loadinganimation_animate">

  2. mul(xcrop, layer[loadinganimation].frame, 64);

  3. txtadd(layer[loadinganimation].crop, get(xcrop), ‘|0|64|64‘);

  5. if(loadinganimation_isloading,

  6. inc(layer[loadinganimation].frame);

  7. if(layer[loadinganimation].frame GE layer[loadinganimation].frames, set(layer[loadinganimation].frame,0));

  8. delayedcall(0.05, loadinganimation_animate() );

  9. );

  10. </action>




png图片序列的核心，就是你要知道每个小图标在图片的位置，因此这时候crop就起到非常重要的作用，crop可以把图片的某个区域单独显示，也就是我们一直在改变着crop的参数，使得显示的区域不断地变化，这样就做成了动画效果。你也可以看看这张png图片，它就是由八个有差异的小图组成的一个图片，每次我们需要将crop里面第一个X坐标增加64，也就是从当前的小图标向右挪到下一个图标，然后这样的一个过程仅需要0.05秒，人眼自然看不到改变的细节，就会将将这个过程视作动画。


mul是一个数学方法，实现的是乘法，也就是让64与frame包含的数值相乘，frame是layer[loadinganimation]的一个自定义属性，它最初是0，因此crop出来的第一个就是0|0|64|64，具体是通过txtadd来实现的。然后判断是否还在载入当中，如果是的话，就让frame增加1，也就是下一个crop肯定是1乘以64，即是64|0|64|64，以此类推。那么当这个frame等于8的时候，也就是等于我们定义的小图标的个数时，就得重新将frame设为0，这样才能不断循环。直到loadinganimation_isloading为false，循环才会结束。


因此如果你要移花接木的话，基本上就是自己p一张png图片，如果你的小图标不只8个或少于8个，那么对应的layer的自定义的属性frames就要相应的进行修改，也就是除了url和frames两个属性以外，其他基本不用动。


接下来的百分比和进度条都要涉及到对与元素progress的应用。首先是进度条progress_loadingbar.xml


  1. <krpano>

  3. <!-- loading progress bar -->

  6. <!-- loading bar events -->

  7. <events name="loadingbar" keep="true"

  8. onxmlcomplete="loadingbar_startloading();"

  9. onloadcomplete="delayedcall(0.25, loadingbar_stoploading() );"

  10. />

  13. <!-- loading bar graphics -->

  14. <layer name="loadingbar_bg" keep="true" type="container" bgcolor="0x000000" bgalpha="0.5" align="bottom" y="25%" width="33%" height="20" enabled="false" visible="false">

  15. <layer name="loadingbar_space" type="container" align="left" x="4" width="-8" height="12">

  16. <layer name="loadingbar_fill" type="container" bgcolor="0xFFFFFF" bgalpha="1.0" align="lefttop" width="0" height="100%" />

  17. </layer>

  18. </layer>

  21. <!-- loading bar actions -->

  22. <action name="loadingbar_startloading">

  23. set(loadingbar_isloading, true);

  24. set(layer[loadingbar_bg].visible, true);

  26. asyncloop(loadingbar_isloading,

  27. mul(pv, progress.progress, 100);

  28. txtadd(pv, ‘%‘);

  29. copy(layer[loadingbar_fill].width, pv);

  30. );

  31. </action>

  33. <action name="loadingbar_stoploading">

  34. set(loadingbar_isloading, false);

  35. set(layer[loadingbar_bg].visible, false);

  36. </action>

  38. </krpano>



events的部分是相似的，进度条用的是三个container，主要就是一个底图，一个是已经载入的进度以及一个还没载入的空白。这里值得注意的是一个asyncloop的action以及对progress.progress的使用，asyncloop的条件成立时会每一帧执行一次循环事件，而progress.progress则是当前进度的一个小于1大于0的数值，因此pv会是一个大于0小于100的数值。将pv赋值到对应载入条layer的宽度width中，这样这个layer的宽度就会一直变化。


类似的是百分比的progress_loadingpercent.xml



  1. <krpano>

  3. <!-- loading percent text -->

  6. <!-- loading percent events -->

  7. <events name="loadingpercent" keep="true"

  8. onxmlcomplete="loadingpercent_startloading();"

  9. onloadcomplete="delayedcall(0.25, loadingpercent_stoploading() );"

  10. />

  15. <!-- loading percent graphics/text -->

  16. <layer name="loadingpercent_text" keep="true"

  17. url="%SWFPATH%/plugins/textfield.swf"

  18. align="center"

  19. background="false"

  20. border="false"

  21. autoheight="true"

  22. css="text-align:center; color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:22px; font-style:italic;" textshadow="2"

  23. html=""

  24. />

  28. <!-- loading percent actions -->

  29. <action name="loadingpercent_startloading">

  30. set(loadingpercent_isloading, true);

  31. set(layer[loadingpercent_text].visible, true);

  33. asyncloop(loadingpercent_isloading,

  34. mul(pv, progress.progress, 100);

  35. roundval(pv,0);

  36. txtadd(layer[loadingpercent_text].html, ‘Loading ‘, get(pv), ‘%‘);

  37. );

  38. </action>

  40. <action name="loadingpercent_stoploading">

  41. set(loadingpercent_isloading, false);

  42. set(layer[loadingpercent_text].visible, false);

  43. </action>


像进度条我们可以简单地改变进度条的颜色，百分百也可以改成我们熟悉的中文。

进阶教程（8）- 制作载入进度条

标签：krpano   全景   

原文地址：http://blog.csdn.net/smyife/article/details/41726073
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！