效果分析
這個(gè)登陸界面中,我們需要做的效果有下面4個(gè)內(nèi)容:
- 大圖和文字會(huì)隨著劃屏一起移動(dòng),非動(dòng)態(tài)面板多個(gè)狀態(tài)切換,是同一層級(jí)的內(nèi)容滑動(dòng)。
- 背景圖匯隨著劃屏變?yōu)閷?duì)應(yīng)圖片并且放大
- 圖標(biāo)會(huì)隨著劃屏變?yōu)閷?duì)應(yīng)圖標(biāo)
- 頁(yè)碼會(huì)隨著劃屏切換到對(duì)應(yīng)頁(yè)的效果
界面結(jié)構(gòu)
大圖和文字
3屏寬的界面,將圖片和文字?jǐn)[放在對(duì)應(yīng)位置。
將外層動(dòng)態(tài)面板縮小為1屏大小,起到限制顯示區(qū)域的作用。
背景圖
1個(gè)動(dòng)態(tài)面板的3個(gè)狀態(tài),每個(gè)狀態(tài)中是不同的圖。
圖標(biāo)
3個(gè)相同位置的圖標(biāo),默認(rèn)顯示第1個(gè),隱藏其他2個(gè)。
頁(yè)碼
1個(gè)動(dòng)態(tài)面板的3個(gè)狀態(tài),每個(gè)狀態(tài)中表示不同的頁(yè)碼。
登陸和注冊(cè)按鈕
用矩形畫2個(gè)按鈕,本次教程中不涉及登錄之后的內(nèi)容,所以不在這里做交互。
實(shí)現(xiàn)思路
建立全局變量page,默認(rèn)值為1,代表當(dāng)前的頁(yè)碼,各個(gè)元件根據(jù)page的值進(jìn)行相應(yīng)交互。
制作方法
拖動(dòng)分為2類交互,1是拖動(dòng)時(shí),2是拖動(dòng)結(jié)束時(shí)。
拖動(dòng)時(shí)
將大圖和文字分別設(shè)置水平拖動(dòng),并且進(jìn)行邊界限制,不做限制的話就可以左右無(wú)限拖拽了。
拖動(dòng)結(jié)束時(shí)
拖動(dòng)結(jié)束分為向左和向右拖動(dòng)結(jié)束時(shí)2個(gè)交互類型,而拖動(dòng)又分為大距離拖動(dòng)和小距離拖動(dòng),大距離拖動(dòng)結(jié)束時(shí)將跳轉(zhuǎn)到下一頁(yè),小距離拖動(dòng)結(jié)束時(shí)將保持當(dāng)前頁(yè)。
所以我們應(yīng)當(dāng)設(shè)置條件來(lái)判斷拖動(dòng)的距離,我們?cè)O(shè)拖動(dòng)200為大小距離的閥值。
在這里要跟大家介紹一個(gè)函數(shù)——TotalDragX,這個(gè)函數(shù)的意思是從按下到抬起鼠標(biāo)總共拖拽的距離。
如果拖拽距離大于200并且當(dāng)前頁(yè)碼是第1第2頁(yè)的時(shí)候,滿足了大距離的拖動(dòng)條件,則將[[page+1]]。
根據(jù)page值設(shè)置背景圖這個(gè)動(dòng)態(tài)面板切換到對(duì)應(yīng)的狀態(tài),在選擇狀態(tài)中選擇Value(值),狀態(tài)名稱和序號(hào)中填寫全局變量[[page]],這樣是第幾頁(yè)就會(huì)切換到狀態(tài)幾了。
頁(yè)碼這個(gè)動(dòng)態(tài)面板也是一樣的,切換到對(duì)應(yīng)[[page]]的狀態(tài)。
而大圖和文字的,我們要根據(jù)[[page]]在拖動(dòng)結(jié)束時(shí)跳轉(zhuǎn)到整數(shù)的頁(yè)面上,而不是卡在一半。
公式為[[(page-1)*-1屏寬度+左邊的空隙距離]]
【思路重點(diǎn)】大距離拖拽=拖拽成功,page+1,小距離拖拽=拖拽失敗,page不變。
拖動(dòng)結(jié)束處于不同界面時(shí),不同的icon和背景有不同的變化。
icon的變化:顯示當(dāng)前page的icon,隱藏另外2個(gè)icon,當(dāng)前page的icon以中心為錨點(diǎn),線性動(dòng)畫到原始尺寸。另外2個(gè)icon以中心為錨點(diǎn),線性動(dòng)畫到小尺寸
背景的變化:當(dāng)前頁(yè)的背景圖由原尺寸放大,其他2個(gè)背景圖縮小的原尺寸。這樣才能在其他page再一次放大圖片時(shí),依舊是從原始尺寸放大。需要注意的是,在這i類我們需要把動(dòng)態(tài)面板放大到比原來(lái)的圖片尺寸大1像素,否則在你放大圖片的時(shí)候動(dòng)態(tài)面板會(huì)跟著一起放大,圖片會(huì)出框。我在這里的做法是將動(dòng)態(tài)面板高度+1,Y坐標(biāo)-1。
至此,跟著教程將左拖拽結(jié)束時(shí)的交互做完了,下面來(lái)動(dòng)動(dòng)腦筋把向右拖拽做了吧!都是一樣的哦,只是有一些輕微的不同。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。