Axure RP8 動態面板之拖動(如簡單音量條)
爬行蟑螂也是剛開始使用Axure,主要是想要記錄下來,記錄的過程,本身也是一種熟悉和思考,借此也可以分享給需要的人作為參考;基本都會是控件里面最簡單的操作步驟。
這里分享動態面板之拖動。
第一步:拖入三個矩形和一個橢圓形控件 ,分別命名為【左觸點】、【右觸點】、【滑動條】、【圓球】;坐標,寬高如下:
- 【左觸點】——(0,0)(30,100)
- 【右觸點】——(400,0)(30,100)
- 【滑動條】——(30,40)(370,20)
- 【圓球】——(121,30)(40,40)
第二步:選中【圓球】和【滑動條】鼠標右擊,轉化為動態面板;如圖所示,
第三步:進入動態面板的編輯頁面,鼠標點擊空白頁面,右邊屬性欄——選擇事件【拖動時】——選擇【移動】——勾選【圓球】——移動選擇【水平拖動】——設置界限如圖所示;運行,一個簡單的滑動條就成型了。
第四步:如果要讓【圓球】接觸觸點,并做出相應的事件動作;可以如下設置;
這里做的動作是;如果圓球接觸【左觸點】或者【右觸點】就會彈跳到坐標(185,0)
圓球接觸【右觸點】設置:
入動態面板的編輯頁面,鼠標點擊空白頁面,右邊屬性欄——選擇事件【拖動時】——雙擊添加第二個Case2——添加條件——編輯IF條件,具體如圖所示——然后選擇【移動】——勾選【圓球】——移動選擇【絕對位置】,坐標為(185,0),動畫為彈跳——設置界限如圖所示;
圓球接觸【左觸點】設置,重新添加一個Case3,只需要把條件語句里面選擇成【左觸點】即可,其他的都是一樣:
第五步:最后,觀察一下右邊屬性框的事件頁面,Case2和Case里面的條件語句都是Else If ;選中鼠標單擊右鍵,選擇切換成 If 語句;然后運行,就可以了。
(if 和 else if 的區別建議多設置幾個動作體會一下其中的區別)
本文由 @Cassie 原創發布于人人都是產品經理。未經許可,禁止轉載
評論
好東西,收藏了!
樓主你好,請教一下:如果拖動的時候同時有一個音量的數字變化,怎么實現呢?