中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語：滑塊拖動是常見的交互效果之一，具體可以如何利用Axure來實現(xiàn)滑塊拖動？本篇文章里，作者便結(jié)合Axure，對如何實現(xiàn)滑塊拖動確定評分區(qū)間的交互進(jìn)行了流程示范，一起來看一下。

滑塊拖動效果是原型設(shè)計中比較常見的交互效果，今天我們以豆瓣的評分區(qū)間篩選組件為例來講講如何在Axure中實現(xiàn)拖動滑塊確定評分區(qū)間的交互。

一、交互效果說明?

1. 滑塊及評分?jǐn)?shù)值跟隨鼠標(biāo)拖動沿水平方向移動，移動范圍不能超出灰色背景條兩端。
2. 拖動滑塊時，橙色的進(jìn)度條寬度隨著滑塊的拖動而變化。
3. 評分?jǐn)?shù)值的坐標(biāo)始終與滑塊一致，且數(shù)值要隨著滑塊拖動在「0-10」的范圍內(nèi)變化。

效果預(yù)覽：

原型預(yù)覽地址：https://v40app.axshare.com

二、元件準(zhǔn)備?

1）拖入一個【矩形】元件，設(shè)置元件寬度：300px，高度：6px，圓角半徑：6，填充顏色：#EEEEEE，命名為「BackGround」。

復(fù)制一個「BackGround」出來，置于「BackGround」上方，填充顏色：#FFB444，命名為「ProgressBar」。

2）拖入一個【圓形】元件，設(shè)置大小為：28px*28px，線段寬度：1px，線段顏色#A2A2A2。

在此【圓形】元件上方拖入一個【文本標(biāo)簽】，設(shè)置字體顏色：#999999，字體大?。?2px，文本內(nèi)容：“0分”，命名為「Min」。

將上述兩個元件選中點擊右鍵轉(zhuǎn)換為動態(tài)面板，命名為「LeftSlider」。

3）復(fù)制一個「LeftSlider」出來，命名為「RightSlider」。

雙擊進(jìn)入動態(tài)面板修改文本標(biāo)簽的文本內(nèi)容為：“10分”，命名為「Max」。

將上述元件按照圖示位置進(jìn)行調(diào)整，所有元件準(zhǔn)備完畢。

三、添加交互

第一步，給滑塊「LeftSlider」和「RightSlider」添加拖動交互。

1）給左側(cè)的滑塊「LeftSlider」添加【拖動時】的交互，【移動】「LeftSlider」【跟隨水平拖動】。

做完這步滑塊已經(jīng)可以跟隨鼠標(biāo)水平拖動了，但是我們還需要限制滑塊左右拖動的范圍。

「LeftSlider」的滑動范圍向左不能超過其初始位置，向右不能超過右側(cè)滑塊「RightSlider」的左坐標(biāo)；滑動范圍即灰色背景條「BackGround」的左坐標(biāo)和滑塊「RightSlider」左坐標(biāo)之間的距離。

2）點擊【更多選項】-【添加邊界】，設(shè)置邊界值【左側(cè)≥[[background.left]]】，【右側(cè)≤[[rightslider.left]]】。

邊界值需要借助局部變量獲取，點擊【添加局部變量】，設(shè)置局部變量「backGround」【=】【元件】「BackGround」。

點擊【插入變量函數(shù)】值為[[background.left]]。

同理可獲取右側(cè)的邊界值，具體數(shù)值參考下圖。

3）同樣給右側(cè)的滑塊「RightSlider」添加同樣的交互，數(shù)值如下圖所示。

完成這一步后，拖動滑塊已經(jīng)可以在設(shè)定的范圍內(nèi)滑動了。

第二步，添加橙色滑動條「ProgressBar」寬度隨著滑塊拖動而變化的交互。

橙色的滑動條的寬度為右側(cè)滑塊「RightSlider」的左坐標(biāo)減去左側(cè)滑塊「LeftSlider」的左坐標(biāo)。

1. 給左側(cè)滑塊「LeftSlider」添加【移動時】的交互，目標(biāo)為橙色滑動條「ProgressBar」的寬度，數(shù)值為[[rightslider.left-leftslider.left]]，同樣需要結(jié)合局部變量獲取對象，錨點為右側(cè)。
2. 給右側(cè)滑塊「RightSlider」添加相同的交互，區(qū)別為錨點為左側(cè)。

第三步，設(shè)置「Min」「Max」文本標(biāo)簽的評分?jǐn)?shù)值隨著滑塊拖動而變化。

1）給左側(cè)的動態(tài)面板「LeftSlider」添加【移動時】的交互，設(shè)置「Min」的【文本】值為：

[[math.ceil((This.left-background.left)/background.width*10)]]分

• 左側(cè)滑塊滑動的寬度=左側(cè)滑塊的左坐標(biāo)-灰色背景條的左坐標(biāo) ；
• 左側(cè)評分分值=左側(cè)滑塊滑動的寬度/灰色背景條的寬度*10 ；
• math.ceil(x)函數(shù)為向上取整函數(shù)，返回大于或等于參數(shù)x，并且與之最接近的整數(shù)。

2）同樣給右側(cè)的動態(tài)面板「RightSlider」添加【移動時】的交互，設(shè)置「Max」的【文本】值為：

[[10-math.ceil((background.right-This.right)/background.width*10)]]分

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

題圖來自 Unsplash，基于 CC0 協(xié)議