通过前两个教程，希望大家对Origami 创建动效有一个比较直接的认知，尝试之后觉得感兴趣的就可以继续深入学习 Origami 了。此次教程会为大家阐述一下基本原理，还有怎么和 Sketch 配合使用。

请打开教程文件同步进行学习。

文件理解

解压教程文件，你会看到里面有个Sektch 文件。里面有个已设计完成的简单界面，以此构建一个比较简单的交互动画。Origami 文件里面都是空的，在此我们初步尝试自己搭建界面到 Origami 里面。

交互思路为：点击图片 > 图片缩小 & 文案消失 ，请看下图最后效果：

Step 1

首先，我们先把基础界面放置到 Origami 当中，Sketch 和 Origami 的配合非常简单，就是直接的复制、粘贴就搞定了。

对于 Origami 的界面认知，前面已经介绍过了，先把 Sketch 的界面元素都复制过来，直接复制Sketch文件夹的时候，如果文件夹内的图层比较复杂，会弹出下图：

Paste as Image Instead   指把文件夹变成图片

OK   保留文件夹的模式，里面的图层依然存在

这个根据实际情况决定用哪种情况。转换成图片时要注意，会自动缩小，这个表示有点纳闷，有2个解决方案，1 在Sketch 中先放大2倍在复制过去，2 在Origami 里面直接放大2倍。如果这个图片不会有交互个人建议2方案，如果有交互采取1方案。

Step 2

在复制 Info 文件夹的时候，OK就好，这时候你发现位置不对，原因是锚点有问题，改为底部对齐即可，这个和你设计的方法是有关联的。

Step 3

界面部署完成，回忆一下我们要实现的效果，点击图片 > 图片缩小 & 文案消失 ，so 先给 Photo 来个点击 patch

OK，相信大家对这个 patch 已经不陌生了，不过还是继续加强印象吧

Down        很好理解啦，就是按下

Tap           也很好理解，点击并立刻松开，点击但移动则无效果

Position    点击时产生的坐标，坐标值是相对于父级或设备中心

Force        这个主要是检测按压力度的，3D Touch，你懂的

需要注意的是，这个patch 的启动，首先图层不能隐藏且透明度必须大于0。

Step 4

所谓动效，基本就是模块的数值变化，所以 Transition 是最常用的 Patch 之一。直接快捷键“T”，然后修改变化值，Start 0.38，End 1，然后”连连看” ;P

然后，在预览测试一下效果，检查一下

Step 5

此时看动效是比较生硬的，让动效看起来有“橡皮筋”的效果，很简单，快捷键”A”，调出Pop Animation ，然后连连看～

这个时候看起来比较好玩了，但我们要实现的效果并不是按下就发生的，所以要修正一下连线，把Down 改成 Tab

OK，在预览检查一下效果，看看有没有问题，很明显：

1. 之前 Down 的时候，只有一直长按最终动效才完整播放；
2. 用了Tab 又只是瞬间的动效播放；

怎么破？

Step 6

添加动效开关patch，Shift+S调出Switch，并连线

现在我们再操作一下，OK，开关的效果完美，哈哈，有成就感吗？

Interaction, Switch, Pop Animation, 和 Transition，这几个patch 是 Origami 动效组成比较常用的组合，要记住！

Step 7

还没结束呢，文案那里还没进行动效设置，在图片缩小的时候应该隐藏。

继续添加 Transition，文案效果就是简单的透明度变化，所以基础的数值不用改变

Step 8

最后，再进行对 Transition 深度挖掘可能性，对底色的color Fill进行颜色的变化。快捷键“T”调出新的 Transition patch，然后右键，将会出现一些选项，选择 Color，请看下图：

此时看到 Transition 已经发生变化，从数字变成了颜色选择。

我们想要的起始填充颜色是白色的，而结束是黑色的。像之前一样，将Pop Animation Progress的输出连接到新的Transition。然后，连连看

最后再看看预览的实际效果，全部搞定～ 香槟走起～ 哈哈 ;D

学习总结：

1. Sketch 与 Origami 之间的软件配合方法，Sketch 设计时要注意布局；
2. 加深对Interaction patch 的理解；
3. 初步认识Interaction, Switch, Pop Animation, 和 Transition的常规动效组合；
4. 初次认识多个动效组合的变化；
5. 初步认识Transition patch 的多样性变化；