Axure Rp9教程:制作win10滑塊滑動調(diào)整屏幕亮度效果
作者給大家分享了如何使用axure rp9制作滑動和動態(tài)顯示效果,一起來看看~
要求
1)鼠標(biāo)左右拖動屏幕變暗或變亮
2)鼠標(biāo)左右拖動上方顯示亮度值、放開鼠標(biāo)亮度值消失
需要用的元件如下
文本元件、矩形、動態(tài)面板
需要用到的事件
頁面載入時、拖動時、拖動結(jié)束時
技巧
1)掌握跟隨鼠標(biāo)水平拖動左右邊界范圍
2)計算和轉(zhuǎn)換亮度值,建議元件的寬度是100的倍數(shù),方便換算
具體步驟
(1)在畫布上拖入需要用的元件,并調(diào)整相關(guān)的位置、樣式
看下具體的概要層級:
(2)開始寫交互事件
頁面載入時:
默認(rèn)獲取屏幕背景的寬度作為亮度值,因為我用的是400px,按百分比算的時候除以了4,并向上取整,另外值越大,屏幕越亮,因為是用的透明度,值越大越暗,所以要用100來減一下,如下圖所示
[[100-Math.ceil(LVAR1.width/4)]]
拖動時與拖動結(jié)束時交互:
拖動時:
1)滑塊跟隨水平拖動,左邊x坐標(biāo)不低于27px,右邊不高于438px,根據(jù)你畫布具體的x坐標(biāo)進行調(diào)整
2)滑塊數(shù)值同上
3)設(shè)置背景的尺寸當(dāng)前滑塊值的x坐標(biāo)-背景在畫布的起始x坐標(biāo),我的是29px
4)?設(shè)置滑塊數(shù)值的文本,需要逐漸顯示效果,400px按百分比取整 ,同時顯示可見(默認(rèn)為隱藏)
5)設(shè)備屏背景不透明度,反向用100-當(dāng)前的寬度值
6)拖動結(jié)束時,逐漸隱藏滑塊數(shù)值
(3)看下最終效果
哈羅,大家好,這次埃文第一次發(fā)表文章,希望大家多多關(guān)照,相互學(xué)習(xí)。
本文由 @Evan 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!