效果分析
這個(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)閱讀并接受
上述條款。