5分钟学会用AXURE制作跟随鼠标的动态蒙板效果(附原型文)

yumo6665个月前 (05-15)技术文章56

今天日常君要分享一个AXURE 7.0中的鼠标参数CURSOR的效果案例,如下图示:

当你鼠标箭头移如从左边进入图片区域时,会触发动态蒙板从左边进入覆盖图片:

当鼠标箭头从图片区域左边退出时,动态蒙板也从左边移出图片区域。

下面是详细介绍案例制作流程:

  1. 从底层到顶层依次插入素材背景图片(BG)、等尺寸的动态面板(MB)和一个图片热区

    (RQ)

最后是这样的效果:、

2. 选择图片热区元件,新增动作“设置变量值”,设置如下:

这里的Cursor.x指的是鼠标箭头在屏幕上的x坐标,同理Cursor.y是鼠标箭头在屏幕上的y坐标。

3. 设置鼠标移入热区的动态面板(MB)的动作。



这里if变量[[Math.min(Math.abs(This.left-CursorX),Math.abs(This.right-CursorX),Math.abs(This.top-CursorY),Math.abs(This.bottom-CursorY))]]的值和变量[[Math.abs(This.left-CursorX)]]相等则可以判断鼠标是从左边进入热图区域。再增加显示动态蒙板的动作:



这样,当鼠标箭头从图片热区左边进入图片区域时,就让蒙板从左边移入图片区域。

4. 同理我们设置同样鼠标移出图片区域的效果:先设置条件(变量[[Math.min(Math.abs(This.left-CursorX),Math.abs(This.right-CursorX),Math.abs(This.top-CursorY),Math.abs(This.bottom-CursorY))]] = 变量[[Math.abs(This.left-CursorX)]] ),之后设置从左边移出的动作就可以了:

这样就大功告成了。当然大家可以做其他方向的效果。可以查看原文页面下载原型:http://thepm.club/?p=330

请大家关注产品日常的头条号~ 您的关注是日常君更新的动力!!

相关文章

MuJoCo 解析 qfrc 三种力!带你测试鼠标拖拽物理交互效果

视频讲解:MuJoCo 解析 qfrc 三种力!带你测试鼠标拖拽物理交互效果_哔哩哔哩_bilibili代码仓库:GitHub - LitchiCheng/mujoco-learning今天分享下,在...

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现:简单分析一下,这个交互效果主要有两个核心:借助了 CSS 3D 的能力元素的旋转需要和鼠标的移动相结合本文,就将讲述如何使用纯 CSS...

鼠标玩过界 Mouse without Borders

随着新学期的到来,家里有孩子的家长们也换了一副心情开始了新一轮的征程。单位的小魏恰好是这出征大军中的一员,这两天正为孩子学习的事操碎了心,因为他遇到了一个棘手的问题。为了保障孩子的用眼卫生,小魏特意将...