Axure实现中心放大图片与改变遮罩透明度

Axure实现中心放大图片与改变遮罩透明度

Axure可以实现的效果太多了,今天就给大家分享一下关于Axure实现中心放大图片与改变遮罩透明度的教程,感兴趣的的朋友可以阅读接下来的文章。

上面的分析中,提到了图片和遮罩层,所以我们先在画布中,放入这两个元件。

Axure元件

如上图所示,先在画布中放入一个图片元件,双击导入本地图片;然后,再放入了一个矩形元件覆盖在图片元件之上。

这里的两个元件,我使用的是默认的尺寸,大家做的时候可以根据自己的需求进行调整,当然要保持两个元件尺寸一致。

接下来,再给矩形“Mask”的填充颜色设置为50%不透明。

Axure不透明度

最后,记得给这两个元件添加名称。

提示:给交互相关联的元件命名是个很好的习惯,而且非常推荐能够像我一样玉树临风的使用英文命名。

参照之前的分析,我们需要给遮罩元件“Mask”分别添加鼠标移入时和鼠标移出时两组交互。

1、鼠标移入时

第一个动作:设置图片“Photo”的尺寸,宽度为“[[This.width*1.5]]”,高度为“[[This.height*1.5]]”,锚点选择【中心】,动画选择【线性】,时间为“500”毫秒。

Axure添加交互

因为我比较懒,所以不想去计算放大后的具体尺寸,这里我通过系统变量“This.width”和“This.height”获取到了当前元件Mask的宽度和高度进行了乘法计算。

那么,大家也能够看到,使用系统变量和函数并不会增加交互设计的复杂度,它们是可以用来偷懒或者说提高效率。

并且,还能提高交互的重用性。

想一想,如果做完了交互之后,图片和遮罩层的原始尺寸如果需要调整呢?我的这种做法,你就不需要再调整做好的交互。

第二个动作:设置遮罩矩形“Mask”的不透明为“0”%。

Axure不透明度

因为矩形“Mask”是交互的主体,所以它就是当前元件。

2、鼠标移出时

鼠标移出时的交互动作和移入时是一样的,不同的只是尺寸的数值和透明度的数值。

所以,我们只需要点击鼠标移入时交互中的“Case 1”进行复制,然后点击鼠标移出时进行粘贴,再注意修改每个动作中的数值就可以了。

Axure设置尺寸

第一个动作:修改宽度和高度分别为“[[This.width]]”和“[[This.height]]”。

第二个动作:修改不透明数值为“100”%。

注意,因为准备元件时我们设置了矩形“Mask”填充颜色的初始透明度为50%,所以第二个动作中设置不透明为100%,是将透明度恢复为初始透明度,即50%*100%。

通过以上设置,我们就完成了图片的缩放以及透明度的改变。

动态面板能够只显示状态内容的部分区域,我们只需要把这些做好的内容放入动态面板,并固定动态面板的尺寸就可以了。

1、全选元件,点右键,在菜单中选择【转换为动态面板】;

Axure转换为动态面板

2、在动态面板属性中,取消【自动适应内容尺寸】的勾选(右键菜单中也有)。

Axure取消自适应

以上就是关于Axure实现中心放大图片与改变遮罩透明度的教程,更多内容关于Axure网站。

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