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

值得注意的是，最终时间线（Timing）的编排设计，并非起始阶段就确认敲定，而是结合动效效果反复调试更改至最佳后，才确认并提交给开发作为实现依据的。

关于动效制作的思路，大家可以通过收集优秀动效作品来积累灵感，除了优秀app的实际动效体验外，dribbble和capptivate都是不错的动效发散圣地。

 

 

思路理顺之后，开始进入制作阶段。此时，需要将step1中动起来的元素制作出来，Sketch就能派上用场了。

首先，打开需要制作动效的产品页面Sketch视觉设计稿，

 

 

将可能需要用到的独立动效元素或者不涉及动效的元素在Sketch中合并成组，以此为基础导出视觉切图。由于Keynote导入的资源在“构件顺序”面板中不支持重命名，为了避免在设置元素动效细节时产生混淆，建议在Sketch里面就把相关layer进行合理命名。

 

 

 

在进行动效制作前，按照以下步骤对Keynote进行配置：

1 运行Keynote并打开一个空白模板；

 

2 点击Keynote工具栏右上角的“文稿”设定，在幻灯片显示设置中，勾选“打开时自动播放”“循环幻灯片显示”选项；

 

3 在演示文稿类型中，将默认的“正常”改为“自行播放”，并将延迟的过渡与构件时间调整为0；

 

4 根据动效的展示平台，自定义幻灯片大小。iOS建议640×1136，Android建议720×1280；

 

5 确保Keynote工具栏右上角“动画效果”设定下的“构建顺序”面板已调出。

 

 

 

最有意思也是最关键的一步，即怎样使它们按照你的设想真正动起来。

首先，我们普及一下Keynote动画功能中两个重要的模块：

1 构件的动效 构件出现：定义元素如何出现，能够结合移动动效5要素中的“起始”概念，展现构件的开始过程。 动作：定义元素如何变化 ，能够结合移动动效5要素中的“缩放”、“旋转”、“移动”、“透明”等概念，展现构件的变化过程。 构件消失：定义元素如何消失，能够结合移动动效5要素中的“起始”概念，展现构件的结束过程。

2 页面的转场 神奇移动：这是Keynote动效中非常重要的功能，它提供了两张页面之间构件位置与大小自由过渡的效果，以一种神奇的方式自动填补两张页面之间相同构件的位置、透明度、大小等变化过程。 未选中任何构件时，动画效果设定下选择过渡效果中的“神奇移动”即可，以下是我的习惯设置：