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