开关按钮非常常见，它有打开和关闭两种状态。
在本篇教程中，我们通过两种方法实现这样的开关按钮。
一、使用动态面板实现
既然开关按钮有打开和关闭两种状态，我们就可以给动态面板添加两个状态，并在每个状态中放置不同状态的按钮元件。然后，在点击动态面板时循环切换动态面板的状态。
首先，我们在画布中添加一个无边框的矩形，宽度60像素，高度30像素，并将填充颜色设置为灰色。
向右拉动矩形左上方的三角形手柄，让矩形两端变为半圆形。
然后，再放入一个圆形，直径为30像素，摆放在矩形的左侧。
之后，全选这两个元件，点击鼠标右键，菜单中选择[转换为动态面板]。
此时，这两个元件被放入了动态面板的第一个状态“State1”中。
在概要面板中，我们点击动态面板第一个状态“State1”名称后方的重复按钮，将第一个状态重复一份，变为第二个状态。
此时，软件会自动打开第二个状态“State2”的编辑区，里面有与第一个状态相同的两个元件。
温馨提示：如果没有自动打开第二个状态的编辑区，可以通过点击概要中的状态名称打开。
我们把第二个状态“State2”中矩形的填充颜色设置为蓝色。
再把圆形的边框颜色设置为蓝色后，摆放在矩形的右侧。
这样，我们就完成了元件的准备工作。
接下来，关闭动态面板的状态编辑区，回到页面中为动态面板添加交互。
当动态面板被[单击时][设置面板状态]，将[当前]面板的状态设置为[下一项]，并能够[向后循环]。
到这里，第一种实现方式的过程就结束了。
二、使用交互样式实现
第二种方式是我比较喜欢的方式。
因为这种方式只需要一个矩形元件和一个圆形元件。
参考第一种实现方式，在画布中放入这两个元件。
矩形元件命名为“轨道”，并设置[元件选中的样式]。
将选中时的填充颜色设置为蓝色。
圆形元件命名为“开关”，并设置[元件选中的样式]。
将选中时的边框颜色设置为蓝色。
完成交互样式的设置之后，将两个元件组合。并为组合添加交互。
当组合被[单击时][切换]组合的选中状态。
此时，在浏览器中查看原型的话，点击开关按钮，颜色会发生改变。
但是开关还不会移动。
我们知道选中组合的时候，圆形“开关”要移动到轨道左侧，取消选中的时候，移动到右侧。
那么，根据这个逻辑，为组合中的“开关”元件添加“选中时”与“取消选中时”的交互。
温馨提示：为什么不直接给组合加交互？因为，组合没有“选中时”与“取消选中时”的交互事件。
“开关”元件被[选中时][移动][到达]指定的位置。
此时圆形要移动到“轨道”元件的右侧，它的X轴坐标是“轨道”元件右边界坐标值减去自身的宽度。
这些计算中用到的数值，我们需要通过局部变量与系统变量进行获取。
Y轴不移动位置，保持当前元件的Y轴坐标不变。
另外，我们还可以加上“200”毫秒的[线性][动画]效果，让交互更好看。
温馨提示：看不懂局部变量和系统变量的话，请先学习《局部变量的应用》和《系统变量的应用》。
“开关”元件被[取消选中时]也要[移动][到达]指定的位置。
X轴与“轨道”元件的左边界坐标一致，还是通过局部变量与系统变量获取。
Y轴仍然不移动位置，保持当前元件的Y轴坐标不变。
[动画]同为“200”毫秒的[线性]滑动。
到这里，我们完成了第二种实现方式。
不习惯看文字教程？还有《Axure RP 9萌新修炼视频》奉上！
转载请注明：iaxure.com » 两种方式实现开关按钮