关于动效设计：给物体的移动增加细节
刚开始做动效的时候总会觉得自己做出来的效果“硬邦邦”的，很假。后来慢慢做多了之后也总结了一些经验。目前我在光线和粒子的运用上还比较一般，对于运动的动效还有点感觉。另外以运动为主的动效运用范围也更广阔，游戏和互联网领域都会用到。
所以这次以最简单的位移运动为例分享一下吧。
第一层：遵循基本的物理规律
1.起步加速——匀速——减速——停止
2.回弹
这两者是最常用的做法，应用在频率较高、重要性较低的辅助性动效较多，如面板的出现。前者的存在感相对弱一点，适合平滑的动效风格和体量感较轻的视觉元素；而后者由于出现了运动方向的改变，所以存在感更强，适合活泼、Q弹、体量感更强的界面风格。
举个例：科幻风格的全息投影面板出现的时候一般就不会用回弹的动效，因为全息投影的面板是没有重量的，所以不会出现走过头再弹回来的情况。
第二层：增加更丰富的物理规律
1.多次回弹
在回弹的基础上再加回弹，风格显得更Q弹，在动画最后的抖动也会进一步加强这个元素的存在感。
2.通过倾斜来做回弹
这个动画其实是把物体的材质也考虑到动效里去了，来回的倾斜呈现出一种很Q弹的材质，比起单纯的整体运动而言，倾斜的加入可以使动画更活泼。
3.翻转
这三个动画都描述了一种比较硬但重量较轻的材质，翻转的最后落地的那一下会对这个元素有一个强调的作用
小结：
这几个动画对物理规律应用得更多，动画的存在感也更强烈，这种程度的动效适合作为整个屏幕的焦点，用到非循环播放的动效中，如升级动画
第三层：增加故事性
如果说前两层是要求设计师对生活中物体的运动规律有细心的观察然后复刻到动效设计中的话，第三层则需要在设计中增加创意，把动效的各个控件看做演员，为他们注入性格。
1.灵感来自很多动画里的奔跑过程，尤其是猫和老鼠
2.灵感来自某个舞蹈动作
3.这个动效里我尝试增加Y轴上的运动，并试图把跳跃的动作做得轻盈一点，但没有运动曲线的帮助似乎还是没能达到十分轻盈的感觉
4.设计这个动效时，我在脑子里给这个方块加了很多重量，然后自己脑补一下要把这么重的一块东西移到那个位置，会是怎样的过程
小结：
增加了故事性的动效不一定非常有存在感，这和设计师注入到动效里的具体是什么故事以及动效和界面设计的结合度有关：
1.在游戏中我们经常会设计一些故事性较强的界面（例如炉石的匹配对手界面），在这样的界面中，故事性和界面设计紧密结合，动效主要是为故事性服务的，可能只要做到合理的物理规律就已经能很好地符合界面的故事性；
2.而在另外一些界面中，界面本身没有设计太多的故事性，但又需要一些细节去丰满整个界面，这时就需要动效本身的故事性。比较典型的例子是loading，或者一些按钮上的小动效。
----
这篇只是讲了怎么增加细节，但什么时候做到第一层就“够了”，什么时候要做第二第三层，如何根据不同的使用场景和界面风格去选择不同程度的动效，这还是需要更深入地探讨的。对于这一点，我自己最近在尝试用“节奏”的概念去整理，整出个结果再写新东西吧。
评论