axure侧弹层遮罩_Axure实现遮罩效果

很多时候我们在编辑视频的时候经常需要用到遮罩的效果,一般制作遮罩动画,就是指一个遮罩层同时遮罩多个被遮罩层的遮罩动画。通常在制作时,系统只默认遮罩层下的一个图层为被遮罩层。其实,我们强大的原型设计软件Axure也能实现遮罩效果,而且Axure支持网页设计中的所有效果的制作,包括弹窗效果等,如果对弹窗效果的学习感兴趣,可以参考文章:Axure如何实现弹窗效果?http://www.axurechina.cc/help/skill/1028.html。但今天主要还是跟大家讲一下Axure遮罩效果的制作。

首先,我们要从网站下载Axure(http://www.axurechina.cc/download.html)软件,如果要实现遮罩效果,需要用到矩形元件作为遮罩层,从元件库拖入一个矩形元件,设置背景为蓝色 ,可将矩形尽量拉的大一些,如下图所示:

接着在矩形元件上建立对象,作为被遮罩层,拖入三个一级标题元件,分别输入文字信息:认真、专业以及分享,将字体设为白色,如下图所示:

然后设置交互,作为被遮罩层显示的条件,选择“页面载入时”,设置“不透明度”。单击页面载入时,弹出窗口,下拉找到“不透明度”,三个矩形都设置为,不透明50%,动画为线性,时间100毫秒,然后点击确定。

点击预览,就可以看到页面载入的时候,已经形成了遮罩效果,原理是:上面一层是遮罩层,下面一层是被遮罩层。遮罩层上的图,自己是不显示的,它只起到一个透光的作用。

也可以交互设置更改为“鼠标移入时”,能更好的看到效果,直接将页面载入时的交互剪切到鼠标移入时即可完成交互,再点击预览即可实现,当鼠标移入时,才会形成遮罩层。

以上就是关于Axure遮罩的制作方法,是比较基础简单的,用到的交互也比较少,如果想要学习更多交互效果,可以进入我们Axure中文网(http://www.axurechina.cc/)了解学习。

本篇文章分享来源于:http://www.axurechina.cc/help/1254.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值