Android應用加載fullpage.js框架實現CSS3動畫引導頁

做爲手機應用，在過去的年月裏常見的都是以靜態的可滑動圖片做爲引導頁，可是引導頁是手機應用進入的真正首頁，能夠說是手機應用的‘臉面’，在要求用戶體驗愈來愈精確細膩的今天，愈來愈多的手機應用加入動態效果來博取目光和焦點------甚至不僅是引導頁，更是酷炫的內容介紹和互動頁。接下來的內容咱們就利用fullpage.js框架佈局CSS3動畫來打造屬於本身的手機動畫引導頁。

首先，咱們須要構建本身的Android項目，並在assets文件夾下添加文件夾目錄，這裏取名爲wel_page。

構建以後轉換開發工具打開來到HBuilder，對項目管理器部分右鍵選擇導入項目，再選擇「現有的文件夾做爲新項目」，一路向下選擇瀏覽文件，找到android開發工具的workspace，找到剛纔的項目，選擇assets下的wel_page,以下右圖;


如今，咱們就有了一個web項目的根文件，在此基礎上咱們能夠按照web網頁項目進行網頁開發，在這裏我新建名稱爲fullpage.html的html文件用來構建頁面效果，css和js以及img文件夾目錄用來存放fullpage.html開發過程當中所需的不一樣資源；

接下來要作的就是在HBuilder中開發全屏的切換頁面了，在這裏我選擇久負盛名的fullpage.js開源框架，首先去到它的官網，fullpage官網地址：連接描述。

點擊download便可下載。下載解壓進入pure JavaScript (Alpha)文件夾中，以瀏覽器運行的方式打開demo.html，能夠看到fullpage的基本效果，能夠看到，橫豎切換效果都是很是不錯的，咱們將該文件夾中的文件接入咱們的項目中，並將手機引導頁須要展現的圖片引入img文件夾，以下圖：

繼續，將fulllpage.js框架所需的css文件和js文件引用到fullpage.html：


在body中進行fullpage.js格式的佈局，並聲明內部樣式定義總體和頁面樣式，可都參考或複製pure JavaScript (Alpha)文件中的demo.html代碼。

再聲明腳本段落進行fullpage.js框架的初始化工做，代碼以下（demo.html）：

注意：

（1）#後面的id必定要和框架中外層的div匹配；

（2）css3要設置爲true屬性

（3）關於其餘屬性能夠根據需求去設置，屬性間用」,」隔開，這裏提供fullpage框架中

頁面屬性配置和回掉函數的參考地址：連接描述，至此咱們已經成功的將fullpage框架接入項目中，接下來咱們在空白的fullpage頁面中添加本身的背景圖片和CSS3動畫。

在內部樣式中我定義了針對某一個圖片或者文字的CSS3動畫，動畫的具體效果是先來回旋轉，再下移淡出，固然還有對其它三種瀏覽器進行兼容的代碼，這裏再也不囉嗦：

@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

}

}

緊接着咱們須要對文字或圖片應用動畫：

.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;

}

其它屏能夠根據本身的需求去繼續完善和添加頁面。運行發現動畫能成功進行動畫播放和滑動切換，那麼大功快要告成了，咱們最後要作的就是android界面進行該頁面的加載顯示------這裏咱們利用WebView控件來加載頁面，在加載以前要對項目進行右鍵刷新，確保fullpage.html和剛纔的文件已經同步到assets文件目錄下。

咱們須要將MainActivity佈局文件中WebView的寬高設置爲匹配父窗口，而後在MainActivity類的oncreate方法中查找該WebView的id，並讓該WebView加載assets文件目錄下的fullpage.html頁面：


至此，咱們的引導頁已經完成了，能夠在手機中安裝該Android應用查看效果。

注意，完成後測試過程當中版本或配置較低的手機可能感受加載較慢，有卡頓，這時候就須要增強WebView的性能了，在這裏我接入了騰訊X5內核中的WebView，加載明顯更快，效果更好，須要接入的，請移步其官網：http://x5.tencent.com/。