作為手機(jī)應(yīng)用，在過(guò)去的年月里常見(jiàn)的都是以靜態(tài)的可滑動(dòng)圖片作為引導(dǎo)頁(yè)，但是引導(dǎo)頁(yè)是手機(jī)應(yīng)用進(jìn)入的真正首頁(yè)，可以說(shuō)是手機(jī)應(yīng)用的‘臉面’，在要求用戶(hù)體驗(yàn)越來(lái)越精確細(xì)膩的今天，越來(lái)越多的手機(jī)應(yīng)用加入動(dòng)態(tài)效果來(lái)博取目光和焦點(diǎn)------甚至不只是引導(dǎo)頁(yè)，更是酷炫的內(nèi)容介紹和互動(dòng)頁(yè)。接下來(lái)的內(nèi)容我們就利用fullpage.js框架布局CSS3動(dòng)畫(huà)來(lái)打造屬于自己的手機(jī)動(dòng)畫(huà)引導(dǎo)頁(yè)。
首先，我們需要構(gòu)建自己的Android項(xiàng)目，并在assets文件夾下添加文件夾目錄，這里取名為wel_page。
構(gòu)建之后轉(zhuǎn)換開(kāi)發(fā)工具打開(kāi)來(lái)到HBuilder，對(duì)項(xiàng)目管理器部分右鍵選擇導(dǎo)入項(xiàng)目，再選擇“現(xiàn)有的文件夾作為新項(xiàng)目”，一路向下選擇瀏覽文件，找到android開(kāi)發(fā)工具的workspace，找到剛才的項(xiàng)目，選擇assets下的wel_page,如下右圖;
現(xiàn)在，我們就有了一個(gè)web項(xiàng)目的根文件，在此基礎(chǔ)上我們可以按照web網(wǎng)頁(yè)項(xiàng)目進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)，在這里我新建名稱(chēng)為fullpage.html的html文件用來(lái)構(gòu)建頁(yè)面效果，css和js以及img文件夾目錄用來(lái)存放fullpage.html開(kāi)發(fā)過(guò)程中所需的不同資源；
接下來(lái)要做的就是在HBuilder中開(kāi)發(fā)全屏的切換頁(yè)面了，在這里我選擇久負(fù)盛名的fullpage.js開(kāi)源框架，首先去到它的官網(wǎng)，fullpage官網(wǎng)地址：fullPage.js One Page Scroll sections Site Plugin。
點(diǎn)擊download即可下載。下載解壓進(jìn)入pure JavaScript (Alpha)文件夾中，以瀏覽器運(yùn)行的方式打開(kāi)demo.html，可以看到fullpage的基本效果，可以看到，橫豎切換效果都是非常不錯(cuò)的，我們將該文件夾中的文件接入我們的項(xiàng)目中，并將手機(jī)引導(dǎo)頁(yè)需要展示的圖片引入img文件夾，如下圖：
繼續(xù)，將fulllpage.js框架所需的css文件和js文件引用到fullpage.html：
在body中進(jìn)行fullpage.js格式的布局，并聲明內(nèi)部樣式定義整體和頁(yè)面樣式，可都參考或復(fù)制pure JavaScript (Alpha)文件中的demo.html代碼。
再聲明腳本段落進(jìn)行fullpage.js框架的初始化工作，代碼如下（demo.html）：
注意：
（1）#后面的id一定要和框架中外層的div匹配；
（2）css3要設(shè)置為true屬性
（3）關(guān)于其他屬性可以根據(jù)需求去設(shè)置，屬性間用”,”隔開(kāi)，這里提供fullpage框架中
頁(yè)面屬性配置和回掉函數(shù)的參考地址：FullPage.js全屏滾動(dòng)插件學(xué)習(xí)總結(jié) - Jesse131 - 博客園，至此我們已經(jīng)成功的將fullpage框架接入項(xiàng)目中，接下來(lái)我們?cè)诳瞻椎膄ullpage頁(yè)面中添加自己的背景圖片和CSS3動(dòng)畫(huà)。
在內(nèi)部樣式中我定義了針對(duì)某一個(gè)圖片或者文字的CSS3動(dòng)畫(huà)，動(dòng)畫(huà)的具體效果是先來(lái)回旋轉(zhuǎn)，再下移淡出，當(dāng)然還有對(duì)其它三種瀏覽器進(jìn)行兼容的代碼，這里不再啰嗦：
@keyframeshinge{
0%{
-webkit-transform-origin:topleft;
-moz-transform-origin:topleft;
-ms-transform-origin:topleft;
transform-origin:topleft;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
-ms-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%,60%{
-webkit-transform:rotate3d(0,0,1,80deg);
-moz-transform:rotate3d(0,0,1,80deg);
-ms-transform:rotate3d(0,0,1,80deg);
transform:rotate3d(0,0,1,80deg);
-webkit-transform-origin:topleft;
-moz-transform-origin:topleft;
-ms-transform-origin:topleft;
transform-origin:topleft;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
-ms-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
40%,80%{
-webkit-transform:rotate3d(0,0,1,60deg);
-moz-transform:rotate3d(0,0,1,60deg);
-ms-transform:rotate3d(0,0,1,60deg);
transform:rotate3d(0,0,1,60deg);
-webkit-transform-origin:topleft;
-moz-transform-origin:topleft;
-ms-transform-origin:topleft;
transform-origin:topleft;
-webkit-animation-timing-function:ease-in-out;
-moz-animation-timing-function:ease-in-out;
-ms-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1;
}
100%{
-webkit-transform:translate3d(0,43em,0);
-moz-transform:translate3d(0,43em,0);
-ms-transform:translate3d(0,43em,0);
transform:translate3d(0,43em,0);
opacity:0
}
}
緊接著我們需要對(duì)文字或圖片應(yīng)用動(dòng)畫(huà)：
.bg{
-webkit-animation:hinge2salternatebackwards;
animation:hinge2salternatebackwards;
-moz-animation:hinge2salternatebackwards;
-ms-animation:hinge2salternatebackwards;
-o-animation:hinge2salternatebackwards;
animation-delay:0.2s;
-ms-animation-delay:0.2s;
-moz-animation-delay:0.2s;
-webkit-animation-delay:0.2s;
}
其它屏可以根據(jù)自己的需求去繼續(xù)完善和添加頁(yè)面。運(yùn)行發(fā)現(xiàn)動(dòng)畫(huà)能成功進(jìn)行動(dòng)畫(huà)播放和滑動(dòng)切換，那么大功快要告成了，我們最后要做的就是android界面進(jìn)行該頁(yè)面的加載顯示------這里我們利用WebView控件來(lái)加載頁(yè)面，在加載之前要對(duì)項(xiàng)目進(jìn)行右鍵刷新，確保fullpage.html和剛才的文件已經(jīng)同步到assets文件目錄下。
我們需要將MainActivity布局文件中WebView的寬高設(shè)置為匹配父窗口，然后在MainActivity類(lèi)的oncreate方法中查找該WebView的id，并讓該WebView加載assets文件目錄下的fullpage.html頁(yè)面：
至此，我們的引導(dǎo)頁(yè)已經(jīng)完成了，可以在手機(jī)中安裝該Android應(yīng)用查看效果。
注意，完成后測(cè)試過(guò)程中版本或配置較低的手機(jī)可能感覺(jué)加載較慢，有卡頓，這時(shí)候就需要加強(qiáng)WebView的性能了，在這里我接入了騰訊X5內(nèi)核中的WebView，加載明顯更快，效果更好，需要接入的，請(qǐng)移步其官網(wǎng)：騰訊瀏覽服務(wù)。
