如何用Axure制作类似的手机滑屏效果原型

2022-03-27 科技 85阅读
看提问的意思应该是想做类似手机桌面上的那个划屏效果吧,所以我姑且就认为你问的是这个,开始介绍实现方法:
新建一个动态面板,一个状态就够了,也不用添加任何动作,尺寸的话就是你的APP的尺寸咯,可以给他命个名

在刚才建立的动态面板内部再添加一个动态面板,这个动态面板也是只需要一个状态,尺寸根据你的需求来定,比如你划屏的内容有两屏,那这个面板的尺寸就是刚才那个面板的两倍大(横向尺寸),我在模型里用三屏举例

然后还是在这个页面,添加一个图像热区,位置的话就放在第一级动态面板的中轴线上(就是这个页面的蓝色框的中轴线),热区的形状尽量小一些,防止之后在拖动的时候会不小心点到了

然后在第二步建立的那个比较大的动态面板内部,再添加三个动态面板,这三个动态面板就是要滑屏的不同频幕了,我这里以123来区分(其实上边两张图大家都已经能看见了,就是那三个动态面板)
到这里,部件的建立就完成了,部件的层级关系给大家看下

然后就是在第二步建立的比较大的动态面板上添加动作了~第一个是先在OnDrag动作下添加移动这个比较大的动态面板的动作,方向的话就是沿着X轴;然后就是在OnDragDrop下添加动作:这里需要三个用例来分别区分下当拖动停止时,屏幕停留在第几屏

关于拖动停止时的动作再详细说下,就是通过第四步建立的那三个动态面板的位置来判断当前的屏幕应该停留在第几屏,然后来执行移动的命令来把他们精确的停在那个位置,位置的判断是通过条件里的“部件的范围”来实现的,具体如图:这个就是判断位置的条件,翻译一下就是看,动态面板“1”(就是第一屏)的范围是不是和之前那个添加的热区重叠,如果是重叠的状态就说明当前应该停留在第一屏;所以就执行下图的动作,移动较大的动态面板到指定的位置(0,0)因为是第一屏,所以就是初始位置,同理第二屏和第三屏就是最后的位置不同。这个就是判断位置的条件,翻译一下就是看,动态面板“1”(就是第一屏)的范围是不是和之前那个添加的热区重叠,如果是重叠的状态就说明当前应该停留在第一屏;所以就执行下图的动作,移动较大的动态面板到指定的位置(0,0)因为是第一屏,所以就是初始位置,同理第二屏和第三屏就是最后的位置不同。
声明:你问我答网所有作品(图文、音视频)均由用户自行上传分享,仅供网友学习交流。若您的权利被侵害,请联系fangmu6661024@163.com