我們每次打開VR全景漫游以后的都會(huì)以小行星直接進(jìn)入到里面的內(nèi)容，有時(shí)候內(nèi)容圖片比較多的話就會(huì)發(fā)生卡頓，這樣對(duì)于用戶體驗(yàn)并不是很好，所以這節(jié)課我們就來(lái)給項(xiàng)目設(shè)置一個(gè)啟動(dòng)畫面，那什么是啟動(dòng)畫面呢，我們先來(lái)看一下實(shí)現(xiàn)的效果，打開VR全景平www.5uvr.com，打開這樣一個(gè)漫游，現(xiàn)在看到的這個(gè)就是啟動(dòng)畫面：

? 就是在項(xiàng)目剛啟動(dòng)的時(shí)候，不要讓他直接加載里面的內(nèi)容，而是先展示一個(gè)設(shè)置好的封面圖，引導(dǎo)用戶自己點(diǎn)擊進(jìn)入，讓我們的VR全景漫游和用戶產(chǎn)生交互給用戶一種高級(jí)感，那這樣一個(gè)項(xiàng)目啟動(dòng)圖怎么設(shè)置呢，下面我們就一遍分析一遍實(shí)現(xiàn)吧，我們打開皮膚文件。1.首先第一步需要一張背景圖，蓋住整個(gè)畫面2.然后給她做一個(gè)按鈕圖片，3.按鈕上面再加上一行引導(dǎo)用戶點(diǎn)擊的文字，其實(shí)就可以了，4.剩下的就是邏輯交互代碼的編寫了。在這里我提前準(zhǔn)備好了兩張圖片，分別是我們要用到的背景圖和按鈕圖：

<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="點(diǎn)擊瀏覽"? ? ? ??

? ? ?? ? align="center" ? ?

? ?? ? ? bgalpha="0" ? ??

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

? ? ? </layer> ?

?</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)" ?/>

? ? ?這樣我們?cè)陔娔X端的項(xiàng)目啟動(dòng)頁(yè)就已經(jīng)做好了，但是我們的VR全景漫游不僅僅在電腦端展示，大多時(shí)候我們還是通過(guò)手機(jī)來(lái)分享的所以我們來(lái)看一下手機(jī)端的效果，文字被嚴(yán)重壓縮變形，所以為了適配手機(jī)端這里我們還需要給手機(jī)端添加一張圖片：

手機(jī)端啟動(dòng)頁(yè)封面圖

現(xiàn)在我們?cè)賮?lái)看一下效果，這樣電腦端就和手機(jī)端都適配了：

-禁止轉(zhuǎn)載-