项目启动页封面设置

2023-02-14 23:42 作者:晓陌_Siri 0人读过 | 我要投稿

我们每次打开VR全景漫游以后的都会以小行星直接进入到里面的内容，有时候内容图片比较多的话就会发生卡顿，这样对于用户体验并不是很好，所以这节课我们就来给项目设置一个启动画面，那什么是启动画面呢，我们先来看一下实现的效果，打开VR全景平www.5uvr.com，打开这样一个漫游，现在看到的这个就是启动画面：

就是在项目刚启动的时候，不要让他直接加载里面的内容，而是先展示一个设置好的封面图，引导用户自己点击进入，让我们的VR全景漫游和用户产生交互给用户一种高级感，那这样一个项目启动图怎么设置呢，下面我们就一遍分析一遍实现吧，我们打开皮肤文件。1.首先第一步需要一张背景图，盖住整个画面2.然后给她做一个按钮图片，3.按钮上面再加上一行引导用户点击的文字，其实就可以了，4.剩下的就是逻辑交互代码的编写了。在这里我提前准备好了两张图片，分别是我们要用到的背景图和按钮图：

<layer name="bg_pic"

url="../images/desk.jpg"

url.mobile="../images/phone.jpg"

keep="true"

width="100%"

height="100%"

zorder="100"

preload="true"

handcursor="false"

enabled="true"

children="true"

maskchildren="true" >

<layer name="button"

url="../images/button.png"

keep="true"

align="center"

scale="0.8"

scale.mobile="0.5"

y="23%"

enabled="false"

visible="false"

children="false" onover.addevent="tween(layer[button].alpha,1,0.5);tween(layer[title].alpha,1,0.5)" onout.addevent="tween(layer[button].alpha,0.5,1);tween(layer[title].alpha,0,0.5)" onclick.addevent="tween(layer[bg_pic].alpha,0,1);delayedcall(1,set(layer[bg_pic].enabled,false))" >

<layer name="title"

type="text"

keep="true"

html="点击浏览"

align="center"

bgalpha="0"

css="text-align:center;color:#ffffff;font-family:simhei;font-weight:bold;font-size:35px" />

</layer>

<events name="startbuttonevents" keep="true" onloadcomplete="set(layer[button].enabled,true); set(layer[button].visible,true); tween(layer[button].alpha,0.5,1); set(layer[title].alpha,0)" />

这样我们在电脑端的项目启动页就已经做好了，但是我们的VR全景漫游不仅仅在电脑端展示，大多时候我们还是通过手机来分享的所以我们来看一下手机端的效果，文字被严重压缩变形，所以为了适配手机端这里我们还需要给手机端添加一张图片：