动效软件 Form 教程：概览与基础 patch 介绍

作者: 镇雷 | 来源:发表于2014-12-25 20:56 被阅读4897次

（未经允许，不得擅自转载）

都说产品设计师的设计可以用 Axure + Sketch + Origami三者联动，完成原型、视觉和动效的一条龙工作，前一段时间也抽空学习了一下 Quartz Composer（以下简称 QC） + Origami，虽然有一定的上手难度，但是确实能够做出非常逼真的效果。美中不足的是，QC目前还不能比较方便地在手机上演示，并且在没有插件的情况下，patch 并不是那么好用。对了，QC 中的组件统称为 patch，可以理解为一个带多输入多输出的程序块，不同功能的 patch 组合在一起可以实现非常多的动画效果。

所以呢，我和小伙伴看上了最近刚刚被 google 收购的动效软件 Form，有着和 QC 非常类似的 patch 组件、界面和操作方法，但是更加易用，也可以很方便的在手机上演示（包括各种手势），下一个版本也会出 Mac 上演示的功能。在网上找了一下，相关的中文教程几乎没有，官方倒是提供了一些视频教材，所以我凭着粗劣的英语和浅薄的 QC 基础就跟着学了一下，写成这一个图文版简单教程，用以自己记录，也用以分享。

从 Form 官网可以下载到 Mac 上的 Form 应用以及用于手机端模拟的 Perform app。

打开 Form，主页是这个样子的：

一篇漆黑是吧，没关系，先简单介绍一下几个按钮的功能。

1.Device Browser：用以连接手机，当 iOS 设备打开 Perform app 后，与 Mac 处于同一局域网下，点击此按钮则可以发起与手机的连接。

2.Create patch group：创建 Patch 组，主要用户将选中的 Patch 组成一个 Group，下面的教程中会提到。

3.Actions：里面有两个功能，一个是『snap Patches to Grid』，即啪的一下将所有 patch 移动到边缘（对齐？）；另一个是『Remove Unused Patches』，即一键移除没有被使用到的 patch。

4.Patch Liarbry：patch 库，可以从中搜索选择适合需要的 patch，快捷键command+回车，也可以调出搜索界面。

5.Patch Inspector：显示和编辑所选 patch 的属性值和其他选项内容。

6.patch 的一个层级索引，主要用于定位当前所处的 patch 组，比较复杂的时候也可以方便的再不同的组之间跳转。

7.黑黢黢的一片，就是主屏幕了，主要操作都在其中进行。

将手机连接上，接下来，先根据一个小例子来熟悉一下操作方法和基础 patch 功能。

command+回车调出 patch 搜索界面，先尝试一个 patch 叫 color view，选中回车即完成添加。

完成后，手机的左上角会出现一个白色正方形，而 form 中则会出现这个 patch 的控制窗口。

简单说明一下，窗口中蓝色 patch 控制窗的左侧为输入端（边上为文字说明），右侧为输出端（当前那这个 patch 没有输出端），输入输出是通过连线或者直接输入数值来控制的。在 patch inspector 中可以对这个 patch 的各种属性和选项进行修改，比如可以修改位置属性中的 x position，即改变方块的 x 轴位置，输入100，方块就向右移动了100px 距离。

另一种方法是，将鼠标放置在想要修改的 patch 属性前的白色方块上，左侧会出现一个小标签，此时回车，就可以直接键入数值。

这里还有另一个概念叫锚点（anchor），以这个白色方块为例，锚点就是它的局部坐标系圆心。默认情况下，锚点的坐标为（0,0,0），也就是方块的左上角，所以你会发现当设置 x 和 y 的距离时，是根据左上角这个点为基准的。在 inspector 中可以调整锚点的位置，比如调整为（0.5,0.5,0）时，锚点就移动到了方块的正中心，此时的位置都是指这个中心的坐标位置，这在旋转等效果中非常重要。修改不同的锚点位置，并且试一试旋转和位置设置，你会很快明白它的含义。

删除这个 color view patch，把一张准备好的图片直接拖到 form 中，会自动添加一个名为image view 的 patch，并且附属了这张你添加的图片。不要被这些线条吓到了，其实原理很简单。image 是你的图片，而手机上所显示的内容则是 image view patch 本身，可以看到两者的长款属性是相连的，image 属性也是相连的，表示 image 的这三项属性值作为输入传递给了 image view patch，显示在了手机上。

点击图片的 patch，可以在 inspector 中看到一个 scale 属性，这表示的是当前的比例尺寸。scale = 1代表以原始尺寸显示，2则长款都变为原始的一半，以此类推，可以选择一个最合适的尺寸显示。

将鼠标挪到连接线上，可以看到一个浮标显示当前属性的数值，双击可以固定显示。可以通过修改 scale 看到实际图片的长款数据发生等比例变化。

接下来，为图片增加交互，添加一个 touch interaction patch，并且做如下图的连接。（interaction to interaction，down to opacity）这么操作的意思是，将touch interaction 所接收到的操作作为输入值传递给 image view，具体为『down』，即按下这个动作。

完成后，你会发现手机上的图片消失了，而在原本图片的位置用手指按下，图片又出现了。这是因为 down 属性默认为0，传递给 opacity（不透明度）变量时，图片是完全透明的，而按下后，down 传递值变为1，图片又出现了。

想要图片根据点击切换状态，要怎么做呢？添加一个 switch patch，顾明思意，这是一个转换开关。做如下图所示的连接，（down to toggle，on/off to opacity），会发现 down 传递过来的数值进过 switch 后，发生了反转。此时点击图片，图片会消失，再次点击，又重新出现。

我们还希望根据点击，图片的尺寸也发生一些变化，添加一个 transition patch，如下图连接，并且将 transition patch 的OutPut Min 数值设置为0.5，Max 默认为1。这样操作的目的是，通过 switch 传递过来的数据原本是01变化，经过 transition 后变成0.5到1变化，输入给 image view 后，尺寸比例和不透明度就都在0.5和1两个数值上变化了。

此时我们发现图片的变化是瞬时的，一般在动效中，我们希望控件的变化应当是有弹性或者是变化过程的，此时可以添加 spring patch 来解决这个问题。注意，spring patch下面有三个 reset 属性，我们这里只需要用到 x 属性，可以通过 inspector 来控制 spring 的属性维度。

对控件做如下图所示的连接。此时在点击手机上的图片，发现不透明度和尺寸都是渐变的了，多了一个弹性动画效果。

接下来，添加一个 super variables patch 和两个 math path，双击 math path 中间的符号，都修改为『/』除法，分别设置左侧下面这个属性的值为2和2.5。super variables 有长宽高三个属性，没有输入值，输出值为当前设备屏幕的三个尺寸信息，比如我选用 iPhone4s 作为显示设备，此处长款属性为960和640px。做如下图的连接，除以2表示移动到设备的正中位置（注意锚点）。这里还提到了一个小技巧是，如在 image view patch 上的某些属性边右键，可以选择隐藏这些暂时用不到并且不需要显示的属性组。

下一步，给图片添加一个白色的背景，用的正是之前提到过的 color view patch。将 super variables 的长宽数据传递给 colorview，会看到白色充满了整个设备屏幕。注意一下 patch 的右上角有一个数字，这代表的是这个 patch 在屏幕显示时的层级关系，将 color view 的层级调整为1，image view 则自动变为2，于是白色方块就显示在图片下方了。（在相应 patch 的 inspector 中也可以设置层级，还可以设置颜色，这里将 color view 设置为灰色）。

感觉这些线条有点混乱了吧？为了方便整理 patch，按住 shift 可以选中多个 patch，之后点击 create group 可以将这些 patch 合并成一个组，可以理解成一个新的大 patch，并且可以给它命名。

双击这个新的大 patch，可以进入内部，并且看到左下角的索引增加了一个新项目，表示目前你所在的位置。从外部输入进来的属性，会通过一个绿色的标签指示出来，注意如果你删除了这些外部输入，可能需要重新从外部引入。

最后，在root view 下，增加一个 text image patch，给图片设置一个标题，通过修改 size 等可以调整文字内容、尺寸、字体、颜色等属性。为 text image 添加一个 super variables math和 math patch，使得文字出现在水平正中，而竖直位置上通过一个 transition 使得文字在屏幕外（600px）和图片下方位置之间（430）变化。