Axure通过交互动态调整元件透明度

Axure通过交互动态调整元件透明度

Axure中,不仅可以对元件进行隐藏和显示设置,还可以设置元件的不透明度,那么今天就给大家分享下教程,感兴趣的朋友可以阅读接下来的文字。

任何的交互效果都是有多个基本知识点组成。

1、要将图片设置成半透明,也就是初始的50%透明度。

2、滑块能够水平方向拖动,并且不能够超出白色横条的两侧。

3、在滑块拖动时,要设置滑块的数值为透明度新的比例,并且将图片透明度也设置成新的比例。

以上就是我分析出来的相关操作。

这些操作涉及以下知识点。

1、设置图片半透明是样式设置,需要在样式中将图片的不透明设置成“50”;

2、滑块是一个圆形,如果想拖动它,需要把它放在动态面板中,为动态面板添加拖动时的交互;

3、动态面板拖动时,要设置圆形的文字为新的比例值,这个值我们要通过滑块的x轴坐标减去横条左侧的x轴坐标得到距离值,再用这个距离值除以可拖动的区间值(横条宽度减去滑块圆形宽度)得到透明度比例值;不过这样计算之后,得到的是小数值,我们还需要对这个值四舍五入取整。

4、除了设置圆形上的比例值文字,还要设置图片的透明度为这个比例值,我们可以获取圆形上的透明度比例值,设置给图片。当然也可以在设置图片透明度时再做一遍计算。这里我们使用获取圆形上文字的方式去设置图片的透明度值。

了解了实现思路和相关的知识点,我们先来准备元件:

Axure准备元件

接下来,根据刚才的思路我们逐步来实现这个案例:

1、先在【样式】中给图片设置不透明为“50”%。

Axure不透明度

2、给动态面板“SliderPanel”设置【拖动时】的交互,添加用例并设置动作【移动】“当前元件”或“SliderPanel”为【水平拖动】。并且,拖动时为拖动添加界限设置,【左侧】【>=】“[[l.left]]”,【右侧】【<=】"[[l.right]]"。

Axure移动动态面板

注意:公式中的“l”是自定义局部变量,用来获取横条“Line”的元件对象,在通过“[[l.left]]”和"[[l.right]]"获取到元件对象两侧的边界x轴坐标值。这些操作需要点击界限设置右侧输入框后方的“fx”,在下方的界面中设置。

Axure局部变量

3、在上一步的用例中,继续添加动作【设置文本】于圆形“Slider”为【值】,在值的输入框中我们填入“[[((This.x-l.x)/200*100).toFixed(0)]]”。

Axure设置文本

注意:公式中的“This”表示当前元件,也就是正在添加交互的元件“SliderPanel“,“This.x”则能够获取到这个元件当前的x轴坐标值。而公式中的“.toFixed(0)”是对小数保留指定位数的函数,括号中的参数“0”表示保留0位小数,即把小数四舍五入成整数。所以,我们对前面的计算公式加上括号获取到数值结果后,通过“.toFixed(0)”即可得到整数数值。另外,公式中的“l”和上一步中一样是用来获取横条“Line”这个元件对象的。“l.x”就能够获取到这个元件对象的x轴坐标值(同左边界坐标值,所以这里也可以写“l.left”)。

Axure局部变量

4、在上一步的用例中,继续添加动作【设置不透明】于图片“HeadImage”,不透明的值为“[[s]]”。

Axure不透明度

注意:公式中的“s”也是自定义局部变量,用来获取圆形“Slider”的元件文字。

Axure局部变量

以上内容就是关于Axure通过交互动态调整元件透明度的教程,更多教程,点击文章:Axure绘制斜线和波浪曲线教程

在线客服
客服邮箱
客服电话
17051276424