移花接木(11)- 制作项目启动画面

启动画面演示

说明

启动画面是全景漫游中很抢眼球的一个环节,在视觉为先的时代,优秀的启动画面可能比好的导航还能加分。今天我们就来讲讲如何添加启动画面。首先告诉大家官方案例的位置。下面是在线观看官方案例。如果你下载了krpano安装包,其位置就在

/examples/xml-usage/introimage/introimage.html

你可以看到官方的案例做了一个小小的图片,大概是占了屏幕的五分之一不到的比例。在刚进入全景的时候展示大概四秒后或在你点击图片后即自动消失。具体可看:

让场景开始即展示图片,10秒后自动隐藏

 

从实现原理上,确实是我们想要的东西,但却不是我要给大家讲的视觉效果。我们要展现的是类似下面这种。

 

QQ图片20150608142220

 

它是一个全屏的画面,而且可以等到全景图载入结束以后才进入全景,而不是真的等到4秒,进入了全景,发现还在全景图还在载入中,那这个启动画面就失去意义了。除了这种基本的启动画面,我们还可以制作开门、翻页、半透明、镂空等启动画面效果。

首先我们要制作三个layer,第一个是container容器,它是一个颜色块,在这里就是一个白色,为什么要用container而不是用图片作为背景呢,首先是一个载入速度的问题,启动画面一定是轻量级的,其次涉及到各种设备的尺寸和分辨率问题,使用container作为背景容易控制。如果你需要背景有纹理,那你可以选择图片,但图片就需要注意尺寸的适应问题,可能会导致纹理被错误地拉伸和扭曲。

另外我们要做一个小小的logo放在中间以及一个文字layer放在logo的下面。

因此就有了下面的代码。你可以放在scene标签外的任何空档位置(复制代码请使用代码框右上角在新窗口中打开)。

 

第一个layer是一个白色的背景,第二个以及第三个分别是logo和文字。注意这里将enabled设为false,也就是无法响应鼠标行为,因为我们需要全景图像载入完成之后才触发enabled,不然用户看到logo,就会很自然地点击logo,但进去以后却发现还是黑的,这样的体验就是不好的。因此我们要把enabled设为false。

另外我们要把onclick写好,这里主要是将启动画面往左隐藏到屏幕外。同时我们还有一个如果不点击的话也是会在规定时间内自动隐藏自动移开的action,因此需要写一个stopdelayedcall

onloadcomplete的events:

这里基本上与logo和文字标题的onclick属性是相似的,但因为启动画面只需要做一次,而onloadcomplete是每个场景的全景载入结束时都会有的,因此这里加了一个ifnot的action进行判断,这样就不会每次载入全景时都会多余地执行这些启动画面的行为,尽管这一步对全景影响微乎其微,但好的逻辑是做好漫游的基础。

 

 

另外,我们还要在startup这个action里加一句实现logo下标题文字的功能。

也就是

查看下一页关于纯画面启动的方法

发表评论