Origami Studio 教程九多个状态切换

2017-03-31 10:46:00

超过两个状态的交互。

我们已经知道怎么用 Switch 模块在两个状态之间切换，但是怎么在三个或更多的状态之间切换呢？像标签栏一般都是三个以上的状态。

我们将通过重建 Instagram （板栗：嘿嘿我没按 Instagram 的做～）的标签栏操作学习怎样添加三个以上状态的交互，同时学习两个核心模块：Option Switch、Option Picker。

▲▲

1. 配置

按下面的结构创建一个素材文件

1. ▼ 一个屏幕组：Screens；

▶︎ 屏幕一：图库 - Library；

▶︎ 屏幕二：拍照片 - Photo；

▶︎ 屏幕三：录视频 - Video 。

2. ▼ 一个标签组：Tab Bar

▶︎ 标签一：图库 - Library；

▶︎ 标签二：拍照片 - Photo；

▶︎ 标签三：录视频 - Video 。

板栗：注意第三个屏幕的X轴要刚好让三屏不重叠，平铺着，然后调整图层组 Screens 的 X 值刚好显示在第一屏。三个屏的X值要记着，后面要用到的。

一般我们都用 Switch 模块来切换状态。但是 Switch 模块只支持两种状态。这意味着我们只能给两个标签添加交互。但是标签栏有三个选项，且都需要能切换，所以这次我们将学习一个新姿势。

▲▲

2. 再选项之间切换

添加一个 Option Switch 模块。

Option Switch 模块可以添加多个接入口，通过将交互模块连接到这些接入口实现在多个状态之间切换。

双击模块编辑器或按 Cmd Enter

打开模块库搜索；或按

Shift I

添加。

▲ 板栗：Option Switch 和 Switch 的区别，Option Switch 相当于一个升级版的 Switch，一个有多个接口的 Switch ！

▲▲

3. 选项切换

我们已经知道，需要点击 Tab Bar 内的三个按钮 Library、Photo、Video 切换页面，所以要给每一个按钮添加交互。

添加交互：

• 鼠标悬停在按钮的图层组 Library 上，右上角会出现一个 Touch 按钮；

• 单击 Touch → Tap 创建一个 Interaction 模块（Interaction 的接入口 Layer 会显示对一个的图层名称）；

• 将 Tap 输出口连接到 Option Switch 模块的第一个接口 Set To 0。

对 Photo 和 Video 按钮重复此过程连接到 Option Switch 模块后续的接入口。

▲ 按顺序将每个 Interaction 模块的 Tap 输出口连接到 Option Switch 的接入口。

点击查看器中 Tab Bar 的三个按钮检测是否有脉冲从 Interaction 传递到 Option Switch 模块。Option Switch 模块的 Option 输出口前面的数字会同步为刚刚点击的接口值。

基于0的编号

Option Switch 模块的 Options 输出口从 0 开始计算。第一个选项对应的数字为 0，第二个数字对应的数字为 2，如果有更多的选项以此类推。

选择选项

可以在选项之间切换，并通过 Option Switch 输出我们的点击的选项，那要怎样才能创建肉眼可见的切换呢？

现在要学习一个新模块啦：Option Picker，添加一个 Option Picker 到编辑器。

双击模块编辑器或按 Cmd Enter 打开模块库搜索；或按 O 添加（是字母ou ,不是数字零）。

连接这两个模块

将 Option Switch 模块的输出口连接到 Option Picker 的输入口。

在 Option Picker 上右键更改为和 Option Switch 匹配的接入口的数量。因为有 3 个标签按钮，那就选个 3 呗。

应用状态

板栗：我做的时候做了个iPhone SE 的尺寸，二屏在中间坐标为0，第一屏在左侧为-320，第三屏在右侧为320；而且是通过将 Screens 组坐标向右移动320来设置默认显示第一屏的。下面的值会按我自己设置的写，同理将值换算为你设置的值。

第一屏的 X 轴坐标为 320 ，在 Option Picker 的第一个接口输入 320 ；第二屏的 X 值为 0，第三屏的 X 轴为 -320，在 Option Picker 接口中输入对应的值。

板栗：就是在 Option Picket 接入口填写移动 Screens 图层组能分别将屏幕1、2、3显示在查看器中的坐标。第一屏的坐标也可以是0或其他的值，但是要满足【第二屏的X值 = 第一屏 + 屏宽】、【第三屏的X值 = 第二屏 + 屏宽】。

▲ 模块中的值应该是图中所示的这样。

点一点 Tab Bar 中的按钮检查 Option Picker 的输出口是否同步为点击的值。

Option Picker 接收我们当前选中的 Option 值，并且在输出口显示和输入口一样的值。

例如，点 Photo 按钮，Option Switch 模块的接入口会选中为 Set To 1， Option 输出口会显示为2，Option Picker 模块输入口会选择第二个接口即 -0 的这个，然后传递给输出口，输出口的值就会显示为 -0。

连接 Option Picker 的输出口到 Screens 图层组的属性 Position - X 。

点击查看器中的 Tab Bar 的任意一个按钮，可以看到屏幕的X轴切换。

▲▲

4. 添加动画

现在的切换是没有过渡的，为了柔和切换，添加一个 Pop Animation 模块。

双击模块编辑器或按 Cmd Enter 打开模块库搜索；或按 A 添加。

把 Option Picker 模块的输出口连接到 Pop Animation 模块的 Number 输入口；

把 Pop Animation 模块的 Progress 输出口连接到 Screens 模块的输入口 Position X。

然后按个人喜好调节 Pop Animation 的 Bounciness、Speed 值。

板栗：以后就可以先点一下 Option picker 的输出口，在按 A 添加 Pop Animation 模块，并连接口会自动连接好；再选中 Pop Animation 的输出口，点击 Screens 图层组 Position 属性的 X（不是后面的数字，是名称 X ）创建 Screens 模块，接口会自动连接好。