Axure:使用動態面板實現拖動的方法
本文分享了一個在Axure中利用動態面板實現拖動效果的方法,一起來看看~
分析:
在Axure元件庫中,動態面板是唯一一個能夠實現拖動效果的元件。所以,實現步驟大體應該如下:
- 元件放入動態面板的首個狀態中;
- 為動態面板添加“拖動時”的用例。
實現:
步驟1:添加兩個元件:滑塊外框,命名為“外框”,滑塊,命名為“滑塊”,如下:
此時:“外框”元件的的X軸坐標為100,寬度為202,高度31;“滑塊”元件的X軸坐標為100,寬度為48,高度31,如下:
步驟2:將“滑塊”元件,【轉換為動態面板】,命名為“滑動動態”,放置于外框左側處,如下:
步驟三,為“滑塊”添加【拖動時】的用例。
用例分析,產生滑動的效果,需將此元件水平拖動至最右,即拖動距離為 100(邊框X軸坐標)<=X<=302(邊框X軸坐標+邊框寬度)。
用例設計如下:
F5預覽,可以在界限內隨意拖動了!
原型鏈接,歡迎下載。
鏈接:https://pan.baidu.com/s/1XpiW0EPQA4PmNy7NKduoXA 密碼:u1hy
本文由 @小甜甜不甜 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自 Unsplash ,基于 CC0 協議
評論
- 目前還沒評論,等你發揮!