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

访客3年前黑客文章667

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

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

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

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

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

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

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

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

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

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

(1)鼠标按键按下时

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

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

移动:使中心在鼠标位置

显示:就是让它出来啦

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

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

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

(2)鼠标按键释放时

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

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

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

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

接下来是它↓

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

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

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

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

相关文章

SaaS 产品经理,你该如何理解业务?

SaaS 产品经理,你该如何理解业务?

SaaS产品经理该如何理解业务,并不断提升自己对业务感觉呢?笔者通过对理论知识与工作中的案例的结合分析,分享了自己的思考以及执行框架。 刚开始接触 SaaS 产品,我经常会被各种人吐槽“你这么做不对...

产品/商业中的横向创新创新核心“维度”

产品/商业中的横向创新创新核心“维度”

文章分析了服务对象变化时的产品与商业模式变化规律,同时介绍了维度划分的规律、帮助构建更高效的模型,笔者抽象出来的底层逻辑模型是“开放、可生长、可迁移,最终个性化”,希望对你有帮助。 本文主要从两个方...

产品经理如何证明个人工作价值?

产品经理如何证明个人工作价值?

产品经理时常因无法评估自己的工作价值而感到挫败,但事实上并不是做的事情没有价值,而是我们不懂得如何去证明自己。本文将同你一起探讨产品经理怎样找到自己的工作价值,以及怎样向上反馈个人的工作价值。 很多...

解读产品知识的元概念:用户、需求和产品

解读产品知识的元概念:用户、需求和产品

这篇文章主要和大家分享产品经理知识体系中几个元概念的定义,正是这些基本概念支撑了并衍生出了整个产品经理的知识体系。 01 如果把产品经理所需要具备的知识体系称作一门学科, 况且叫做“产品学”,那么用...

新营销形式下的分析报告:风起时,点亮营销的底色

新营销形式下的分析报告:风起时,点亮营销的底色

“营销的宗旨是发现并满足需求。” ——菲利普.科特勒 前一阵受邀参加了一个营销人的峰会,最大感触是流量红利时场面热闹无比,谁都能说自己操盘几千万,然后红利消失后,坚持的营销人又有多少?在营销的赛道...

罗氏相声新篇:进击的电商直播

罗氏相声新篇:进击的电商直播

罗永浩从来都不缺新闻,一直都是焦点。锤子科技的前任掌门人罗永浩在沉寂了一段时间之后,日前正式在微博上宣布即将“王者归来”。并表示,“看了招商证券那份著名的调研报告之后,我决定做电商直播了。虽然我不适合...