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

 

本文将以一个列表页到详情页的动效作为案例来帮助描述。

 

 

 

 

开始动效创意之前，先普及一下动效的基本原理。

大部分移动动效，都可以基于以下5要素进行分解：

 

 

1 移动Move：改变元素位置；

 

2 缩放Scale：改变元素大小形状；

 

3 旋转Rotate：调整元素角度；

 

4 透明Opacity：调整元素透明度；

 

5 起始Timing：定义元素出现（消失）时机。

比较复杂的形变动画，在分解足够细的情况下，也可以看成是以上要素的组合。最著名的《迪斯尼的12条动画原则》中提及的动画原则，都是以上5要素的不同搭配。

拓展阅读： http://www.smashingmagazine.com/2012/10/30/motion-and-animation-a-new-mobile-ux-design-material/

该步骤中，最重要的就是将动效构思表达出来。 比如，像我这样，先以草图的形式将动效分解：

 

 

然后，把草图中的动效要素编排到时间线中，以下为本文所用案例的动效Timing示意图：