编辑指南:本文与你分享如何使用Axure移动光标来实现视频预览效果。作者对预习图、所需原稿、操作步骤逐一进行分析，并介绍了过程中需要注意的问题，希望对你有所启发。

一.概述

今天小玉又来写教程了。小雨认为哔哩哔哩有一个很好的交互设计，就是通过移动光标来实现视频预览(虽然是ppt风格)，如下图所示。其实用AXURE实现并不是很难，只是过程会有点繁琐。言归正传。

二、材料准备

AXURE PR 9.0图片若干(小鱼选取了灵笼片段的一部分总共10张图片)

第三，互动逻辑

首先，它的交互逻辑，从图中可以看出，并不是很复杂。当我们将光标移入时，我们需要根据光标位置改变进度条和图片。然后我们把光标移出来，视频需要回到初始状态，进度条回到0。

四、实施步骤

1.进度条设置

首先，哪个容易实现，我们先来做。

准备两个长宽相同(w:500，h:10)的矩形，然后用不同的颜色填充，即白色和灰色，然后重叠，将白色矩形放在灰色矩形的顶部。在这里，我们需要将白色矩形设置为动态面板(右击将其设置为动态面板)，将其命名为白色进度条，然后将其宽度设置为1，这样白色矩形将被隐藏并放置在灰色矩形的最左侧。

然后，设置一个热点区域(w:500，h:300)作为感应区域，如下图放置(一定要上顶楼)。当将感应区的交互事件设置为鼠标移动时，交互动作是改变白色进度条的大小(w:[[白色进度条的光标. x- x坐标(此处为小鱼230)])，h:。我们来做第一个条件。

2.设置视频预览(画面切换)

这里需要动态面板的知识。交互逻辑不难，但是很烦。我们把准备好的10张图片放在与感应区相同大小(w:500h:300)的地方，设置一个动态面板，命名为大小相同的屏幕，把10张图片按照视频播放顺序一张一张地放入状态。下图

然后放置屏幕和感应区，如下图；注意屏幕的底层；则感测区域位于顶层；并为感测区域设置交互事件。同理；当鼠标移动时；判断光标的位置。根据光标移动到感应区域的位置设置相应的图片。

例如，我们有10张屏幕宽度为500的图片，这意味着我们可以分成10个部分，每个部分有50个水平单元。也就是说，在感应区每移动50个单位的光标，就需要换一张图片。另外，我们需要用到屏幕的坐标，这里是(230，173)。

比如在感应区设置交互事件，判断鼠标移动时光标的位置，如果光标的x坐标-->(230 & lt；=x<。280)，将屏幕状态设置为状态1，类似地，如果(280

如下图，当鼠标移出感应区时，不要忘记设置屏幕状态回到初始状态。

好了，那么你们都完成了