动效的细节可以影响整体效果，不信你看。
咱们以前讨论过一个话题，就是界面动效中的一些细节设计需要考虑元素之间的交互作用。这些交互作用中最常见的就是元素之间的碰撞。
碰撞关系很好理解，元素A有个动力，啪，把元素B给撞了。这时B需要根据A的运动形态，设计某种响应动作。
这个过程中的动作设计上并没有什么难度，但是我发现很多人挺不容易把这种动作做得自然生动。比如说下边这个例子：
看起来似乎该有的动作都有，可总会觉得哪里不对。
这其实只是因为一个细节没有做好。稍微修改一下，就感觉好很多：
两个设计的差别，其实只是稍微改了一下两个动作之间的时间错位。
A（
圆形
）是主动施加动作的主体，B（
长条
）则是被动被施与能量的主体，B的动作由A引起，所以AB的动作并非同时发生。许多人容易搞错两个动作的起始点位，从而让最终的效果显得不合理。
第一个效果中，A和B最后一段的回弹动作看起来有点“顺拐”，可以看一下两个物体的运动曲线和相应的时间点位：
两个物体的运动起始点一致，这导致它们在最后的回弹阶段有着一模一样的动作，从而让总体上的动画效果看起来非常“顺拐”。
下图所示分别为两者的运动曲线，曲线本身是没有问题的，问题出在两个物体的时间点位安排上。
而第二个修改后的效果里，两者间的时间错位如下图所示：
红框内为A撞击B瞬间时间点，也是B开始缩放运动的时间点。
对比上一效果的时间位置关系，可以看到第二个的时间位置关系更符合实际情况，因此，其效果才看起来更加合理。
如果将这种撞击动作换一个角度，比如像下两图这样：
图1：
图2：
这两个图与上一个示例类似，A和B的运动曲线不变，差别只在两者的时间差上。
图1的时间错位设置如下：
图2的时间错位设置如下：
图1中，A和B的时间错位设计符合开头示例中的正确设计方式。作为对比，图2中B运动的起始时间点要稍微延后。这时会明显感受到A的力道被削弱。然而事实上A的运动曲线与图1没有任何差别。这说明，物体间互动运动时的时间错位设置，能够显著影响相关运动所要传达的感觉。
至此，我们可以总结出这样的规律：B物体的运动与A物体的运动延迟越大，A所施加的力道就会越弱。当B的起始点刚好位于合适位置时，A的力道传达则是正合适的。
而
整体的效果将开始违反直觉，看起来非常诡异：
总结来看，类似的碰撞动作设计，有一个合理的设计区间。
由A的运动所导致的B被驱动起来的瞬间，即上方例子中A实际接触到B，并将能量传达给B，从而让它开启运动的时间点位，我们暂且将其称为T点，将B运动起始点称为S点。将S点设置在T点之前，均不合理；将S点设置在T点之后的合理区间内，仍然合理，但会影响（
一般是减弱
）A运动所传达的力道。
利用这种规律，我们可根据设计目标对类似的动作进行合理调控，比如像下图这样连续撞击的，就要全部卡准T点，以便传达强烈的撞击感：
但如果想要让力量显得更强，或许就要让撞击没那么“脆”，此时延后S点到T点之后一定区间，是个不错的选择，效果如下图所示：
这些就是关于撞击的一点细节讨论。
这里是COTA五号，分享专业的游戏界面和动效知识，欢迎关注后续文章。
本文完。
欢迎点击下方名片关注本号
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
