起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure｜豆瓣電影APP：滑屏切換和菜單頂部吸附結合的交互實現
本文是關于豆瓣電影APP在滑屏切換和菜單頂部吸附結合的交互實現。enjoy~
從預覽效果來看，這里涉及到滑屏和單擊左右切換、頂部菜單兩個主頁的吸附這兩大交互。
我的上一篇文章講的就是前一大交互，不過我還是會在這里復習一下的。
第一步：截屏，切圖
我的手機可以長屏截屏，得到第一頁截屏：
１、切圖
我們需要切到如下素材：手機狀態欄和搜索框、廣告、正在熱映黑字、即將上映灰字、黑色滑塊、滑塊下的灰色線條、電影主頁內容，下方主菜單。
２、操作
拉輔助線（注意放大貼合到像素級別）- 切圖工具沿著輔助線拉矩形 – 點擊文件-導出-儲存為web格式 – 找到導出的文件夾images – 命名。
第二屏中間有滾動日期，沒有截到長屏，于是截了8張屏，然后慢慢切圖：
切圖需要取得素材：正在熱映灰字、即將上映黑字、時間欄、主頁內容。
如圖：
整合一下素材：
第二步：將素材放入Axure
由于我的手機分辨率是1080*1920，于是我設置的原型尺寸為360*640，縮小三倍。
鎖定寬高比，設置寬為360，正在熱映圖則設置為180。
接著就是按住ctrl+shift，復制拖動正在熱映插入即將上映灰字，和黑色滑塊，設置高為2像素，切到的黑色滑塊圖尺寸為540*5，高5除以三，取2像素（因為不能設置小數）。
為了不讓黑色滑塊另一邊不露空隙，我要將它上移1像素，留1像素至于灰色線條之上（灰色線條像素為1）經計算正在熱映黑字Y坐標為189，高為38，相加為227，那么黑色滑塊Y坐標為226，灰色線條Y坐標為227。
繼續插入主頁和底部菜單，因為尺寸為360*640，底部菜單的高為49，所以設置它的Y坐標為591。
插入時間欄，因為它是在即將上映那一主頁最上部的，所以Y坐標為228，和這邊主頁一樣。（先隱藏掉，這點最后會講）
將各個元素命名，將需要頂部吸附的元素組合，命名為菜單組。
將會滾動的元素：廣告，吸附菜單組，主頁選中，轉換為動態面板，命名為滾動。
因為搜索框高為64，640減去64為576，設置動態面板樣式，尺寸為360*576，屬性自動顯示垂直滾動條。
先F5預覽一下,只有滾動效果，沒有左右滑屏和菜單吸附效果。
先看那個時間欄的高度為74，將主頁轉換為動態面板，取消自動調整為內容尺寸，添加狀態，狀態2插入內容圖片，第一張圖設置Y坐標為74，為了給時間欄留出空間。
設置兩個菜單為動態面板，添加狀態，插入圖片，目前所有素材都上去了，那么都命名好
第三步，開始交互
（１）第一大交互左右滑動或點擊切換主頁
首先設置向左拖動結束時的交互，如下圖，以此類推設置向右拖動結束時的交互
設置兩個灰色字體的點擊事件的切換，先看即將上映灰字，交互和上面是一樣的：
以此類推，設置正在熱映灰字的交互，預覽一下：（吐槽一下：GIF錄制和壓縮真的很費時間??！我總要想辦法讓它不超過2M）
OK，第一大交互搞定了，但是上面沒有頂部吸附效果，休息一下。
（２）第二大交互：兩種狀態下的菜單頂部吸附
變量scrollX和scrollY
首先講一下變量scrollX和scrollY,就是 動態面板滾動的距離，也可以說，scrollX是動態面板滾動時元件的X坐標，scrollY是動態面板滾動時元件的Y坐標。首先要知道Axure的Y坐標相對于我們的視覺習慣是剛好相反的，因為它的Y坐標是越往下越大，如圖：一開始坐標為（0，0）當你往上滾動100時，此時它的坐標為（0，100）；
讓我們驗證一下，插入一個矩形，設置當動態面板滾動時，顯示scrollY的數值大小：
如果理解了，那我們開始做頂部吸附交互吧。
需要思考的問題
首先要知道，何時開始吸附，何時停止吸附，然后要知道怎么個吸附法
答案來了：
開始吸附就是當滾動的距離剛好到達菜單欄Y坐標的那一刻，結束吸附就是滾動距離沒有達到菜單欄Y坐標；此時就要知道菜單欄的Y坐標,為125，那等于或超過125時，開始吸附，小于時則停止。
讓菜單欄吸附就是讓菜單永遠處于最高的部位，而最高的部位剛好就是（0，scrollY）,記住在最頂部有一個隱形的Y坐標一直隨著滾動而變化。停止吸附就是菜單欄回到它原來的地方。
case1：
case2：
快要大功告成了，但是還有兩個問題：
- 即將上映主頁時間欄沒有吸附，之前將它隱藏了，如果不隱藏，那么正在熱映主頁也會看到。
- 仔細看上圖，在吸附的同時切換主頁，會發現吸附欄是透明的，因為菜單黑白兩種顏色字體切換時是有逐漸這個動畫的。
那要如何解決呢？
第一個問題這樣：index載入時，隱藏它，當主頁向左滑動結束時（包括點擊即將上映灰字），將時間欄顯示，向右滑動結束時（包括點擊正在熱映灰字），將時間欄隱藏。
第二個問題這樣：加一個白色矩形置于吸附菜單欄和主頁之間。
我錯了，其實是把矩形插入到菜單欄組合，并放在最下面，OK,預覽一下。
我發現學習一個工具的最好辦法就是直接上手做，以點帶面，即學即用，而不是想先系統學會這個工具再開始去做。
共勉！
本文由 @kevin?原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
雖然做的效果還是比較簡單的，但樓主的這個GIF教程真心贊啊，說實話光是截圖說明就已經很費事了，動圖的表現力確實比靜圖好。
希望對新手們有很好的幫助。 ??
樓主很棒， 教程很有用，正在學習中，謝謝！
不客氣，我也是幾個禮拜前開始學習，邊學邊發教程學得更扎實
為了獲得更好的閱讀體驗，請看http://www.jianshu.com/p/f630f5f517f6，因為簡書上傳GIF大小無限制，這里我把大文件GIF二次錄制成了多個小GIF.所以畫質有點差。
這nm三年前就做出來了。?！，F在發這個教程連新手都不會看吧
看不看不重要，重要的是我發教程的這個過程