移花接木(15)- 全景漫游三种载入进度效果

更新于 2020.11.19 1.20.9

官方下载包路径

你电脑的路径\krpano-1.20.9\viewer\examples\loading-progress\

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线案例

(点击reload按钮重新载入查看)

 

关于载入进度

全景漫游因为需要载入场景中的图片,因此在线浏览时往往需要考虑全景图完全载入之前的用户体验。如果浏览者需要较长时间等待,

那么一个等待画面或者提示当前全景载入进度的显示方式是最佳的方式。

krpano的案例(目前在)中提供了相关的使用方法(注意,仅适用于全景图片的载入进度,不适用于全景视频载入)。

 

步骤

  1. 在以下代码选择其中一行或者多行加入到tour.xml中,每一个include代表了一种载入进度效果
  2. 将官方安装包对应的3个xml文件以及loadinganimation.png放到项目文件夹vtour中。

源代码详解

 

loadinganimation.xml

点击代码窗口最右侧按钮,在新窗口打开后复制代码

其上面这段代码的核心loadinganimation_animate动态热点(也就是png图片序列)是相似的。

 

进度动画需要显示的时间间歇是在onxmlcompleteonloadcomplete之间,因此在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

点击代码窗口最右侧按钮,在新窗口打开后复制代码

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

 

类似的是百分比的loadingpercenttext.xml

 

loadingpercenttext.xml

点击代码窗口最右侧按钮,在新窗口打开后复制代码

 

在 “移花接木(15)- 全景漫游三种载入进度效果” 上有 1 条评论

发表评论