我們來(lái)看看如何實(shí)現(xiàn)這種APP介紹頁(yè)面的效果，點(diǎn)擊下方的鏈接查看完成后的效果，下面是完成后的效果圖：

（內(nèi)有源文件和相關(guān)資源素材）

一、實(shí)現(xiàn)思路

1、使用第一個(gè)動(dòng)態(tài)面板顯示7個(gè)介紹頁(yè)面

2、使用第二個(gè)動(dòng)態(tài)面板顯示背景圖片的切換

3、在向上和向下拖動(dòng)介紹頁(yè)面時(shí)，觸發(fā)背景圖片動(dòng)態(tài)面板的狀態(tài)切換

4、首頁(yè)的向上箭頭動(dòng)畫(huà)，通過(guò)元件的顯示與隱藏實(shí)現(xiàn)循環(huán)動(dòng)畫(huà)效果

5、準(zhǔn)備資源：資源包括介紹頁(yè)面上的圖片，通過(guò)查看源代碼，樣式表從中獲取圖片位置并下載，最終下載后的資源如下圖所示（從演示頁(yè)面下載源文件）：

二、實(shí)現(xiàn)步驟

1、界面布局

（1）添加一個(gè)矩形框作為菜單欄，大小為480*67，背景為藍(lán)色，文字為白色，字體大小為18，設(shè)置文字內(nèi)容為“I’m QQ – 每一天 ， 樂(lè)在溝通”。

（2）添加個(gè)動(dòng)態(tài)面板

，大小為480*680，放在標(biāo)題欄下方，命名為main，取消“自動(dòng)調(diào)整為內(nèi)容尺寸”勾選狀態(tài)，雙擊進(jìn)入第一個(gè)狀態(tài)，添加第一個(gè)介紹頁(yè)面。

導(dǎo)入背景圖，設(shè)置大小480*680，添加QQ的logo和介紹文字圖片，添加版本信息和發(fā)布日期，最后添加一個(gè)無(wú)邊框矩形作為下載按鈕，大小為250*60，藍(lán)底白字，文字大小為28，圓角大小30：

（3）為動(dòng)態(tài)面板main添加第二個(gè)狀態(tài)，在中間位置添加一個(gè)文字，大小為28，文字顏色為白色（為了教程看得清楚，將文字設(shè)置成了黑色）。

（4）重復(fù)第（2）（3）兩步，分別添加第3到第7個(gè)狀態(tài)，設(shè)置里面的圖片和文字內(nèi)容。

（5）添加頁(yè)腳

，作為菜單欄，雙擊修改文字內(nèi)容為”點(diǎn)擊下載源文字“，單擊后下載本實(shí)例源文件（在瀏覽器中打開(kāi)頁(yè)面后下載）。

2、首頁(yè)向上箭頭動(dòng)畫(huà)

雙擊動(dòng)態(tài)面板main打開(kāi)第一個(gè)狀態(tài)，我們來(lái)處理向上箭頭動(dòng)畫(huà)。

添加箭頭圖片，命名為arrow，右鍵轉(zhuǎn)換為動(dòng)態(tài)面板，雙擊進(jìn)入動(dòng)態(tài)面板狀態(tài)一，添加一個(gè)熱區(qū)元件用來(lái)做事件控制，命名為control，這個(gè)熱區(qū)通過(guò)顯示和隱藏事件來(lái)處理箭頭動(dòng)畫(huà)的循環(huán)向上滑動(dòng)顯示效果。

（1）選擇control，添加顯示時(shí)事件

a.移動(dòng)箭頭圖片到（0，30）處

b.再移動(dòng)到（0，0）位置，添加線性動(dòng)畫(huà)，時(shí)長(zhǎng)1秒

c.隱藏箭頭圖片和控制元件control，箭頭添加淡出動(dòng)畫(huà)效果，時(shí)長(zhǎng)1秒，control的隱藏時(shí)會(huì)觸發(fā)它的隱藏事件。

d.等待1秒鐘

（2）選擇control，添加隱藏時(shí)事件

顯示當(dāng)前control元件和箭頭圖片，顯示control時(shí)會(huì)觸發(fā)它的顯示時(shí)事件，這樣達(dá)到循環(huán)處理的目的。

（3）動(dòng)態(tài)面板載入時(shí)事件

先設(shè)置control為隱藏狀態(tài)，在動(dòng)態(tài)面板載入時(shí)，顯示control。

4、背景動(dòng)態(tài)面板

添加一個(gè)新的動(dòng)態(tài)面板，大小為480*680，命名為back_img，添加三個(gè)狀態(tài)，用來(lái)放置背景的三張圖片，將該動(dòng)態(tài)面板放在動(dòng)態(tài)面板main之后。

5、事件處理

（1）動(dòng)態(tài)面板main的向上拖動(dòng)結(jié)束事件

（2）動(dòng)態(tài)面板main的向下拖動(dòng)結(jié)束事件

（3）添加控制事件

在向上拖動(dòng)和向下拖動(dòng)動(dòng)態(tài)面板main時(shí)，需要分別切換一下背景動(dòng)態(tài)面板狀態(tài)，顯示不同圖片。

添加兩個(gè)熱區(qū)，用來(lái)控制向上和向下拖動(dòng)結(jié)束事件，給熱區(qū)添加單擊事件，事件里分別添加兩個(gè)事件分支，分別顯示不同的背景圖片。

給動(dòng)態(tài)面板main的向上滑動(dòng)結(jié)束和向下滑動(dòng)結(jié)束事件添加觸發(fā)事件，分別觸發(fā)上面兩個(gè)控制事件：

三、預(yù)覽

一切準(zhǔn)備就緒，按下F5鍵預(yù)覽一下效果。

鼠標(biāo)向上滑動(dòng)查看，注意背景圖片的切換變化。

以上帖子內(nèi)容是些思路性的引導(dǎo)，請(qǐng)結(jié)合源文件查看以上步驟會(huì)更清晰。