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

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

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

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

 

 

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

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

 

 

 

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

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

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

 

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

声明:有的资源均来自网络转载,版权归原作者所有,如有侵犯到您的权益 请联系邮箱:123456@qq.com 我们将配合处理!

原文地址:Sketch+Keynote双剑合璧:5步快速制作移动动效发布于2016-02-16 21:36:04