目录：

1. 先动手玩连连看
2. 导入图片并适配Retina屏幕
3. Form Patch
   1. Image View
   2. Switch
   3. Spring
   4. Transition
   5. Touch Interaction

1. 先动手玩连连看

任何事情如果没有兴趣或者面对巨大的阻力时容易放弃，这样很有可能与优秀的软件擦肩而过，所以先以玩游戏的心态玩一下此软件。

第一步，下载附件并打开 Icon Animation.form 文件

第二步，按照下图从每个Patch的白圆圈拉出连接另一个Patch的白方框

第三步，按照下图步骤看效果

＊实际效果为下面GIF图

＊如果还是不清楚怎么运行可以参考另一个教程（http://www.ui.cn/detail/140685.html）

2. 导入图片并适配Retina屏幕

Form的单位设计非常合理，完全按照iOS的单位设计，没有任何像素px的影子。

用Form时也需要遵守iOS图片尺寸规范适（如：iPhoneSE logo@2x.png, iPhone 6 Plus logo@3x.png），如果对iOS尺寸规范不清楚请做好功课。

第一步，拖拽Icon@2x.png到Form Workspace中，你会发现图片不清晰并且很大并不像 Icon Animation.form 中Icon那样精致，如下图。

第二步，修改比例适配Retina屏幕像素

此教程的设备为@2x所以在此设置了数值2。如果是@3x设备请打开Sketch导出@3x图设置Scale为3

3. Form Patch

你可以把它简单想象成中的每一个模块，每个模块有不同颜色、不同接口形成了不同的功能。所有的效果、原型都是用Form Patch连接起来的，如乐高玩具那样。

Form Patch由三种颜色组成 深色、蓝色、橙色、红色。

• 蓝色－可在屏幕上显示的Patch
• 橙色－点击、3D Touch等操作事件
• 红色－滑动、双指、拖拽等手势事件
• 深色－包涵了数学、逻辑、开关等等Patch，是数量最多的Patch

此教程用到了红色以外的所有颜色Patch。

Image View

Icon@2x.png连接到此Patch，寓意着要在手机屏幕上显示出来。其中有诸多的属性可以调整。

Switch

这个Patch很重要 几乎90%的动画与这个Switch Patch有关，顾名思义是开关的意思。

开关只输出0或者1为什么与动画有关呢？带着疑问看一下下一个Patch。

Spring

此Patch是动画生成器，Switch Patch的输出连接到此Patch 的 Rest中，每一次开关的变化Spring都会输出0～1或者 1～0的小数值（如：0.0, 0.1, 0.2, 0.3 … 0.9, 1.0）。

当然如果移动本教程中的Icon只用这些小数并不会产生大幅度移动，所以还需要一个及其重要的Patch，它叫 Transition Patch。

Transition

这是一个小小的插值器，你可以把它理解成变速自行车的变速器齿轮，上面提到的Spring Patch则是自行车的脚蹬齿轮，随着变速齿轮的切换脚蹬转一圈时产生的后轮旋转度数是有差异的。

Spring Patch 0~1的数值变化会产生Transition Patch的变形动力。

例如: Spring Patch产生的 0~1对应到Transition Patch的200～400 并连接到Image View的Y属性上。Spring产生0～1变化时，图片会从200位置移动至400位置。

最后

如果你之前没用过Form或者QC Origami很难接受此软件，毕竟上面太多的线飞来飞去，每一个模块有多个输入输出看上去很难掌握。

但如果你希望在原型设计的道路上走很远的话，Form是非常适合的兵器。

还是那句话 “工欲善其事必先利其器”