AXURE教程：实现B站移动光标达到视频预览效果_第1页
AXURE教程：实现B站移动光标达到视频预览效果_第2页
AXURE教程：实现B站移动光标达到视频预览效果_第3页
AXURE教程：实现B站移动光标达到视频预览效果_第4页
AXURE教程：实现B站移动光标达到视频预览效果_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

AXURE教程：实现B站移动光标达到视频预览效果一、概述今天小鱼又来写(shui)教程了，小鱼认为B站有一个非常好的交互设计那就是通过移动光标的方式达到视频预览(虽然是ppt式地播放)如下图所示，其实用AXURE实现起来的话并不是很困难，只是过程会有些繁琐，下面就开始进入正题吧。二、材料准备AXUREPR9.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，其他情形也是如此。如下图，另外别忘了设置当鼠标移出感应区域时，我们需要设置屏幕地状态回到初始状态。好的接下来就全部大功告成了

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论