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