《Axure动态遮罩层效果操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强动态交互,遮罩层等多维度案例或实操来进行更多的学习;此教程是由小马在2021-07-15发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
做产品原型设计时,遇到了个关于动态显现遮罩层的难点。“无奈”为追求高保真的效果,还是花了点心思做个原型实现。Axure本身就提供了模板的功能,也就是说只要实现一次但可以一劳永逸。下面就一起来看看这个Axure动态遮罩层效果实现过程和效果吧。
做前端开发的同学都知道,在HTML实现一个遮罩层,只需要添加个浮动的DIV即可轻松实现。那么在Axure中如何去实现动态遮罩层效果呢?
如上图所示,可以将这个遮罩层的实现分为如下2部分:
所以遮罩层的实现思路就清晰啦步骤如下:
接着用3个按钮来做不同效果的展示:
打开遮罩层:
关闭遮罩层:
自动演示:
那么现在来看看最终的实现效果如下,请看下面的大屏幕:
如果想要做全屏的遮罩层就更加的简单啦,只在要显示组件上增加个灯箱的效果即可。
以上就是使用Axure动态遮罩层效果操作实例的全部内容介绍了,关于更多Axure教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 axure9全局变量和局部变量的应用情况及操作实例
> 下一篇 Axure投篮游戏抛物线设计操作实例
2022-06-21 10:20
2022-06-15 09:23
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论