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

今天日常君要分享一个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

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