本文主要是运用全局变量，获取鼠标坐标参数以及函数来判断鼠标入点的方向，最终实现跟随鼠标方向的面板滑动动画效果。
当鼠标从元件A的【上、下、左、右】方向移入时，则元件B从对应方向滑进。当鼠标从其它方向移出时，则跟随一起移出，效果如下：
一、页面布局
从左侧元件库拉入一个【热区】作为鼠标触发区域，一个【矩形】作为描述B和一张【图片A】，宽高尺寸都设置为一样，居中对齐，如下：
其次，将【描述B】设置为隐藏。
二、添加全局变量
点击顶部导航【项目】-》【全局变量】，添加两个变量，分别为【CursorX】和【CursorY】，主要是为了作为后面获取鼠标的坐标参数。
三、添加交互
1. 选中【热区】，添加【鼠标移入时】事件。
2. 选择左侧【全局变量】-》【设置变量值】，勾选变量【CursorX】和【CursorY】，设置值分别为鼠标的坐标X轴【Cursor.x】和Y轴【Cursor.y】。
3. 当鼠标从触发区域左边缘滑入时，即鼠标坐标与左边缘的距离为0，而与其他边缘的距离大于0，即此距离为最小值。
因此只需要判断【鼠标坐标】与四个【边缘】的距离中，最小值为哪一个，即从哪个边缘移入。
利用函数【Math.abs】取绝对值来计算距离，函数【Math.min】取最小值来判断哪一边缘最小。
4. 假设鼠标从左边移入，添加【鼠标移入时】事件case2，设置元件【描述B】为显示，动画为【向右滑动】，时间：200毫秒。
添加条件，如下：
设置第一个值为：[[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)]]，如下：
即左边边缘为最小距离时，鼠标从左边移入。
5. 同理，为其他三个方向增加【鼠标移入时】事件，相关判断条件如下：
6. 最后是，添加【鼠标移出时】的交互事件。
判断条件原理与上面移入时一样，即鼠标从左边移出时，设置元件【描述B】为隐藏，动画为【向左滑动】，时间：200毫秒。
同理，其它三个移出方向的判断条件如下：
四、交互细节调整
1. 无论是鼠标移入还是移出，都必须重新设置全局变量值【CursorX】和【CursorY】为【Cursor.x】和Y轴【Cursor.y】。这种才能保证让元件【描述B】跟随鼠标的方向运动。
2. 可以发现，上面第四个方向的交互判断条件，我们可以省略掉，不用写出来，直接设置元件【描述B】的交互动画。
五、预览效果
欢迎大家留言评论，也可以留下你的评论，期待想看到的交互效果。
示例下载：
https://pan.baidu.com/s/14mugPY2mzI3MCVLD3YDG6w
提取码: uyag
示例演示：
相关推荐
-
最好种子搜索神器（推荐种子搜索神器好用）
今天要给大家发福利了！大家还在为找不到资源而发愁吗？有了这款种子搜索神器就不用愁了，各种软件、视频、小说、音乐均可以找到。 软件没有其它多余的功能，就是为搜索资源而生的。 用来搜索网络上的种子和电驴资源...
-
抗冻花卉有哪些（关于抗冻花卉种类介绍）
有很多地区到了冬天温度都是比较低的，比如上海这些地区他们在冬天都是不供暖的，室内的温度晚上的时候都在零到十度之间，这种情况下我们养的花有可能就会冻死或者是冻伤，也有的人是北方地区的，北方地区在院子里种...
-
汽车下雨天怎么暖风除雾（下雨天车子除雾是热风还是冷风）
车子起雾，这个情况相信很多车主都遇到过。车子起雾一般是下雨天，还有冬季的时候。在下雨天起雾，想要除雾可以用冷风也可以用热风的。当然具体选择哪一个风，这个要看当时的气温情况。冬季的时候，一般用热风来除雾...
-
编写测试用例的方法（编写测试用例有哪几种方法）
本话题暂不探讨是否有必要编写详细的测试用例，在确定要交付详细的测试用例这个前提下，分享如何更高效地完成测试用例的编写。 对齐测试用例需求 首先、明确要完成的测试用例文档目标要求，模板、范围、粒度等。 用...
-
锐龙bios怎么设置（锐龙怎么进入bios设置界面）
暑期新装机的朋友不少，不过部分新手用户可能会发现自己的新电脑性能怎么都比不上朋友同配置的电脑，而且使用中还可能出现卡顿或其他问题。其实原因也许很简单，没准就是少了下面几步简单的BIOS设置，让新电脑的配件...
-
网上下载的视频无法播放怎么办（教你2个万能的解决方法）
相信很多朋友都在播放本地视频时，遇到过这种情况，打开提示不支持该视频格式，无法播放，今天就教你2个万能的解决方法，谁用谁爽。 01 更换视频播放器 Windows自带的视频播放器，支持的格式太少了，所以我一直用Pot...