Axure RP8 動態面板之拖動(如簡單音量條)

3 評論 24740 瀏覽 50 收藏 4 分鐘

爬行蟑螂也是剛開始使用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 原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 好東西,收藏了!

    來自上海 回復
  2. 樓主你好,請教一下:如果拖動的時候同時有一個音量的數字變化,怎么實現呢?

    來自北京 回復