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

如标题所述,这样的交互效果还是很常见的。

效果预览:

通过上面动来动去的图,我们来分析一下这个交互的关键要素。

包含两个方面。

首先,用户都做了什么操作?

  • 鼠标指针进入图片;
  • 鼠标指针离开图片。

然后,我们针对用户的操作需要给出什么反馈?

  • 鼠标指针进入图片时,放大图片(本案例为1.5倍)并且遮罩变为完全透明;
  • 鼠标指针离开图片时,图片恢复原有尺寸并且遮罩变为半透明(本案例为50%透明度)。

最后,以上交互的主体、触发、动作以及动作的目标都是什么?

  • 鼠标指针进入图片时,实际上是进入了遮罩层,所以交互的主体是遮罩层,触发为鼠标移入时,动作是设置图片尺寸和设置遮罩层的透明度。
  • 鼠标指针离开图片时,实际上是离开了遮罩层,所以交互的主体还是遮罩层,触发为鼠标移出时,动作同样是是设置图片尺寸和设置遮罩层的透明度。

通过以上分析过程,我们就能够明确的知道我们要做什么了。

剩下的事情,只是根据这个分析,逐步进行设置。

设置是死的,分析才是活的。

所以,实现原型中某一个交互的最大阻碍,往往不是软件的操作,而是不会分析或者分析的不清楚。

也正是这个原因,我在上面简单的展示了一下我在完成一个交互效果时,采用的分析的方法。

这样的分析方法,适合所有原型中交互设计分析。

完成了分析的过程,接下来是制作过程。

一、准备元件

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

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

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

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

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

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

二、添加交互

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

1、鼠标移入时

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

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

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

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

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

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

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

2、鼠标移出时

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

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

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

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

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

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

不过,现在预览的话,在浏览器中是下面这个屌样子!

mmp,大是大了...还特么胖了呢...

没关系,这个很好解决。

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

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

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

到这里,我们就完成了这个案例的制作。

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

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

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


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

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

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

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


转载请注明:Axure原创教程网 » 中心放大图片与改变遮罩透明度

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 很棒
    Donny2017-12-04 09:35 回复
  2. 实用,最喜欢在图片上加遮罩了,有神秘感
    夜观天猪2017-12-13 15:40 回复
  3. 不错不错,终于知道如何放大胸部了
    狼哥2018-01-03 15:06 回复
  4. 但是每次不停的高频率用鼠标进入和进出,图片会根据你进入和进出的次数同时完成相同次数的动作,这明显不科学,该如何解决这个问题呢
    csfbi772018-01-08 11:29 回复
    • 小楼一夜听春语
      干嘛跟原型过不去?
      小楼一夜听春语2018-01-08 12:09 回复
      • 对不起,小楼老师,我才学这个软件,不太懂,这个问题真的不能解决吗,肯定是不科学的,实际中这个情况该怎么办呢,真没存心诋毁你的意思,希望您能理解我的意思,毕竟实际中不可能出现这个情况,请教教我,谢谢你的大鞭鞭,快来鞭策我,快,快,快! 😛
        csfbi772018-01-08 13:17 回复
        • 小楼一夜听春语
          我的意思就是把产品需求表达到了 不用太去纠结那些细节
          小楼一夜听春语2018-01-11 13:27 回复
  5. 改成100%的时候全黑了呢,最后还是改成50%才好用?
    藏喵喵2018-01-19 16:33 (4天前)回复