Origami入门教程2：元素变化（Transition）和动画（Animation）

我们已经掌握了页面切换了，那么接下来我们就可以尝试进行一些页面简单的交互设计。Transition是我们最常用的交互逻辑，比如我们要改变位置、尺寸等都是需要Transition。当然控制Transition之前我们需要添加一个Switch，这样在我们改变Switch之后，Switch可以触发Transition进行变化。

我们通常是从后向前来添加Patch。比如我们知道更改之后的样子。

制作效果预览

添加开关

我们首先更改透明度。当我们点击图像后，透明度会变低。我们添加一个Tap的Patch，然后添加一个透明度的Patch。

在前面提到了我们需要一个Switch来控制状态。我们点击左上角加号，然后选择Patch，在搜索框输入Switch并添加。

我们双击Patch的标题文本还可以重命名，例如

将Tap与Switch的flip相连，点击之后即可切换Switch状态，Switch状态将被保存下来。

修改不透明度

我们开头提到过，我们需要Transition来进行状态的修改，现在我们已经有了Switch，所以我们来添加一个被Switch控制的Transition。

将切换状态的节点拖拽到空白处可以快速调出添加Patch的窗口，我们添加Transition。

我们可以看到我们的过渡是默认是从0到1，我们更改为从1到0.2。然后与人物透明度相连。

添加动画

我们发现默认是没有任何过渡的，所以我们需要添加一个过渡动画Patch，我们添加一个animation。我们常用的是classic animation和pop animation。

classic animation 就是添加普通的过渡线性动画，还可以添加非线性动画，比较像我们在css中经常添加的那种ease-in、ease-in-out，或者是我们在Adobe aftereffect中经常添加的“缓动”。

这里我们使用classic animation，因为透明度变化不需要弹性动画。

这样一个完整的透明度变化链路就完成啦。

我们可以配置动画的时长和线性样式。

调整文本位置

通过同样的方式我们将所有的上层内容编组，然后进行节点配置。

总结

我们这一次完成了交互模块到状态变化以及动画、过渡的制作。已经可以完成很多的动画项目了。我们这里只是用了opacity透明度和positionY来进行示例。当然我们还可以添加更多的属性动画。赶快试试吧！