Origami入门教程2：元素变化（Transition）和动画（Animation）
内容提要
本文介绍了页面切换和页面交互设计的基本概念，包括switch、transition、tap、透明度的patch和animation。通过这些方法可以实现位置、尺寸的变化、状态的切换和动画效果。同时还提到了调整动画效果的方法。
延伸解读
从后向前搭建：先明确目标状态
文章强调添加patch时通常从后向前，即先确定更改后的样子。例如先想好点击后透明度变低，再添加tap和透明度patch。这种思路有助于理清交互逻辑，避免在搭建过程中迷失方向，尤其适合初学者按效果反推所需节点。
switch是状态切换的核心
switch用于保存和切换状态，通过tap触发flip即可改变状态。文章指出switch状态会被保存，这意味着它可以作为交互的持久化开关。将switch与transition连接后，transition才能根据状态变化执行位置、尺寸或透明度的过渡，因此switch是连接用户操作与视觉反馈的桥梁。
transition与animation的分工
transition负责响应状态变化，实现位置、尺寸、透明度等属性的过渡；而animation用于添加更丰富的动画效果，如classic animation和pop animation。文章示例中透明度变化使用classic animation，因为它不需要弹性效果。两者配合可以构建完整的交互链路，但需注意默认过渡范围可能需手动调整。
动画参数可调，扩展性强
文章提到可以配置动画的时长和线性样式，classic animation支持线性与非线性过渡，类似CSS的ease-in、ease-in-out或After Effects的缓动。此外，通过节点配置还能调整文本位置。这表明Origami不仅支持基础交互，还能通过参数微调实现更细腻的动画效果，并鼓励尝试更多属性动画。
Q&A
Origami中如何实现点击图像后透明度降低的效果？
添加一个tap的patch和一个透明度的patch，再添加一个switch，将tap与switch的flip相连，点击后切换switch状态。然后添加一个被switch控制的transition，将过渡从默认的0到1改为从1到0.2，并与人物透明度相连。
Origami中transition的作用是什么？使用时需要配合什么？
transition用于改变位置、尺寸等交互逻辑。控制transition之前需要添加一个switch，这样改变switch之后，switch可以触发transition进行变化。
Origami中如何添加和配置动画？
添加动画需要使用animation patch，常用的是classic animation和pop animation。classic animation用于添加线性和非线性过渡，适合透明度变化。可以配置动画的时长和线性样式。
Origami中如何重命名patch？
双击patch的标题文本即可进行重命名。
Origami中如何快速调出添加patch的窗口？
将切换状态的节点拖拽到空白处可以快速调出添加patch的窗口。
Origami中classic animation和pop animation有什么区别？
classic animation用于添加普通的过渡线性动画，还可以添加非线性动画，类似CSS中的ease-in、ease-in-out或After Effects中的缓动。pop animation则未在文中详细说明，但通常用于弹性动画。
