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.