Axure高保真教程:轮盘滑动控制元件移动

2023-05-2008:27:02原型设计Comments1,729 views字数 1306阅读模式

轮盘控制元件移动是一种通过轮盘来控制元件位置或参数的方式。轮盘通常是一个圆形或半圆形的旋转控制器,用户可以通过旋转轮盘来实现元件的移动。轮盘滑动控制元件移动广泛应用于各种设备和系统中,例如移动端操作内的游戏,通过旋转轮盘,可以精确地控制元件在水平或垂直方向上的位置,如游戏中的角色移动或窗口的滚动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

今天作者就教大家如何在Axure中,制作一个能通过轮盘控制元件移动的原型模板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

一、效果展示

  1. 可以拖动轮盘的方式,让指定元件(兔子)朝着对应方向移动
  2. 可以控制移动的边界,让指定元件即使一致超值某一方向移动,也不会移出极限

Axure高保真教程:轮盘滑动控制元件移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

原型地址:https://4c1fdb.axshare.com/#g=1文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

二、制作教程

1. 材料准备

这个模板的材料比较简单,包括:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

1、背景图片,这个可以根据自身需求设置;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

2、被移动的元件,案例中是用兔子的图片,你们也可以指定对应的元件;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

3、轮盘:轮盘我们用Axure原生元件制作即可,其实就是两个圆,顶部是白色的小圆,底部是黑色半透明的中圆。这里我们需要将小圆转为动态面板,因为axure里面只有动态面板有拖动事件,所以我们要将小圆转为动态面板。另外,我们还需要一个和小圆一样大小的圆,放在和小圆一样的中心的,默认隐藏即可,后续会交互计算中会用到。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

2. 交互制作

1)轮盘的拖动效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

我们首先要制作白色圆点能在黑色底盘上拖动的效果,我们用移动的时间,设置当前元件跟随鼠标的拖动而移动。移动的话我们也是有距离限制的,我们可以设置边界,让白色小圆不超出黑色底盘的上下左右边界。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

Axure高保真教程:轮盘滑动控制元件移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

在轮盘拖动结束时,我们要让白色小圆回到原来的地方,就是黑色底盘的中心点,这里我们同样用到移动的事件,里面选择回到拖动前的位置,这样他就自动复原了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

Axure高保真教程:轮盘滑动控制元件移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

2)移动指定元件的效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

轮盘拖动完成之后,我们怎样移动指定元件,根据我们轮盘拖动的方位像指定方向移动呢?这里面其实主要涉及数学的问题,我们可以通过小圆拖动时的位置和原来的位置做比较,相当于通过xy坐标来判断移动的位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

例如原点位置为0,0,拖动后的位置是100,50,那么就是说朝右方移动了100的矩形,朝上方移动了50的距离,我们通过圆点和拖动时的点位,亮点就可以确定一直线方向,这样我们将移动的矩形用指定倍速设置到指定元件即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

那因为拖动时的交互是每时每刻都在变动的,所以案例中是用0.02倍,当然这个你们也可以根据需要,或者移动的速度来设置,可以通过修改倍数值,从而改变移动的快慢。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

如果需要控制指定元件移动的范围,同样我们我们也可以增加上下左右的边界来限制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

Axure高保真教程:轮盘滑动控制元件移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

因为拖动时的交互是每时每刻都在变动的,所以我们要写一个循环时间来不断触发这个循环,一般实现循环有很多种方法:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

一般是用动态面板来实现的,通过设置面板状态的交互,设置面板状态到下一个,勾选循环,在面板状态改变时,增加需要重复循环的交互,这样就能实现不断的循环对应的交互事件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

我们也可以简单的来事件,通过等待事件和触发事件,例如等待0.01秒,然后触发上面的交互,从而形成循环文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

Axure高保真教程:轮盘滑动控制元件移动文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

这样我们就制作完成了轮盘控制元件移动的原型模板了,下次使用时,只需要在更换移动的素材,修改一下对应的边界,即可自动实现轮盘移动的效果,是不是很方便呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

AI产品人文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/40424.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/40424.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定