交互设计中，如何制作一个优秀的动画？有哪些技巧和注意事项？

虽然我不是做UI的，但是对做Motion Graphic有一点经验。

概念：
做视觉感受顺畅的动画，不管是角色动画还是动态图像，最重要的两点就是 「节奏Timing」和 「幅度Spacing」。
此图摘自《原动画基础教程》
要做好这两点，最基础和普适的练习莫过于小球弹跳了。
详细的就不写了，网上到处是，最直接的请看视频版的《原动画基础教程》
这一节就行： 【高清】原动画基础教程（2）
当然要真正做好是不可能通过这几个练习就能完全解决的。善于观察，多看好的，经验积累都必不可少。
=======================================================================
更具体一点的技巧：
要动画看上去舒服说白了就是要 「 接近人的视觉经验 」。
通常上自然界 柔和动作的表现为 「两头慢，中间快」。

两头的堆积会显得这个动画更有 「生命感」。
在锤子ROM的UI中普遍使用了这种动画手段。
动画曲线是两头平缓的S型.。

我做了源文件，请用CS3以上版本打开： 01.fla

当然，如果你要做其他效果，可以使用不同的曲线，会使动画更有变化。

然后，自然界越有力量的动作，会有越强的「反馈」。在动画中称其为「逆向缓冲」。
这种方法可以增强动画的 「力量感 」。锤子ROM中，解锁后图标弹出的效果就是这样。
角色动画中一般会使用与动作相反的小动作作为大动作的预备来突出这个效果，不过鉴于UI对时间的要求有限，并不建议你这么做。

参考： 02.fla

接着是两兄弟，「拉伸」和「挤压」。这两者都是为了使动画获取 「弹性」。
学过物理的都知道，尽管有些时候肉眼察觉不出，物体受力的时候都会产生形变。

参考: 03.fla

同时，由于「视觉残留原理」，高速运动物体会显得「模糊」并且「拉长」了。这也是拉伸的另一个用处，会在时间不变的情况下，视觉感受上物体动的更快了，增加动画的 「 速度感 」。这比较好理解，就不做例子了。上面那个球坠落的过程中也有拉长，同样会产生这种效果。

另外，如果几个动画同时进行，稍稍错开几个动画之间的时间，会显得动画更有 「层次感 」。这个也很好理解。同样可以看一下锤子ROM解锁后的弹出动画，所有图标并不是同时放大的。

剩余的例如在颜色，大小，形态，明暗，透明度上的变化，都可以使动画看上不那么「素」。这个还是要自己多尝试比较好，比较考验一个人对审美的综合能力。

算抛砖引玉了，期待各位交互设计师的回答。
=======================================================================
最后写一点作为一个用户的感受。好的交互动画在我看来还有这么几点：

• 「别让我等」。
• 要有足够的信心让用户觉得百看不厌，不会审美疲劳。越是复杂或幅度大的动画会给用户越强的视觉刺激，但由于交互动画是个用户反复会看到的内容，刺激不管怎么样都是会递减的。看得越多就会显得越「腻味」。比如Android的第三方lanucher可以换各种各样的切屏效果，初看可能很有意思，看多了就显得怎么看怎么多余，我现在只需要平滑过渡即可，还是无回弹的。我个人觉得这点最难做到。
• 符合产品的气质。
• Set the mood.我个人很喜欢Sony升级到4.1后的百叶窗解锁效果，营造了「打开窗户看世界」的使用氛围。我以前用MIUI的时候有那么多种解锁方式，却都是「滑动解锁」换汤不换药的效果。

— 完 —
本文作者： 张一弘

知乎是一个真实网络问答社区，在这里可以寻找答案、分享知识，发现一个更大的世界。
下载知乎 iPhone 客户端： http://zhi.hu/ios
此问题还有 5 个回答，查看全部。
延伸阅读：
要成为一名优秀的交互设计师需要什么素质和技巧？
交互设计师需要具备多少视觉设计的能力呢？