更新于 2020.11.19 1.20.9
官方下载包路径
你电脑的路径\krpano-1.20.9\viewer\examples\loading-progress\
提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明
在线案例
(点击reload按钮重新载入查看)
关于载入进度
全景漫游因为需要载入场景中的图片,因此在线浏览时往往需要考虑全景图完全载入之前的用户体验。如果浏览者需要较长时间等待,
那么一个等待画面或者提示当前全景载入进度的显示方式是最佳的方式。
krpano的案例(目前在)中提供了相关的使用方法(注意,仅适用于全景图片的载入进度,不适用于全景视频载入)。
步骤
- 在以下代码选择其中一行或者多行加入到tour.xml中,每一个include代表了一种载入进度效果
123<include url="loadinganimation.xml" /><include url="loadingpercenttext.xml" /><include url="loadingbar.xml" /> - 将官方安装包对应的3个xml文件以及loadinganimation.png放到项目文件夹vtour中。
源代码详解
loadinganimation.xml
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<krpano> <!-- 动画加载事件 --> <events name="loadinganimation" keep="true" onxmlcomplete="loadinganimation_startloading();" onloadcomplete="delayedcall(0.25, loadinganimation_stoploading() );" /> <!-- 加载的图形 --> <hotspot name="loadinganimation" keep="true" visible="false" flying="1.0" url="loadinganimation.png" crop="0|0|64|64" frame="0" frames="8" /> <!-- 加载百分比事件 --> <action name="loadinganimation_startloading"> set(loadinganimation_isloading, true); set(hotspot[loadinganimation].visible, true); loadinganimation_animate(); </action> <action name="loadinganimation_stoploading"> set(loadinganimation_isloading, false); set(hotspot[loadinganimation].visible, false); </action> <action name="loadinganimation_animate"> mul(xcrop, hotspot[loadinganimation].frame, 64); txtadd(hotspot[loadinganimation].crop, get(xcrop), '|0|64|64'); if(loadinganimation_isloading, inc(hotspot[loadinganimation].frame); if(hotspot[loadinganimation].frame GE hotspot[loadinganimation].frames, set(hotspot[loadinganimation].frame,0)); delayedcall(0.05, loadinganimation_animate() ); ); </action> </krpano> |
进度动画需要显示的时间间歇是在onxmlcomplete和onloadcomplete之间,因此在onxmlcomplete事件调用(xml文件代码解析完毕)时则开始执行loadinganimation_startloading,也就是进度动画开始,当onloadcomplete事件调用(全景图片加载完成后,也就是百分百加载结束后)就得结束进度动画,即loadinganimation_stoploading。
loadinganimation_startloading首先让参数loadinganimation_isloading为true,然后设置png图片这个图层可见,并执行loadinganimation_animate(图片序列动起来的代码)。
loadinganimation_stoploading则是一个简单的逆向设定,把true该为false。
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两个属性以外,其它基本不用动。
loadingbar.xml
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<krpano> <!-- 载入进度条 --> <!-- 载入进度条事件 --> <events name="loadingbar" keep="true" onxmlcomplete="loadingbar_startloading();" onloadcomplete="delayedcall(0.25, loadingbar_stoploading() );" /> <!-- 载入进度条图形,利用layer的容器类型完成,分别设置背景、已经载入部分与尚未载入部分 --> <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"> <layer name="loadingbar_space" type="container" align="left" x="4" width="-8" height="12"> <layer name="loadingbar_fill" type="container" bgcolor="0xFFFFFF" bgalpha="1.0" align="lefttop" width="0" height="100%" /> </layer> </layer> <!-- 载入进度条的动作,这里利用了一个progress元素的progress属性来查看当前的载入进度,然后得出pv也就是百分百。 然后利用这个百分比控制上面进度条的宽度--> <action name="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> <action name="loadingbar_stoploading"> set(loadingbar_isloading, false); set(layer[loadingbar_bg].visible, false); </action> </krpano> |
类似的是百分比的loadingpercenttext.xml
loadingpercenttext.xml
点击代码窗口最右侧按钮,在新窗口打开后复制代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<krpano> <!-- 载入进度文字 --> <!-- 载入进度百分比事件 --> <events name="loadingpercent" keep="true" onxmlcomplete="loadingpercent_startloading();" onloadcomplete="delayedcall(0.25, loadingpercent_stoploading() );" /> <!-- 文字显示 --> <layer name="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="" /> <!-- 百分比的动作 --> <action name="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, '载入 ', get(pv), '%'); ); </action> <action name="loadingpercent_stoploading"> set(loadingpercent_isloading, false); set(layer[loadingpercent_text].visible, false); </action> </krpano> |
在 “移花接木(15)- 全景漫游三种载入进度效果” 上有 1 条评论