Sketch+Keynote双剑合璧：5步快速制作移动动效(6)

其次，我们根据动效Timing的编排，将整个动效过程分解成不同的阶段，其划分一般是根据不同页面状态过渡点设定的。 一段连续的动效基本可以表达为：

页面状态1 – 状态过渡 – 页面状态2 – 状态过渡 – 页面状态3…

正如本文开始时所提及的，Keynote本身没有分层管理的概念，正是为了避免同一个页面的元素过多，所以将动效中的部分变化过程适当利用神奇移动作过渡处理，把一个完整的动效过程分解到几个不同页面进行。更确切的说，建议将各页面中的构件动效在该页面中处理完成，而不同页面状态之间的切换，既可以利用神奇移动效果进行过渡，也可以先在单独页面中处理完毕，再合并到前一状态页面中去。

例如，将列表页面的操作反馈作为第一阶段，列表图到详情图的过渡变化作为第二阶段，而详情页面的内容呈现作为第三阶段。

然后，按照阶段划分将所有的视觉元素拖入Keynote，并拼接成产品界面，其中不涉及动效的部分合并成组。

适当利用Keynote的快捷键，能够极大提高你的操作效率。

如上图所示，动效第一阶段即列表页自身控件变化（包括触控光标的出现和列表项点击反馈）；第二阶段可以借助神奇移动，实现两个状态的过渡；第三个阶段则着重表现详情页相关内容元素的逐步呈现效果。

接下来，利用动画效果设定选择每个构件的动效（出现、动作、消失）。只要有耐心，Keynote自带的动效几乎能够实现所有动态效果。

最后，在构件顺序中对每一步动作进行编排。

需要特别留意的是，由于Keynote本身缺少可视化的时间线展示，只能通过构件顺序面板中各构件的起始顺序、起始方式与延迟时间的有效组合实现。