Axure怎么制作拖動(dòng)滑塊效果? Axure滑塊動(dòng)畫的制作方法
我要評論在很多網(wǎng)站中的驗(yàn)證碼部分，都用到了滑塊拖拽的功能實(shí)現(xiàn)驗(yàn)證碼的輸入，該制作這個(gè)動(dòng)畫效果呢？下面我們就來看看詳細(xì)的教程。
1、首先在場景中繪制“1條直線”和“1個(gè)圓形”
2、將圓形和直線使用對齊工具，垂直方向?qū)R。因?yàn)槲覀兿Ｍ麑?shí)現(xiàn)的效果是圓形滑塊在直線上水平方向滑動(dòng)的。
3、將圓形轉(zhuǎn)換成動(dòng)態(tài)面板，并且命名為“滑塊”，用于后續(xù)交互制作。
4、選擇“滑塊”的動(dòng)態(tài)面板，為其添加“拖動(dòng)時(shí)”的動(dòng)作。
5、完成后，為其添加“移動(dòng)”的反應(yīng)動(dòng)作，本例子中，移動(dòng)反應(yīng)動(dòng)作的設(shè)置是重點(diǎn)，請大家注意。
6、這里需要主要講解幾點(diǎn)，我們在設(shè)置中可以看到，移動(dòng)的選項(xiàng)包含了：到達(dá)、經(jīng)過、跟隨拖動(dòng)、跟隨水平拖動(dòng)、跟隨垂直拖動(dòng)、回拖動(dòng)前位置6個(gè)選項(xiàng)。
因?yàn)槌Ｒ?guī)場景下，滑塊都是水平方向移動(dòng)的，所以我們這里選擇“跟隨水平拖動(dòng)”
7、軌道的選項(xiàng)包含：直線，順時(shí)針曲線，逆時(shí)針曲線3個(gè)選項(xiàng)，在當(dāng)前案例中，我們選擇“直線”，如果選擇其他2個(gè)，那拖動(dòng)起來，滑塊不知道要去哪兒了。
8、最后一個(gè)設(shè)置，邊界，邊界的作用用來設(shè)置滑塊移動(dòng)的范圍，因?yàn)楸纠又谢瑝K是水平方向移動(dòng)的，所以我們設(shè)置做邊距大于等于400，右編輯小魚等于800
9、完成后，點(diǎn)擊確定。該交互效果就制作完畢了。
以上就是Axure拖動(dòng)滑塊效果的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
Axure怎么制作加載動(dòng)畫中的圓環(huán)?
axure怎么實(shí)現(xiàn)多張圖片同區(qū)域左右滑動(dòng)顯示效果?
axure怎么添加滾動(dòng)條? axure水平垂直滾動(dòng)條的設(shè)置方法
相關(guān)文章
Axure rp中自適應(yīng)視圖怎么設(shè)置和使用?
Axure rp中自適應(yīng)視圖怎么設(shè)置和使用？Axure rp制作頁面的時(shí)候，要考慮手機(jī)觀看電腦觀看和平板觀看的效果，這時(shí)候就需要使用自適應(yīng)視圖，下面我們就來看看詳細(xì)的教程，需要2019-07-15
Axure怎么批量清除參考線？Axure繪圖的時(shí)候，添加了參考線，想要?jiǎng)h除參考線，該怎么清除呢？下面我們就來看看詳細(xì)教程，需要的朋友可以參考下2019-07-12
Axure怎么設(shè)置網(wǎng)格寬度? axure設(shè)置輔助線寬度的教程
Axure怎么設(shè)置網(wǎng)格寬度？Axure顯示柵格以后，想要設(shè)置網(wǎng)格的寬度，該怎么設(shè)置呢？下面我們就來看看axure設(shè)置輔助線寬度的教程，需要的朋友可以參考下2019-07-12
Axure圖片怎么添加交互效果? Axure設(shè)置圖像行為的技巧
Axure圖片怎么添加交互效果？Axure插入的圖像想要添加一些效果，比如鼠標(biāo)放在圖像上面可以點(diǎn)擊按鈕清空等效果，下面我們就來看看Axure設(shè)置圖像行為的技巧，需要的朋友可以2019-07-11
Axure RP9怎么設(shè)置黑暗模式？Axure軟件默認(rèn)的界面是白色的界面，很明亮，想要設(shè)置黑暗模式，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2019-07-11
Axure rp怎么實(shí)現(xiàn)頁面部分區(qū)域懸浮效果?
Axure rp怎么實(shí)現(xiàn)頁面部分區(qū)域懸浮效果？經(jīng)常能在網(wǎng)站上看到懸浮的頁面，想要制作這個(gè)懸浮效果的原型，該怎么實(shí)現(xiàn)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2019-07-11
Axure元件怎么設(shè)置水平/垂直居中分布？Axure中多個(gè)元件想要設(shè)置水平或者垂直分布，該怎么設(shè)置呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2019-07-10
Axure怎么調(diào)整圖層間的順序? axure調(diào)整圖層順序的教程
Axure怎么調(diào)整圖層間的順序？Axure中有很多圖層，想要調(diào)整圖層的順序，該怎么調(diào)整呢？下面我們就來看看axure調(diào)整圖層順序的教程，需要的朋友可以參考下2019-07-10
Axure元件怎么添加陰影效果? Axure陰影效果的制作方法
Axure元件怎么添加陰影效果？Axure中想要制作一個(gè)陰影效果，該怎么制作陰影效果呢？下面我們就來看看Axure陰影效果的制作方法，需要的朋友可以參考下2019-07-09
Axure怎么繪制一個(gè)漸變線條的橢圓形？Axure中想要繪制一個(gè)漸變色的線條圖形，該怎么繪制這個(gè)圖形呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2019-07-09
