最新消息:本站教程基于Axure RP 9.0.0.3723及更高版本,请在学习前确认软件版本是否符合要求,以免因为界面差异导致学习障碍!

两种方式实现开关按钮

教程 小楼一夜听春语 730浏览

开关按钮非常常见,它有打开和关闭两种状态。

在本篇教程中,我们通过两种方法实现这样的开关按钮。

一、使用动态面板实现

既然开关按钮有打开和关闭两种状态,我们就可以给动态面板添加两个状态,并在每个状态中放置不同状态的按钮元件。然后,在点击动态面板时循环切换动态面板的状态。

首先,我们在画布中添加一个无边框的矩形,宽度60像素,高度30像素,并将填充颜色设置为灰色。

向右拉动矩形左上方的三角形手柄,让矩形两端变为半圆形。

然后,再放入一个圆形,直径为30像素,摆放在矩形的左侧。

之后,全选这两个元件,点击鼠标右键,菜单中选择[转换为动态面板]。

此时,这两个元件被放入了动态面板的第一个状态“State1”中。

在概要面板中,我们点击动态面板第一个状态“State1”名称后方的重复按钮,将第一个状态重复一份,变为第二个状态。

此时,软件会自动打开第二个状态“State2”的编辑区,里面有与第一个状态相同的两个元件。

温馨提示:如果没有自动打开第二个状态的编辑区,可以通过点击概要中的状态名称打开。

我们把第二个状态“State2”中矩形的填充颜色设置为蓝色。

再把圆形的边框颜色设置为蓝色后,摆放在矩形的右侧。

这样,我们就完成了元件的准备工作。

接下来,关闭动态面板的状态编辑区,回到页面中为动态面板添加交互。

当动态面板被[单击时][设置面板状态],将[当前]面板的状态设置为[下一项],并能够[向后循环]。

到这里,第一种实现方式的过程就结束了。

二、使用交互样式实现

第二种方式是我比较喜欢的方式。

因为这种方式只需要一个矩形元件和一个圆形元件。

参考第一种实现方式,在画布中放入这两个元件。

矩形元件命名为“轨道”,并设置[元件选中的样式]。

将选中时的填充颜色设置为蓝色。

圆形元件命名为“开关”,并设置[元件选中的样式]。

将选中时的边框颜色设置为蓝色。

完成交互样式的设置之后,将两个元件组合。并为组合添加交互。

当组合被[单击时][切换]组合的选中状态。

此时,在浏览器中查看原型的话,点击开关按钮,颜色会发生改变。

但是开关还不会移动。

我们知道选中组合的时候,圆形“开关”要移动到轨道左侧,取消选中的时候,移动到右侧。

那么,根据这个逻辑,为组合中的“开关”元件添加“选中时”与“取消选中时”的交互。

温馨提示:为什么不直接给组合加交互?因为,组合没有“选中时”与“取消选中时”的交互事件。

“开关”元件被[选中时][移动][到达]指定的位置。

此时圆形要移动到“轨道”元件的右侧,它的X轴坐标是“轨道”元件右边界坐标值减去自身的宽度。

这些计算中用到的数值,我们需要通过局部变量与系统变量进行获取。

Y轴不移动位置,保持当前元件的Y轴坐标不变。

另外,我们还可以加上“200”毫秒的[线性][动画]效果,让交互更好看。

温馨提示:看不懂局部变量和系统变量的话,请先学习《局部变量的应用》和《系统变量的应用》。

“开关”元件被[取消选中时]也要[移动][到达]指定的位置。

X轴与“轨道”元件的左边界坐标一致,还是通过局部变量与系统变量获取。

Y轴仍然不移动位置,保持当前元件的Y轴坐标不变。

[动画]同为“200”毫秒的[线性]滑动。

到这里,我们完成了第二种实现方式。

/教程源文件/

不习惯看文字教程?还有《Axure RP 9萌新修炼视频》奉上!

转载请注明:iaxure.com » 两种方式实现开关按钮