爬行蟑螂也是剛開(kāi)始使用Axure，主要是想要記錄下來(lái)，記錄的過(guò)程，本身也是一種熟悉和思考，借此也可以分享給需要的人作為參考；基本都會(huì)是控件里面最簡(jiǎn)單的操作步驟。

這里分享動(dòng)態(tài)面板之拖動(dòng)。

第一步：拖入三個(gè)矩形和一個(gè)橢圓形控件 ，分別命名為【左觸點(diǎn)】、【右觸點(diǎn)】、【滑動(dòng)條】、【圓球】；坐標(biāo)，寬高如下：

• 【左觸點(diǎn)】——（0,0）（30,100）
• 【右觸點(diǎn)】——（400,0）（30,100）
• 【滑動(dòng)條】——（30，40）（370,20）
• 【圓球】——（121,30）（40,40）

第二步：選中【圓球】和【滑動(dòng)條】鼠標(biāo)右擊，轉(zhuǎn)化為動(dòng)態(tài)面板；如圖所示，

第三步：進(jìn)入動(dòng)態(tài)面板的編輯頁(yè)面，鼠標(biāo)點(diǎn)擊空白頁(yè)面，右邊屬性欄——選擇事件【拖動(dòng)時(shí)】——選擇【移動(dòng)】——勾選【圓球】——移動(dòng)選擇【水平拖動(dòng)】——設(shè)置界限如圖所示；運(yùn)行，一個(gè)簡(jiǎn)單的滑動(dòng)條就成型了。

第四步：如果要讓【圓球】接觸觸點(diǎn)，并做出相應(yīng)的事件動(dòng)作；可以如下設(shè)置；

這里做的動(dòng)作是；如果圓球接觸【左觸點(diǎn)】或者【右觸點(diǎn)】就會(huì)彈跳到坐標(biāo)（185,0）

圓球接觸【右觸點(diǎn)】設(shè)置：

入動(dòng)態(tài)面板的編輯頁(yè)面，鼠標(biāo)點(diǎn)擊空白頁(yè)面，右邊屬性欄——選擇事件【拖動(dòng)時(shí)】——雙擊添加第二個(gè)Case2——添加條件——編輯IF條件，具體如圖所示——然后選擇【移動(dòng)】——勾選【圓球】——移動(dòng)選擇【絕對(duì)位置】，坐標(biāo)為（185,0），動(dòng)畫(huà)為彈跳——設(shè)置界限如圖所示；

圓球接觸【左觸點(diǎn)】設(shè)置，重新添加一個(gè)Case3,只需要把條件語(yǔ)句里面選擇成【左觸點(diǎn)】即可,其他的都是一樣：

第五步：最后，觀察一下右邊屬性框的事件頁(yè)面，Case2和Case里面的條件語(yǔ)句都是Else If ；選中鼠標(biāo)單擊右鍵，選擇切換成 If 語(yǔ)句；然后運(yùn)行，就可以了。

（if 和 else if 的區(qū)別建議多設(shè)置幾個(gè)動(dòng)作體會(huì)一下其中的區(qū)別）

本文由 @Cassie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載