Origami入门教程4-视频1：Introduction to Origami（下）

Adding Animation（添加动画）

使用Origami添加动画非常简单，特别是使用了Pop Animation之后。按下Command+回车,打开Patch Library即可搜索得到。也可以使用快捷键“a”快速添加。Pop Animation从输入口得到数值后，会直接把它变成动画输出。回忆一下，刚才的Interaction 2的Down端口，可以输出0或1，我们拔掉Down端口与Transition的Progress端口的连线，把Down端口插到Pop Animation的Number端口。这时，Down就可以得到动画了。然后，再把Pop Animation的Progress插到Transition的Progress。

添加动画.png

现在我们点击一下右边Viewer的手机屏幕，发现图片缩小了，松开手后，图片又平滑地放大了。我们已经制作出动画啦。

马上回顾一下，其实在添加动画中，我们只需要做的就是在Interaction 2和Transition模块之间，加一个Pop Animation模块。有个更快捷的方式可以实现这一点。把鼠标移动Interaction 2的Down口上，然后按下键盘“a”，就会自动地在这2个模块之间加上了Pop Animation模块，非常方便。

Adding a New State（增加新状态）

大家一定已经注意到，目前的效果是，我们点击屏幕，图片缩小，放开手后，图片又变全屏了。一般正常的交互应该是，点击一下，图片缩小，再点击一下，图片变大。为了实现这一点，我们需要在原型中引入状态。现在只有Down口判断手指是否点击了屏幕，我们使用Switch（开关）模块来加入状态。按下快捷键Shift+s，添加Switch模块。它就是一个开关，现在是Off（关）的状态，如果Flip（按下）的时候，就会变成On（开）的状态；如果再Flip，就又会变成Off。它的输出口会根据On或Off的状态对应地输出0或1。

实际上，我们只需要在Interaction 2和Pop Animation模块之间加入Switch。同理，可以把鼠标移动Interaction 2的Down口上，然后按下键盘“Shift+s”，就会自动地在这2个模块之间加上了Switch。

添加开关模块.png

这时，我们点击屏幕，发现图片缩小，松手后，图片依然是缩小的状态；再次点击屏幕，图片变大，全屏显示。图片缩放的过程非常平滑自然。

Synchronizing Effects（同步效应）

我们继续添加一张带文字和遮罩层的图片，现在希望点击屏幕，图片缩小的同时，这张带遮罩的图片消失。再点击屏幕，图片全屏显示的同时，带遮罩的图片也一同出现。

添加带遮罩的图片.png

让图片消失，也就是让Layer里的“Opacity”（透明度）为0。显然，需要添加一个Transition模块，让它插到Opacity去。当然，你可以按下键盘“t”来添加，再进行连接。这里再介绍一种更方便的方法。把鼠标移到“Opacity”上，同时按下键盘“t”。你会发现，添加了一个直接插到了Opacity的Transition模块，而且它的名字也变成了“Opacity”。这样的命名在复杂的合成里非常有用，可以帮助我们清晰地知道这个模块是输出到哪里的或者是干什么用的。

添加过渡模块.png

顺便也可以按这种方式给其他模块重命名，这也是非常推荐的做法。双击每个模块的顶部第一行，就可以给它们重新命名。比如，我们把第一个Transition模块叫做“Scale”，把Switch模块叫为“Photo is Zoomed Out”。

继续回到连接到Opacity的Transition模块。当Progress为0时，需要保证Opacity为1，也就是默认是显示图片，此时1=s+p*（e-s）=s+0，所以s也就是Start Value需要设置为1。当点击屏幕后，Progress为1，需要保证Opacity为0，也就是图片消失。对照上面的公式，0=1+1*（e-1），e即End Value为0。

最后，既然2张图片都是对同一个动作做响应，自然可以共用前面的模块，这就是“同步效应”的意思。把上面的Pop Animation插到这个Transition的输入即可。

最后成品.png

Layer Order（图层顺序）

接触过PS的同学就会知道，图层是有顺序的，在QC里也不例外。为什么刚才添加的带遮罩图片会覆盖在金门大桥的照片上呢？请看Layer顶部右边的数字，因为它的图层顺序为3，数字越大，就越在上方，覆盖数字小的图层。选中这个模块，使用快捷键Command+[ 或Command+] ，可以快速地使图层移到下一层或上一层。

图层顺序 .png

总结

第一个例子我们就成功完成了。总结一下各个常用模块的作用：

• Interaction 2：实现各种手势
• Switch：调节状态
• Pop Animation：加入平滑的动画效果
• Transition：通过设置Start Value和End Value，把数值0和1变成各种数值再输出
  我们可以通过灵活使用这些模块，做出精彩纷呈的交互效果。

学习材料

Origami入门教程3学习材料，提取密码: h39m。这是本节课的图片素材和我自己制作的QTZ文件，有兴趣的朋友可以自行下载，再自己跟着视频步骤亲自做一遍，加深理解。