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

Axure RP 8加入了【设置不透明】的交互动作。

下面这个案例就是基于这个新的动作实现的交互效果。

我们先来看看具体的实现的效果:

大家能够看到,图片的初始透明度为50%。

当我们向右拖动圆形滑块,图片的透明度和滑块的数值均发生了改变。

那么,这样的一个案例它的实现思路是怎样的呢?

小楼在这里,给大家说一下自己在实际操作中的思考过程。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

通过以上几步,我们就完成了这个案例。

感谢大家对Axure原创教程网的支持!

源文件下载:http://downloads.iaxure.com/slider_opacity.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

推荐阅读:

Axure原型中文件的在线存储

 

 

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 通过交互动态调整元件透明度

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址