在axure中使用两种不同的方法实现toggle组件


classification: 实战axure
title: 在axure中使用两种不同的方法实现toggle组件
tag: toggle dynamic panel move by 方法
author: 嘟嘟宝嘟
Date: 2020年12月4日


在axure中使用两种不同的方法实现toggle组件

在实际原型设计中,一般都使用动态面板实现toggle组件的动态效果,其实还可以使用组件的move by 方法实现toggle组件的动态效果。

两种方法各有优缺点:

动态面板事件的逻辑简单,代码少,但是需要使用的组件较多,几乎没有动态效果(开关动作);
使用组件的move by方法,基础组件较少(是动态面板方式的一半),可以做出开关移动的效果,但是对基础组件的样式效果设置和事件的代码逻辑比较复杂。

今天就介绍用这两种方法实现toggle组件的案例。

1. 使用动态面板实现toggle组件

使用动态面板实现toggle组件需要一个动态面板组件,为动态面板组件设置两个状态:,每个状态内包含三个基础组件,两个shape组件画出toggle开关的基础样式,一个label组件表明当前开关的状态。

动态面板方式toggle的组件

动态面板的on状态:

on状态

动态面板的off状态:

off状态

然后设置动态面板click or tap 事件:

click事件

运行这个组件,我们看到当点击toggle组件的时候,开关实现了打开和关闭的效果。

但是当点击中间的滑块或开关状态文字的时候,组件状态也发生了改变,而实际系统的toggle组件这个时候的状态不会发生,只会在点击滑块的旁边颜色区域时,滑块才会滑动改变状态。

2. 使用组件的move by方法,实现toggle组件

这种方法只需要定义三个基础组件,两个shape组件和一个label组件:

toggle的组件组成

一个带有颜色改变的大的shape组件作为toggle的滑轨,一个圆形shape组件作为toggle的滑块,label组件表明当前开关的状态。

组件效果
  1. 首先设置作为滑轨的shape组件的颜色和样式效果,我把基本效果设置为红色关闭状态(这是因为selceted效果对应on状态比较符合语义逻辑),selected style设置为绿色,默认展示selected style
滑轨组件的样式效果设置
  1. 然后定义滑轨shape组件的click or tap事件:
滑轨组件的click事件

在move方法中使用的是相对位置by而不是绝对位置to,横向移动距离只要大于滑轨组件的尺寸就可以,设置移动的边界滑块就不会滑出滑轨组件。500ms的滑动时间只是为了看到滑动效果,实际设置时可以设为100ms。

运行这个组件,当我们点击滑块或者滑轨之外时,toggle组件不会有反应,当点击滑轨时,滑块会有明显的滑动开关效果。

最终显示效果

你可能感兴趣的:(在axure中使用两种不同的方法实现toggle组件)