2018-4-12 藍藍設(shè)計的小編
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
每次QQ有新的重要版本發(fā)布時，移動端的介紹使用了HTML5頁面，通過7個獨立的頁面簡潔地介紹了它的主要功能。在每個頁面切換時伴隨著背景圖片的切換，讓介紹頁面生動有趣。
我們來看看如何實現(xiàn)這種APP介紹頁面的效果，點擊下方的鏈接查看完成后的效果，下面是完成后的效果圖：
（內(nèi)有源文件和相關(guān)資源素材）
1、使用第一個動態(tài)面板顯示7個介紹頁面
2、使用第二個動態(tài)面板顯示背景圖片的切換
3、在向上和向下拖動介紹頁面時，觸發(fā)背景圖片動態(tài)面板的狀態(tài)切換
4、首頁的向上箭頭動畫，通過元件的顯示與隱藏實現(xiàn)循環(huán)動畫效果
5、準備資源：資源包括介紹頁面上的圖片，通過查看源代碼，樣式表從中獲取圖片位置并下載，最終下載后的資源如下圖所示（從演示頁面下載源文件）：
（1）添加一個矩形框作為菜單欄，大小為480*67，背景為藍色，文字為白色，字體大小為18，設(shè)置文字內(nèi)容為“I’m QQ – 每一天 ， 樂在溝通”。
（2）添加個動態(tài)面板
，大小為480*680，放在標題欄下方，命名為main，取消“自動調(diào)整為內(nèi)容尺寸”勾選狀態(tài)，雙擊進入第一個狀態(tài)，添加第一個介紹頁面。
導(dǎo)入背景圖，設(shè)置大小480*680，添加QQ的logo和介紹文字圖片，添加版本信息和發(fā)布日期，最后添加一個無邊框矩形作為下載按鈕，大小為250*60，藍底白字，文字大小為28，圓角大小30：
（3）為動態(tài)面板main添加第二個狀態(tài)，在中間位置添加一個文字，大小為28，文字顏色為白色（為了教程看得清楚，將文字設(shè)置成了黑色）。
（4）重復(fù)第（2）（3）兩步，分別添加第3到第7個狀態(tài)，設(shè)置里面的圖片和文字內(nèi)容。
（5）添加頁腳
，作為菜單欄，雙擊修改文字內(nèi)容為”點擊下載源文字“，單擊后下載本實例源文件（在瀏覽器中打開頁面后下載）。
雙擊動態(tài)面板main打開第一個狀態(tài)，我們來處理向上箭頭動畫。
添加箭頭圖片，命名為arrow，右鍵轉(zhuǎn)換為動態(tài)面板，雙擊進入動態(tài)面板狀態(tài)一，添加一個熱區(qū)元件用來做事件控制，命名為control，這個熱區(qū)通過顯示和隱藏事件來處理箭頭動畫的循環(huán)向上滑動顯示效果。
（1）選擇control，添加顯示時事件
a.移動箭頭圖片到（0，30）處
b.再移動到（0，0）位置，添加線性動畫，時長1秒
c.隱藏箭頭圖片和控制元件control，箭頭添加淡出動畫效果，時長1秒，control的隱藏時會觸發(fā)它的隱藏事件。
d.等待1秒鐘
（2）選擇control，添加隱藏時事件
顯示當前control元件和箭頭圖片，顯示control時會觸發(fā)它的顯示時事件，這樣達到循環(huán)處理的目的。
（3）動態(tài)面板載入時事件
先設(shè)置control為隱藏狀態(tài)，在動態(tài)面板載入時，顯示control。
添加一個新的動態(tài)面板，大小為480*680，命名為back_img，添加三個狀態(tài)，用來放置背景的三張圖片，將該動態(tài)面板放在動態(tài)面板main之后。
（1）動態(tài)面板main的向上拖動結(jié)束事件
（2）動態(tài)面板main的向下拖動結(jié)束事件
（3）添加控制事件
在向上拖動和向下拖動動態(tài)面板main時，需要分別切換一下背景動態(tài)面板狀態(tài)，顯示不同圖片。
添加兩個熱區(qū)，用來控制向上和向下拖動結(jié)束事件，給熱區(qū)添加單擊事件，事件里分別添加兩個事件分支，分別顯示不同的背景圖片。
給動態(tài)面板main的向上滑動結(jié)束和向下滑動結(jié)束事件添加觸發(fā)事件，分別觸發(fā)上面兩個控制事件：
一切準備就緒，按下F5鍵預(yù)覽一下效果。
鼠標向上滑動查看，注意背景圖片的切換變化。
以上帖子內(nèi)容是些思路性的引導(dǎo)，請結(jié)合源文件查看以上步驟會更清晰。
一、實現(xiàn)思路
二、實現(xiàn)步驟
1、界面布局
2、首頁向上箭頭動畫
4、背景動態(tài)面板
5、事件處理
三、預(yù)覽
藍藍設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍藍設(shè)計的小編 http://m.sillybuy.com