编辑导读：本文跟各人分享，如何用Axure实现移动光标到达视频预览结果，作者从预览图，到所需原件，再到操纵步调都一一展开了阐明，并对进程中需要留意的问题举办了先容，但愿对你有所开导。

一、概述

本日小鱼又来写(shui)教程了，小鱼认为B站有一个很是好的交互设计那就是通过移动光标的 *** 到达视频预览(固然是ppt式地播放)如下图所示，其实用AXURE实现起来的话并不是很坚苦，只是进程会有些繁琐，下面就开始进入正题吧。

二、质料筹备

AXURE PR 9.0

图片若干(小鱼选取了灵笼片断的一部门总共10张图片)

三、交互逻辑

首先它的交互逻辑，由图可以看出，并不是很巨大，当我们把光标移入的时候，需要按照光标的位置改变进度条和改变图片，然后当我们把光标移出的时候，视频需要回到最开始的状态，进度条归0.

四、实现步调 1. 进度条配置

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

筹备两个长宽一样的矩形(w:500,h:10),然后填充差异的颜色，别离为白色和灰色，然后将它们两个重合，而且把白色的矩形至于灰色矩形上层，在这里我们需要把白色的矩形条设为动态面板(右击配置设为动态面板)，取名白色进度条，然后将其宽度设为1，这样白色矩形就会相当于埋没而且安排在灰色矩形条的最左侧，如下图.

然后配置一个(w:500,h:300)的热区取名为感到区域，安排位置如下图(必然要至于顶层),配置感到区域的交互事件为鼠标移动时，交互行动为改变白色进度条的尺寸(w: [[cursor.x-白色进度条的x坐标(小鱼这里是230)]]),h:[[白色进度条的牢靠高度]])，紧接着配置感到区域的交互事件为鼠标移出时，配置白色进度条的尺寸宽度为1。之一个条件我们就做好啦。

2. 配置视频预览(图片切换)

这里需要用到动态面板的常识，交互逻辑不难，可是很烦人。我们把筹备好的10张图片，留意尺寸巨细需要和感到区域沟通(w:500h:300),配置一个动态面板取名屏幕，尺寸也是一样的，将10张图片，凭据视频的播放顺序，把图片一张张存在状态中，10张图片10个状态。如下图

然后将屏幕，感到区域的位置如下图安排，留意屏幕应该是处于更底层，然后感到区域处于最顶层，配置感到区域的交互事件，同样地， 鼠标移动地时候，判定光标职位置在哪？按照光标移入感到区域职位置配置相应的图片。

好比我们有10张图片，屏幕宽500，那么也就是说我们可以分为10个区间，每个区间50个横向单元。也就是说光标在感到区域中每移动50个单元就需要改变一张图片。别的我们需要用到屏幕的坐标，小鱼这里是(230,173).

好比配置感到区域的交互事件，当鼠标移动的时候判定光标的位置，假如光标的X坐标->(230<=x<280),配置屏幕状态为状态1，同样地假如(280<=x<330),那屏幕状态就是状态2，其他景象也是如此。

如下图，别的别忘了配置当鼠标移出感到区域时，我们需要配置屏幕地状态回到初始状态。

好的接下来就全部大功告成了，最终预览链接：https://1cw59f.axshare.com

这就是本日小鱼给各人带来的b站视频预览实现教程是不是很简朴呢？赶紧动手试一下吧。