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

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

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

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

然后我们来看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>
  2. <!--
    loading animation text -->
  3. <!--
    loading animation events -->
  4. <events
    name="loadinganimation"
    keep="true"
  5. onxmlcomplete="loadinganimation_startloading();"
  6. onloadcomplete="delayedcall(0.25,
    loadinganimation_stoploading() );"
  7. />
  8. <!--
    loading animation graphic -->
  9. <layer
    name="loadinganimation"
  10. keep="true"
  11. visible="false"
  12. url="loadinganimation.png"
  13. crop="0|0|64|64"
  14. align="top"
    y="25%"
  15. frame="0"
    frames="8"
  16. />
  17. <!--
    loading percent actions -->
  18. <action
    name="loadinganimation_startloading">
  19. set(loadinganimation_isloading, true);
  20. set(layer[loadinganimation].visible, true);
  21. loadinganimation_animate();
  22. </action>
  23. <action
    name="loadinganimation_stoploading">
  24. set(loadinganimation_isloading, false);
  25. set(layer[loadinganimation].visible, false);
  26. </action>
  27. <action
    name="loadinganimation_animate">
  28. mul(xcrop, layer[loadinganimation].frame, 64);
  29. txtadd(layer[loadinganimation].crop, get(xcrop), ‘|0|64|64‘);
  30. if(loadinganimation_isloading,
  31. inc(layer[loadinganimation].frame);
  32. if(layer[loadinganimation].frame GE layer[loadinganimation].frames, set(layer[loadinganimation].frame,0));
  33. delayedcall(0.05, loadinganimation_animate() );
  34. );
  35. </action>
  36. </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>
  6. <action
    name="loadinganimation_stoploading">
  7. set(loadinganimation_isloading, false);
  8. set(layer[loadinganimation].visible, false);
  9. </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‘);
  4. if(loadinganimation_isloading,
  5. inc(layer[loadinganimation].frame);
  6. if(layer[loadinganimation].frame GE layer[loadinganimation].frames, set(layer[loadinganimation].frame,0));
  7. delayedcall(0.05, loadinganimation_animate() );
  8. );
  9. </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>
  2. <!--
    loading progress bar -->
  3. <!--
    loading bar events -->
  4. <events
    name="loadingbar"
    keep="true"
  5. onxmlcomplete="loadingbar_startloading();"
  6. onloadcomplete="delayedcall(0.25,
    loadingbar_stoploading() );"
  7. />
  8. <!--
    loading bar graphics -->
  9. <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">
  10. <layer
    name="loadingbar_space"
    type="container"
    align="left"
    x="4"
    width="-8"
    height="12">
  11. <layer
    name="loadingbar_fill"
    type="container"
    bgcolor="0xFFFFFF"
    bgalpha="1.0"
    align="lefttop"
    width="0"
    height="100%"
    />
  12. </layer>
  13. </layer>
  14. <!--
    loading bar actions -->
  15. <action
    name="loadingbar_startloading">
  16. set(loadingbar_isloading, true);
  17. set(layer[loadingbar_bg].visible, true);
  18. asyncloop(loadingbar_isloading,
  19. mul(pv, progress.progress, 100);
  20. txtadd(pv, ‘%‘);
  21. copy(layer[loadingbar_fill].width, pv);
  22. );
  23. </action>
  24. <action
    name="loadingbar_stoploading">
  25. set(loadingbar_isloading, false);
  26. set(layer[loadingbar_bg].visible, false);
  27. </action>
  28. </krpano>

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

类似的是百分比的progress_loadingpercent.xml

  1. <krpano>
  2. <!--
    loading percent text -->
  3. <!--
    loading percent events -->
  4. <events
    name="loadingpercent"
    keep="true"
  5. onxmlcomplete="loadingpercent_startloading();"
  6. onloadcomplete="delayedcall(0.25,
    loadingpercent_stoploading() );"
  7. />
  8. <!--
    loading percent graphics/text -->
  9. <layer
    name="loadingpercent_text"
    keep="true"
  10. url="%SWFPATH%/plugins/textfield.swf"
  11. align="center"
  12. background="false"
  13. border="false"
  14. autoheight="true"
  15. css="text-align:center;
    color:#FFFFFF; font-family:Arial; font-weight:bold; font-size:22px; font-style:italic;"
    textshadow="2"
  16. html=""
  17. />
  18. <!--
    loading percent actions -->
  19. <action
    name="loadingpercent_startloading">
  20. set(loadingpercent_isloading, true);
  21. set(layer[loadingpercent_text].visible, true);
  22. asyncloop(loadingpercent_isloading,
  23. mul(pv, progress.progress, 100);
  24. roundval(pv,0);
  25. txtadd(layer[loadingpercent_text].html, ‘Loading ‘, get(pv), ‘%‘);
  26. );
  27. </action>
  28. <action
    name="loadingpercent_stoploading">
  29. set(loadingpercent_isloading, false);
  30. set(layer[loadingpercent_text].visible, false);
  31. </action>

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

时间： 2024-10-09 18:47:12

进阶教程（8）- 制作载入进度条的相关文章

CocoStudio使用笔记2：cocos2dx3.9使用CocoStudio制作的进度条LoadingBar

作为菜鸟曾一直使用手写cocos2dx界面,最近一直在研究cocostudio这个工具.尝试着使用工具来快速的开发游戏,折腾了一个多星期了,每天不停的搜索资料. 记录下本人试用cocostudio制作的启动界面所遇到的问题和经验,方便以后查阅. 首先设置编辑器的分辨率为480*800安卓分辨率的大小. 添加一个sprite精灵使用大小为480*800的图片(background.png)作为背景,然后添加sprite精灵作为游戏logo(logo.png),继续添加sprite作为进度条的背景(

网页载入进度条中的javascript

demo地址:http://output.jsbin.com/buquyedosa 思路例如以下:代码都有凝视,就不一一介绍了. <!DOCTYPE html> <html> <head lang="zh-cn"> <meta charset="UTF-8"> <title>进度条</title> <style> .progress{ position: fixed; top: 0;

纯CSS3制作圆形进度条所遇到的问题

近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用border-radius:半径,这样两个矩形便组成了一个完整的圆形. 我们让左侧的子盒子绕着右边的中点旋转180°,这样左侧的半圆就隐藏了,右侧半圆同理.这个地方设置旋转中心是用的transform-origin属性,第一个

Android 高手进阶，自己定义圆形进度条

背景介绍 在Android 开发中,我们常常遇到各种各样绚丽的控件,所以,依靠我们Android本身所带的控件是远远不够的,许多时候须要我们自定义控件,在开发的过程中.我们公司遇到了一种须要自己写的一个自定义带进度的圆形进度条,看起来很的绚丽,当然另一些其它的.比方:水纹形的圆形进度条等效果都是很nice的.假设哪位朋友有实现,希望分享出来,我也好学习学习. 好了多的不说.接下来,我们就来看看来怎样实现圆形进度条. 原文地址:http://blog.csdn.net/xiaanming/arti

用HTML、CSS、JS制作圆形进度条（无动画效果）

逻辑 1.首先有一个圆:蓝色的纯净的圆,效果: 2.再来两个半圆,左边一个,右边一个将此蓝色的圆盖住,效果: 此时将右半圆旋转60°,就会漏出底圆,效果: 然后我们再用一个比底圆小的圆去覆盖这个大圆就可以出进度条效果了 代码: <style>     /*支持IE9及以上*/    .circle-bar {margin: 20px; font-size:200px; width: 1em; height: 1em; position: relative;  background-color:

用 python 的生成器制作数据传输进度条

整个过程中有几个数据 1  已经传输的数据received_size 2  文件大小tatol a = received_size/tatol   b = a*100    其中 ,  a是已传输数据占总数据的百分比,   b就是已经传输的进度, 总进度为100 现在只要实现进度有更新就打印# 1 # _*_coding:utf-8_*_ 2 # Author:Jaye He 3 import time 4 5 6 def show_progress(total): 7 received_siz

使用 Asp.Net Response.Write() 制作实时进度条

准备: 一个 StudyResponse.aspx 页面和 CodeBehind 文件. Web 页面中的内容如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StudyResponse.aspx.cs" Inherits="WebApplication1.StudyResponse" %> Web 页面的 CodeBehind 中的代码如下

Html5基于SVG的扁平风格圆形进度条javascript插件教程

一.使用方法 使用该圆形进度条需要引入circleDonutChart.js文件. <script type="text/javascript" src="circleDonutChart.js"></script> 二.Html结构 你可以使用一个空的<div>元素来制作圆形进度条. <div id="example1"></div> 三.初始化插件 要制作圆形进度条,可以使用下面的方

[Unity3D]Unity3D游戏开发之异步记载场景并实现进度条读取效果

大家好,我是秦元培.欢迎大家关注我的博客,我的博客地址是:blog.csdn.net/qinyuanpei.终于在各种无语的论文作业中解脱了,所以立即抓紧时间来这里更新博客.博主本来计划在Unity3D游戏开发之从<魂斗罗>游戏说起(上)--目标追踪这篇文章后再写一篇<Unity3D游戏开发之从<魂斗罗>游戏说起(下)>,只是眼下博主的项目进度有些缓慢,所以想等项目稳定下来以后再和大家分享. 作为大家等待博主更新博客的回报,我们今天来说一说Unity3D中的游戏场景异步