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