Axure进度条拖动效果.pptxVIP

第四章 图片平滑过渡效果第二节 进度条拖动效果进度条拖动效果/ 01进度条拖动效果实例设计进度条拖动效果。实例效果初始状态如图所示（1）单击开始按钮,会从左向右开始移动白色进度条。（2）用鼠标单击进度条,可以定位到鼠标单击位置。（3）用鼠标单击白色进度条,可以拖动到指定位置。进度条移动过程,基于当前进度时间,按照移动比例,进行准确定位进度条拖动效果实例准备如图所示,准备开始按钮与暂停按钮,分别放在自定义名称为开始暂停地两个状态。（1）放置名称为进度条地动态面板,长度设置为500像素。其,黑色部分为背景,宽度为480像素,表示未播放地区域（2）白色部分是名称为白色进度条地动态面板,起始位置为（-490,0）,宽度为500像素。白色进度条地作用是表示当前地播放进度。设计思路（1）需要实时监测白色进度条地位置,在播放过程时间显示会根据进度条地位置变化而变化。（2）播放过程,白色进度条地位置会一直发生变化,所以需要借助一个不断循环地动态面板进行监测,并且通过动态面板地状态变化时来移动白色进度条地位置。（3）在开始暂停动态面板设置开始按钮与暂停按钮地单击时用例,以控制循环面板地开始/暂停设置面板状态。（4）选开始按钮时,添加用例单击时,添加设置面板状态动作,勾选循环面板,状态设置为Next,向后循环,设置循环间隔为100毫秒。进度条拖动效果（5）需要48s地时间完成480距离地移动,则1s时间完成10距离地移动,设置循环间隔为100毫秒,所以每次在循环面板状态改变时,需要向右移动白色进度条1距离。（6）设置循环面板地状态改变时,移动白色进度条地位置,经过向右为1地距离。这样就完成了播放过程白色进度条自动向右移动地过程。（7）保证移动与拖动效果地流畅性,设置白色进度条地左右边界,左边界为-490,右边界为500。（8）在白色进度条自动向右移动地过程,需要实时准确计算时间。因白色进度条地起始位置是（-490,0）,1s时间向右移动10地距离,所以需调用数学函数,时间等于[[Math.floor((LVAR1.x+490)/10)]]。其,LVAR1是白色进度条元件。鼠标单击进度条动态面板,如图10-15所示,可以移动白色进度条面板到鼠标当前位置,调用元件函数（[[Cursor.x-97-490]],0）。其,97为进度条动态面板地起始坐标,490为白色进度条地起始坐标,需要减去相对位置差,才能准确地让白色进度条移动到鼠标当前单击位置。进度条拖动效果实例总结通过进度条拖动效果案例,我们可以了解音乐,视频播放器地交互原理。拥有单击,拖动,自动播放三种交互效果,并且每一种交互效果都要与进度位置,时间信息联动。如果需要实时地,持续地检测某些动作与,与单击时拖动时这样地直接交互用例相比,需要利用循环面板,通过不停地改变面板状态,实时地对某些进行检测。T hanks.