效果分析

這個(gè)登陸界面中，我們需要做的效果有下面4個(gè)內(nèi)容：

1. 大圖和文字會(huì)隨著劃屏一起移動(dòng)，非動(dòng)態(tài)面板多個(gè)狀態(tài)切換，是同一層級(jí)的內(nèi)容滑動(dòng)。
2. 背景圖匯隨著劃屏變?yōu)閷?duì)應(yīng)圖片并且放大
3. 圖標(biāo)會(huì)隨著劃屏變?yōu)閷?duì)應(yīng)圖標(biāo)
4. 頁(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)腦筋把向右拖拽做了吧！都是一樣的哦，只是有一些輕微的不同。