一用Keynote，交互笑欢颜 - Keynote设计交互动效心得2

上一篇东扯西拉的分析了一下几个动效实现工具的利弊，并简单的讲解了一个UI动效页面的案例，本篇继续和大家交流一个动效案例，以此来展示一下Keynote制作动效的一些特点。

上图是一个UFO的动图，这个动效的原稿来自追波的一个射鸡师名曰 James Porla，以下是原稿链接：https://dribbble.com/shots/2120202-Icon-Animation-Immersus-Media 。有些许的改动，那么原稿是通过AE设计的，大家可以从中对比看看从中有没有一些区别，现在给大家讲解以下Keynote制作这个动效的心路历程……

从图中（本文上图）我们可以看出，动效中活动的部分主要有：

1. 飞碟，保持左上右下来回游弋  

2. 外星人的眼皮，会在飞碟的游弋过程中上下眨动

3. 眼珠，当眼皮闭合张开后，眼珠会向左上方移动，并与下一次闭合张开后移动会原点

4. 左上方的星星，会伴随飞碟的游弋顺时针方向旋转

5. 活动部分移动的顺序为：眨眼（2次）- 眼珠左上方移动-飞碟左上方移动 同时 星星顺时针旋转 - 眨眼 - 眼珠移回中间 - 飞碟移回中间 同时 星星顺时针旋转 - 循环

那么我们就按照这个顺序来排列动效动作

我已经事先用sketch画了这些部件，并按照动效的静态部分和单个动效部分进行了切图，下图就是动效部分的切图：

这里一个关键的点就是我将飞碟眨眼后的状态切了两个图，通过更换图片来实现眨眼后的切换动效，这样做的好处是我不用花时间去慢慢的扣眼珠的移动轨迹，因为在Keynote中设置这种细小的运动轨迹相比SKETCH、PS 甚至AE都还是很吃力的，他并没有经纬度的精确设置功能，只能够通过辅助线来调。第三个绿色色块是眼皮，最后是星星。

下面是那么我的动效逻辑：

1. 我将飞碟左上移动的全程动作在一个页面展示，飞碟右下移动的全称动作另起一页展示，中间使用神奇移动特效来过渡

2. 首先是眼皮移动眨眼，我使用的是动作-移到动效，设置时间0.1s，抹入/摸出，在这里因为是眨眼，所以需要复制一个眼皮放在下方，两个同时动作，就实现了闭眼的效果

3. 闭眼后眼珠就该向左上方看了，这个时候就需要替换UFO，眨眼后，UFO1 立即消失，同时UFO2出现，没有时间延迟，之后两个眼皮按原路移动，就实现了眨眼的效果，同时眨眼后发现眼珠移动了。之后我们让两个眼皮消失，消失的原因是我们接下来要向左上移动UFO，这样不会使眼皮停留在原地露馅儿，也不用花时间调整眼皮随UFO移动

4. 忘了星星，星星比较简单，因为和UFO没有位置交集，所以在UFO替换的同时，就可以让星星执行顺时针旋转的动效了

5. 接下来让UFO2执行右上方移动的动效，这样第一页的动效就实现了，第二页的动效是一个完全反向的操作。

整个动效梳理完以后发现不是很复杂，就是一个一步一步实现和连接的过程，但是动效实现的逻辑是需要花时间以及多次实践来确定的，比如上文说的眼皮的消失问题，UFO的替换问题，都是利用了Keynote的特点来 “欺骗” 读者的，但是效果却简单且疗效好。

个人觉得，AE的效果还是要更加的流畅，一些细节上Keynote还是无法精确的实现的，但还是那句话，对于一个交互设计师来说，以向客户、开发、产品等展示原型效果这一点来说，Keynote还是能够胜任的。

以上我通过案例分析了Keynote设计交互动效的一些特点，之后的文章里还会和大家交流更多有关交互以及产品的好玩的事情。

扫描它，一起交流交互产品的那些事儿

LUX乐设计