拖動(dòng)調(diào)節(jié)一般在手機(jī)端主要用于快速的數(shù)值調(diào)節(jié)，主要用于音量的調(diào)節(jié)平匈、播放進(jìn)度調(diào)節(jié)监徘、亮度調(diào)節(jié)等
拖動(dòng)數(shù)值調(diào)節(jié).gif
準(zhǔn)備
- Axure 8（或Axure 9）軟件已安裝。
- 掌握基本的軟件使用猜敢。
- 熟悉函數(shù)知識(shí)（獲取元件基礎(chǔ)屬性）姑荷。
- 熟悉動(dòng)態(tài)面板。
本教程知識(shí)點(diǎn)
- 基礎(chǔ)函數(shù)應(yīng)用缩擂。
- 基礎(chǔ)動(dòng)態(tài)面板應(yīng)用鼠冕。
詳細(xì)教程-- 拖動(dòng)等級(jí)調(diào)節(jié)
本文以簡(jiǎn)單的基礎(chǔ)拖動(dòng)為例。
功能
鼠標(biāo)點(diǎn)擊滑塊可自由在滑軸上拖動(dòng)胯盯，并且展示大小等級(jí)（共10級(jí)）懈费。
制作方式
1、搭建基礎(chǔ)的案例框架博脑。
- 注意進(jìn)度和底色需要高度一致憎乙，且左對(duì)齊。
- 滑塊需要涉及動(dòng)態(tài)面板的拖動(dòng)事件叉趣，所以需要制作成動(dòng)態(tài)面板泞边。
image
2、如何實(shí)現(xiàn)數(shù)值不規(guī)則形狀
- 可以使用鋼筆工具調(diào)節(jié)矩形疗杉，或手動(dòng)繪制阵谚。
image
- 使用矩形然后選擇更多形狀樣式，選擇后進(jìn)行對(duì)應(yīng)的旋轉(zhuǎn)設(shè)置烟具。（注意設(shè)置調(diào)整字體的旋轉(zhuǎn)角度）
image
image
3梢什、如何實(shí)現(xiàn)滑塊的點(diǎn)擊效果
- 設(shè)置滑塊的鼠標(biāo)按下交互樣式，設(shè)置線寬為第三個(gè)（Axure 9中為數(shù)值）朝聋。設(shè)置線寬顏色為對(duì)應(yīng)的顏色嗡午。
image
4、交互效果實(shí)現(xiàn)
原理：
- 鼠標(biāo)按下冀痕、松開滑塊動(dòng)態(tài)面板荔睹，控制數(shù)值的展示與隱藏
- 鼠標(biāo)拖動(dòng)滑塊時(shí)狸演，數(shù)值跟隨滑塊移動(dòng)。同時(shí)改變進(jìn)度矩形的寬度與數(shù)值的文字（刻度）僻他。
image
鼠標(biāo)按下交互設(shè)置（鼠標(biāo)松開效果剛好相反）
- 設(shè)置滑塊中心位置放大严沥，同時(shí)加入動(dòng)畫彈性，減少生硬中姜。
- 設(shè)置顯示數(shù)值（數(shù)值初始狀態(tài)為隱藏）消玄。
image
image
- 滑塊移動(dòng)時(shí)，數(shù)值設(shè)置跟隨
image
拖動(dòng)時(shí)
- 設(shè)置滑塊的移動(dòng)區(qū)間
- 設(shè)置進(jìn)度的寬度：
- 滑塊的X坐標(biāo)+滑塊的一半-底色的左起點(diǎn)丢胚。
- 設(shè)置數(shù)值的結(jié)果（通過(guò)計(jì)算展示對(duì)應(yīng)的等級(jí)）
- 10/底色的寬*進(jìn)度的寬翩瓜，然后取整。
函數(shù)小課堂
toFixed(0)：取整數(shù)携龟。
toFixed(decimalPoints)：將一個(gè)數(shù)字轉(zhuǎn)換為保留指定小數(shù)位數(shù)的數(shù)字兔跌，超出的后面小數(shù) 位將自動(dòng)進(jìn)行四舍五入。decimalPoints 為小數(shù)點(diǎn)后保留的小數(shù)位數(shù)峡蟋。
image
image
image
總結(jié)
- 滑塊與數(shù)值的聯(lián)動(dòng)
- 巧用形狀
- toFixed(0)函數(shù)的應(yīng)用坟桅。
負(fù)坐標(biāo)網(wǎng)出品。
負(fù)坐標(biāo)網(wǎng)是一個(gè)擁有高質(zhì)量原型模版蕊蝗、組件庫(kù)的交易平臺(tái)仅乓。
網(wǎng)址：www.fuzuobiao.com
