找軟件用軟件,就到華軍軟件園! 軟件發(fā)布
所在位置: 首頁(yè) — 教程攻略 — 教程 — 電腦軟件教程  —  Axure RP教...

Axure RP教程 Axure如何做出拖動(dòng)效果

作者:怪獸 日期:2018-01-19

Axure RP
Axure RP-10.0.0.3882 官方版

編程工具 占存:142.74MB 時(shí)間:2022-10-14

軟件介紹: Axure RP是一款能夠大大提高功能效率的軟件,它能夠高效率制作產(chǎn)品原型,可以減少大部分溝通成本...

立即下載

1.我們制作一個(gè)能夠水平拖動(dòng)的滑塊,并且在拖動(dòng)時(shí)不得超出標(biāo)尺兩端。我們用矩形做一個(gè)標(biāo)尺,并在兩端分別用矩形做好左邊界“left”和右邊界“right”,然后用矩形改變?yōu)閳A形并轉(zhuǎn)為動(dòng)態(tài)面板,作為滑塊“slider”。當(dāng)拖動(dòng)滑塊時(shí),滑塊能夠水平移動(dòng)。并且在移動(dòng)過程中,如果觸碰到兩端邊界要停留在指定的位置上。

首先判斷拖動(dòng)時(shí)是否超出了邊界,如果超出了讓滑塊移動(dòng)到指定位置上。
以左側(cè)邊界為例,矩形“left”的X軸坐標(biāo)為150,寬度為10,如果滑塊接觸到左側(cè)邊界的矩形,我們就要讓滑塊移動(dòng)到X軸160的位置上。因?yàn)槭撬揭苿?dòng),Y軸坐標(biāo)不會(huì)改變,仍然是當(dāng)前滑塊的Y軸坐標(biāo)20。而滑塊接觸到右側(cè)邊界時(shí),要移動(dòng)到的位置是右側(cè)邊界矩形的X軸坐標(biāo)-滑塊的寬度。右側(cè)邊界矩形“right”的X軸坐標(biāo)為560,減去滑塊的寬度20,結(jié)果是540。Y軸的坐標(biāo)同樣是20
 
360截圖20180119143808421.jpg
360截圖20180119143816837.jpg
 
2.了解了邊界限制滑塊的原理,我們就來添加判斷和相應(yīng)的用例動(dòng)作。仍以左側(cè)邊界為例,雙擊動(dòng)態(tài)面板“slider”的【拖動(dòng)時(shí)】事件打開用例編輯界面,然后點(diǎn)擊【添加條件】,設(shè)置條件內(nèi)容為【元件范圍】“slider”接觸【元件范圍】“left”
 
360截圖20180119143827405.jpg
 
3.設(shè)置滿足條件時(shí)的動(dòng)作為【移動(dòng)】“slider”,移動(dòng)【到絕對(duì)位置】x軸“160”y軸“20”
 
360截圖20180119143837686.jpg
 
4.設(shè)置當(dāng)滿足條件【元件范圍】“slider”接觸【元件范圍】“right”時(shí),【移動(dòng)】“slider”【到絕對(duì)位置】x軸“540“y軸”20“。
然后我們讓滑塊能夠被拖動(dòng)。雙擊動(dòng)態(tài)面板的觸發(fā)事件【拖動(dòng)時(shí)】,添加用例動(dòng)作【移動(dòng)】,勾選動(dòng)態(tài)面板“slider”或者“當(dāng)前元件”,選擇【移動(dòng)】列表中的選項(xiàng)“水平拖動(dòng)”
 
360截圖20180119143851693.jpg
 
以上就是Axure RP做出拖動(dòng)效果方法教程,更多Axure RP等軟件相關(guān)教程請(qǐng)到華軍軟件園軟件教程專區(qū)!

相關(guān)文章

最新教程 更多

圖片轉(zhuǎn)為pdf怎么弄?碼住這九個(gè)轉(zhuǎn)換方法,幾百?gòu)垐D片只需30秒! 圖片轉(zhuǎn)為pdf怎么弄?碼住這九個(gè)轉(zhuǎn)換方法,幾百?gòu)垐D片只需30秒!

如何實(shí)現(xiàn)圖片轉(zhuǎn)換成pdf格式?簡(jiǎn)單幾步,輕松搞定! 如何實(shí)現(xiàn)圖片轉(zhuǎn)換成pdf格式?簡(jiǎn)單幾步,輕松搞定!

視頻轉(zhuǎn)GIF文件過大?掌握這4個(gè)轉(zhuǎn)換技巧,輕松平衡畫質(zhì)和體積! 視頻轉(zhuǎn)GIF文件過大?掌握這4個(gè)轉(zhuǎn)換技巧,輕松平衡畫質(zhì)和體積!

視頻格式轉(zhuǎn)換后如何保持原音質(zhì)和畫質(zhì)?分享無損轉(zhuǎn)換的3個(gè)技巧?。ㄔ敿?xì)教程) 視頻格式轉(zhuǎn)換后如何保持原音質(zhì)和畫質(zhì)?分享無損轉(zhuǎn)換的3個(gè)技巧!(詳細(xì)教程)

實(shí)時(shí)變聲器免費(fèi)版,讓你的聲音充滿樂趣——聲音的魔法師! 實(shí)時(shí)變聲器免費(fèi)版,讓你的聲音充滿樂趣——聲音的魔法師!

熱門教程 更多

電腦重裝系統(tǒng)后沒聲音怎么辦-驅(qū)動(dòng)精靈教程 電腦重裝系統(tǒng)后沒聲音怎么辦-驅(qū)動(dòng)精靈教程

谷歌瀏覽器怎么清除緩存-谷歌瀏覽器清除緩存的方法 谷歌瀏覽器怎么清除緩存-谷歌瀏覽器清除緩存的方法

金山打字通怎么練打字-金山打字通練習(xí)打字方法 金山打字通怎么練打字-金山打字通練習(xí)打字方法

bootcamp驅(qū)動(dòng)如何升級(jí)?bootcamp驅(qū)動(dòng)升級(jí)方法 bootcamp驅(qū)動(dòng)如何升級(jí)?bootcamp驅(qū)動(dòng)升級(jí)方法

qq音樂皮膚怎么換?-qq音樂換皮膚方法 qq音樂皮膚怎么換?-qq音樂換皮膚方法