Axure动态遮罩层效果操作实例

0 2021-07-15 11:31 内容校对:海绵宝宝手里的锅铲
收藏(0) 共有 185 人学习了本教程

《Axure动态遮罩层效果操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强动态交互,遮罩层等多维度案例或实操来进行更多的学习;此教程是由小马在2021-07-15发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

做产品原型设计时,遇到了个关于动态显现遮罩层的难点。“无奈”为追求高保真的效果,还是花了点心思做个原型实现。Axure本身就提供了模板的功能,也就是说只要实现一次但可以一劳永逸。下面就一起来看看这个Axure动态遮罩层效果实现过程和效果吧。

做前端开发的同学都知道,在HTML实现一个遮罩层,只需要添加个浮动的DIV即可轻松实现。那么在Axure中如何去实现动态遮罩层效果呢?

Axure动态遮罩层效果操作实例

如上图所示,可以将这个遮罩层的实现分为如下2部分:

  •  主体内容,即遮罩层要盖住的部分
  •  遮罩层组件,即遮罩层+其它装饰部分(在Demo中只是增加了个Loading的动画图片来区分)

所以遮罩层的实现思路就清晰啦步骤如下:

  1. 准备一个与你所想要遮盖内容大小相同的矩形框,注意要减去边框的大小,示例:主体内容大小为`600×400`,边框宽度为**1px**,那么遮罩层的大小为`598*398`且是无边框的。
  2. 设置遮罩层的填充色,还有相对的透明度。
  3. 加强遮罩层显示的动画效果(Axure上所支持的效果并不多,如不能够满足,可以采用文字描述阐明效果要求)。

接着用3个按钮来做不同效果的展示:

打开遮罩层:

Axure动态遮罩层效果操作实例

关闭遮罩层:

Axure动态遮罩层效果操作实例

自动演示:

Axure动态遮罩层效果操作实例

那么现在来看看最终的实现效果如下,请看下面的大屏幕:

Axure动态遮罩层效果操作实例

如果想要做全屏的遮罩层就更加的简单啦,只在要显示组件上增加个灯箱的效果即可。

以上就是使用Axure动态遮罩层效果操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由小马原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

小马

创立独有的教学法,使复杂难懂的知识点简单,易理解,易上手

共发布了232个文章 共获得22个赞

最新发布的教程

查看更多此作者的教程
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员