美文网首页
Axure实现遮罩效果

Axure实现遮罩效果

作者: 暮雨烟尘12 | 来源:发表于2018-12-03 15:02 被阅读0次

    很多时候我们在编辑视频的时候经常需要用到遮罩的效果,一般制作遮罩动画,就是指一个遮罩层同时遮罩多个被遮罩层的遮罩动画。通常在制作时,系统只默认遮罩层下的一个图层为被遮罩层。其实,我们强大的原型设计软件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

    相关文章

      网友评论

          本文标题:Axure实现遮罩效果

          本文链接:https://www.haomeiwen.com/subject/vnpycqtx.html