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