作者給大家分享了如何使用axure rp9制作滑動(dòng)和動(dòng)態(tài)顯示效果，一起來(lái)看看~

要求

1）鼠標(biāo)左右拖動(dòng)屏幕變暗或變亮

2）鼠標(biāo)左右拖動(dòng)上方顯示亮度值、放開(kāi)鼠標(biāo)亮度值消失

需要用的元件如下

文本元件、矩形、動(dòng)態(tài)面板

需要用到的事件

頁(yè)面載入時(shí)、拖動(dòng)時(shí)、拖動(dòng)結(jié)束時(shí)

技巧

1）掌握跟隨鼠標(biāo)水平拖動(dòng)左右邊界范圍

2）計(jì)算和轉(zhuǎn)換亮度值，建議元件的寬度是100的倍數(shù)，方便換算

具體步驟

（1）在畫(huà)布上拖入需要用的元件，并調(diào)整相關(guān)的位置、樣式

看下具體的概要層級(jí)：

（2）開(kāi)始寫(xiě)交互事件

頁(yè)面載入時(shí)：

默認(rèn)獲取屏幕背景的寬度作為亮度值，因?yàn)槲矣玫氖?00px,按百分比算的時(shí)候除以了4，并向上取整，另外值越大，屏幕越亮，因?yàn)槭怯玫耐该鞫?，值越大越暗，所以要?00來(lái)減一下，如下圖所示

[[100-Math.ceil(LVAR1.width/4)]]

拖動(dòng)時(shí)與拖動(dòng)結(jié)束時(shí)交互：

拖動(dòng)時(shí)：

1）滑塊跟隨水平拖動(dòng)，左邊x坐標(biāo)不低于27px,右邊不高于438px,根據(jù)你畫(huà)布具體的x坐標(biāo)進(jìn)行調(diào)整

2）滑塊數(shù)值同上

3）設(shè)置背景的尺寸當(dāng)前滑塊值的x坐標(biāo)-背景在畫(huà)布的起始x坐標(biāo)，我的是29px

4)?設(shè)置滑塊數(shù)值的文本，需要逐漸顯示效果，400px按百分比取整 ，同時(shí)顯示可見(jiàn)（默認(rèn)為隱藏）

5）設(shè)備屏背景不透明度，反向用100-當(dāng)前的寬度值

6）拖動(dòng)結(jié)束時(shí)，逐漸隱藏滑塊數(shù)值

（3）看下最終效果

哈羅，大家好，這次埃文第一次發(fā)表文章，希望大家多多關(guān)照，相互學(xué)習(xí)。

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

題圖來(lái)自Unsplash，基于CC0協(xié)議。