Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

访客4年前黑客文章782

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

首先我们来看一下简陋效果(是真的非常简陋):

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

请手动无视最后一次,gif上传后出现的未知问题

接下来我们聊一下如何实现这个效果,首先我们需要一个动态面板:

动态面板状态里面我们需要它们:

然后我们把它们摆成这个样子(简易例子,就用方框替代,圆就随便放就好了):

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

圆的大小我设成了50*50(可以按喜好更改),此处以遮罩举例,所以我设了黑色以及不透明度50(也可以改啦),然后我们隐藏掉这个小圈圈。

接下来就是用例了~要对动态面板设置(*^▽^*)。

(1)鼠标按键按下时

把小圈圈移到鼠标位置,显示小圈圈,然后改变它的大小:

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

移动:使中心在鼠标位置

显示:就是让它出来啦

改变大小:是效果的重点啦,要以中心为固定点~

这里我们用了一个函数,设置按照下图哦:

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

(2)鼠标按键释放时

隐藏掉小圈圈,然后再把它变回之前的大小

Axure教程:实现鼠标按住时散开改变按钮颜色/增加遮罩

这个小圈圈以哪里作为中心点都可以的,变回原来大小是为了保证每次出现都在鼠标位置,因为之前出现位置是鼠标位置减掉25呀~

哒哒,大功告成,可以预览了,就是开头的效果啦。如果大家有更好的解决方案欢迎来教我呀~

接下来是它↓

这是一个简陋到不能再简陋的例子,是可以扩展的!

如果想改变底纹颜色,可以把小圈圈(当然也可以椭圆)的位置变成文字和原底纹之间

如果动态面板不在(0,0)需要在改变小圈圈位置的时候再减去动态面板的坐标噢(!重点)

源文件:https://pan.baidu.com/s/1tnJpXdCf_qDpqxyr3hM9rw 提取码:eq89

相关文章

探秘方便速食赛道:你为螺蛳粉和自嗨锅上头了吗?

探秘方便速食赛道:你为螺蛳粉和自嗨锅上头了吗?

宅家期间,人们自由外出吃吃喝喝的需求难以得到满足,于是人们将目光聚集到了方便速食食品上,从而进一步加速了这一行业在特殊时期下的发展与崛起。 举国宅家的这些日子,爱吃的中国人分化出两条路线:一条是心灵...

B站为什么要做轻视频?它会是下一个抖音吗?

B站为什么要做轻视频?它会是下一个抖音吗?

由于短视频的内容更丰富、传达信息更有效。B站依靠自身的社区生态优势,推出了轻视频,这有助于B站抢夺用户的注意力,开发属于自己的短视频用户,扩大盈利范围。 B站在2018年12月21日悄然上新了一个官...

如何解决医美直播的转化率问题?

如何解决医美直播的转化率问题?

很多时候,你以为的直播间人气高、热热闹闹的氛围背后,转化率可能十分堪忧。那么造成这一现象的原因是什么呢?我们又可以如何解决这一问题呢? 昨天,有位同行的朋友与我探讨说:“他们机构在某医美电商平台上做...

文案第13讲 | 一个合格文案人应该如何copy?

文案第13讲 | 一个合格文案人应该如何copy?

文案“抄袭”不是全盘照搬,能从别人的作品中寻找自己创作的灵感,然后完成工作,这是文案人需要具备的一种能力。 这篇文章,谈谈我的“copy”之路,粗暴的中文翻译过来就是:抄之路。 开始之前,我先谈谈我...

原则系列:敏捷开发适合B端产品吗?

原则系列:敏捷开发适合B端产品吗?

敏捷模式随着移动互联网的发展变得越来越普遍与流行,那么对B端产品来说,是否可以运用敏捷开发模式呢?如果可以的话,又有哪些注意要点呢? 在中国移动互联网流行之前的2011年以前,B端软件的研发大多还是...

为什么工具型产品都想做社交?

为什么工具型产品都想做社交?

社交即信息,一切产品都是社交,也是社区。时代的移动互联网,没有界与限,只有生与死,势与微。 先附上本文的思维导图,以便大家阅读: 我们是时代的见证者,有无数的工具型产品倒在了商业模式的路上,其中不...