请选择 进入手机版 | 继续访问电脑版

站长网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 661|回复: 1

制作载入进度条

[复制链接]
发表于 2015-6-21 00:08:01 | 显示全部楼层 |阅读模式
载入进度动画条与启动画面一样,有着安抚用户急不可耐的小心脏的重要作用。如果没有一个百分比或者进度条的显示,遇到网络比较慢的情况,可能用户会马上关闭了这个全景链接。尤其是在这个讲求快感的时代,让用户知道还有多久能够看到清晰的全景,你就能多留住更多的客户。


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


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


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





<includeurl="progress_loadinganimation.xml"/>


<includeurl="progress_loadingpercent.xml"/>


<includeurl="progress_loadingbar.xml"/>


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


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



<krpano>





<!-- loading animation text -->








<!-- loading animation events -->


<eventsname="loadinganimation"keep="true"


onxmlcomplete="loadinganimation_startloading();"


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


/>








<!-- loading animation graphic -->


<layername="loadinganimation"


keep="true"


visible="false"


url="loadinganimation.png"


crop="0|0|64|64"


align="top"y="25%"


frame="0"frames="8"


/>








<!-- loading percent actions -->


<actionname="loadinganimation_startloading">


set(loadinganimation_isloading, true);


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


loadinganimation_animate();


</action>





<actionname="loadinganimation_stoploading">


set(loadinganimation_isloading, false);


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


</action>





<actionname="loadinganimation_animate">


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


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





if(loadinganimation_isloading,


inc(layer[loadinganimation].frame);


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


delayedcall(0.05, loadinganimation_animate() );


);


</action>





</krpano>


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



<!-- hotspot animation action -->


<actionname="hotspot_animate">


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() ) );


</action>





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





<eventsname="loadinganimation"keep="true"


onxmlcomplete="loadinganimation_startloading();"


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


/>


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







<actionname="loadinganimation_startloading">


set(loadinganimation_isloading, true);


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


loadinganimation_animate();


</action>





<actionname="loadinganimation_stoploading">


set(loadinganimation_isloading, false);


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


</action>


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






<actionname="loadinganimation_animate">


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


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





if(loadinganimation_isloading,


inc(layer[loadinganimation].frame);


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


delayedcall(0.05, loadinganimation_animate() );


);


</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



<krpano>





<!-- loading progress bar -->








<!-- loading bar events -->


<eventsname="loadingbar"keep="true"


onxmlcomplete="loadingbar_startloading();"


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


/>








<!-- loading bar graphics -->


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


<layername="loadingbar_space"type="container"align="left"x="4"width="-8"height="12">


<layername="loadingbar_fill"type="container"bgcolor="0xFFFFFF"bgalpha="1.0"align="lefttop"width="0"height="100%"/>


</layer>


</layer>








<!-- loading bar actions -->


<actionname="loadingbar_startloading">


set(loadingbar_isloading, true);


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





asyncloop(loadingbar_isloading,


mul(pv, progress.progress, 100);


txtadd(pv, '%');


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


);


</action>





<actionname="loadingbar_stoploading">


set(loadingbar_isloading, false);


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


</action>





</krpano>





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


类似的是百分比的progress_loadingpercent.xml





<krpano>





<!-- loading percent text -->








<!-- loading percent events -->


<eventsname="loadingpercent"keep="true"


onxmlcomplete="loadingpercent_startloading();"


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


/>














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


<layername="loadingpercent_text"keep="true"


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


align="center"


background="false"


border="false"


autoheight="true"


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


html=""


/>











<!-- loading percent actions -->


<actionname="loadingpercent_startloading">


set(loadingpercent_isloading, true);


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





asyncloop(loadingpercent_isloading,


mul(pv, progress.progress, 100);


roundval(pv,0);


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


);


</action>





<actionname="loadingpercent_stoploading">


set(loadingpercent_isloading, false);


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


</action>


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


回复

使用道具 举报

发表于 2015-7-16 16:42:20 | 显示全部楼层
这个比较实用
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|站长网

GMT+8, 2019-11-17 21:22 , Processed in 0.102424 second(s), 20 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表