车轴实际战斗005:APP开关的状态切换设计

2020-10-30 20:47:02

来源:安顺新闻网

当我们设计应用程序选项时,选择两个选项显然不是那么容易,即我们可以选择使用开关按钮来实现这一功能。下面是我参照微信设计的原型动态图:

首先,让我们创建原版,主要使用下面的两个原件,创建一个巨大的和一个圆,原来的宽度是由自己设定的,高度是一样的,在创建之后,我们需要在中间对齐两个组件,然后分别命名按钮和背景。

从动画中我们可以看到,当我们点击背景颜色正在改变,这里我们设置为选择状态,当我们选择原始的颜色替换原始的颜色,在这里我设置了按钮边框颜色和背景的背景色,这样他们在选择的背景颜色是一致的。

接下来,我们设计交互,选择按钮时将按钮向右移动,再次单击按钮时将按钮移动到左侧,因为组件的x坐标是基于左侧的,所以在计算坐标时,我们首先计算自己的宽度,首先从左到右,选择按钮在右边找到FX点,以定义按钮和背景的局部变量。然后插入值[[lvar1.x+lvar2.Width-lvar1.Width]],y轴水平不变,直接赋值[[Targett.y]],动画可以选择线性500ms。

然后是反向移动,原理与上面相同,但当我们计算时,我们需要添加按钮本身的宽度,然后减去背景的宽度,这样x坐标就会返回到以前的位置:[lvar1.x+lvar1.Width-lvar2.Width],y轴水平不变,直接赋值可以是[[Targett.y]],动画可以选择线性500ms。

此时,我们的按钮已切换到左右方向,但您会发现,当您单击该按钮时,将出现一个不容易操作的案例事件,因此我们需要在事件前面添加判断语句,在选择原始按钮时执行该事件,在未选中原按钮时执行该事件(默认值为所选状态)。

既然我们已经实现了切换样式,但是您会发现状态没有改变,因为没有选定的状态,在这里我们希望在事件发生后继续添加一个选定的状态,当我们单击按钮,将按钮和背景设置为选定的状态时,当我们再次单击按钮以取消状态时,我们选择的状态中的颜色将被切换。

这样,我们的切换方式就实现了,因为这是手机的设计,点击按钮仍然不方便,所以我在这里添加了一个功能,当我点击后台实现按钮切换时,操作更符合应用程序(微信也是设计的),这里直接将按钮事件复制到后台。