1. 主页 > 行业资讯 > 设计文章 >

AXURE教程:实现哔哩哔哩移动光标实现视频预览效

编辑指南:本文与你分享如何使用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

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

好了,那么你们都完成了

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:https://www.ffjianzhan.cn/a/sjwz/553.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息