Axure教程:長頁或長圖滾動效果
如何利用Axure快速實現長頁手動拖拽特效呢?本文在這里為大家奉上了詳細教程,enjoy~
很久之前在一篇文章中通過文字回復過,利用Axure快速實現長頁手動拖拽特效的方式。后續陸續有私信問具體怎么做,光靠文字有人成功有人失敗。
說實話自己也好久沒有動手制作原型,這里將特效以詳細教程方式發出來,順便重溫下。
Axure版本8.0.0.3293。
成品展示
元件準備
- 首先在網上隨便找個手機框圖或者下個組件庫,再不濟就畫個框。
- 準備你的長頁內容,一張長海報、一個設計好的長頁面、一個簡單的矩形。
話不多開動
1. 上框,沒錯我是最不濟的框;
2. 上長頁;
emmmmmm,太水了我們換一個做的頁面吧~
好像也差不多,就這么著吧!
3. 設置固定區域:創建動態面板,長頁在這個區域內滑動。(長度要固定并記住,她=435)
4. 放入長頁
長頁可以在動態面板內直接寫,也可以引入其他做好的頁面。
我直接把他放到動態面板的State1中。(記住長頁的長,他=1116)
PS:你的長頁如果不是圖片而是頁面,一定要將其轉為動態面板,并且自動調整尺寸。這個位置可能會是你最終失敗的原因,留個坑,如果失敗了多看兩遍這句話。
5. 召喚你的小學數學老師
還記得她和他嗎?
她=435;他=1116;
他往上最高可以到=1116-435=681;
他往下最低可以到=1116(沒錯就是他自己)。
6. 給他上限制
a. 點到你的長頁上
b. 雙擊交互中的“拖動時”
第一步:添加動作“移動”;
第二步:選擇原件“你的長頁”;
第三步:移動選擇“存執拖動”;
第四步:點擊“添加邊界”;
第五步:設置頂部邊界:>= -681? (負數哈);
第六步:設置底部邊界:<= 1116;
完成,試試效果。
進階案例
做出滑到底部提示沒有內容后,頁面自動彈回的效果。下次有空再聊~
本文由@周關利 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
評論
- 目前還沒評論,等你發揮!