动效的细节可以影响整体效果，不信你看。
咱以前写过几篇关于动效制作的细节，可以点这里回顾一下。
这些内容概括起来就是如何通过注意一些细节上的设计，让参与动效的各个部件的运动方式更为合理。从而让动效看起来更可信，在此基础上可以进一步设计出更加生动、活泼和具备舒适节奏感的界面动画。
这种对于细节的调整，不仅需要非常熟练的掌握运动规律，还需要合理的拆分参与动效的部件，根据它们的“角色”，为它们在恰当的时间点分配合理的动作。“角色”之间更需要有符合常理的互动。
这种动效原理当然不止适用于游戏界面动效中，还适用于应用类的动效里，可以说尤其适用于应用类的动效。相比于游戏界面环境，它们的存在环境往往更“干净”或者“简洁”。动效的作用更加“突兀”，用户拥有更多的精力去观察到动效的细节。
这不，最近使用“剪映”比较频繁。当加载一堆的素材视频时，该应用会进入到一个加载界面，素材越多加载得越久，让我注意到一个小loading动画做得不错，但是总感觉它的动作比较“粘滞”：
这是一个根据电影场记牌（
上半部分的夹子叫打板
）为原型设计的小图标。作为一个视频剪辑应用，利用这种元素做加载图标是情理之中的。
原版图标的运动方式可以划分成两部分：场记牌整体的上下动作和打板动作。我初步观察后认为，动效中的“粘滞”感缘于两个动作的同时发生，即两个动作没有太考虑先后响应关系，没做出时间错层的设计。
当然，也许原版的设计师考虑到更多的情况才设计成现在的样子，下文内容仅是我根据看到的部分进行拆解分析和进一步的“优化”。
通过复刻和逐帧模拟，我大概还原了一下原版图标和它的动画：
上两图中的下图所示即为大概还原的原版图标动画的主体运动：红色层是整体的上下动作；粉红色层是打板动作。
这两层的关键帧布局基本上印证了我的猜想，两组动作并没有做错层处理，从而使得总体效果“粘滞”。
这里要稍微说明一下所谓“粘滞”的含义。这是我经常拿来形容“张力被抵消”效果的形容词。我们在设计一个物件的动作时，会通过预备动作，或者长时间的蓄力动作为它的主体动作增加张力。就像射箭之前的拉弓动作一样。但是如果此时别的动作与这个动作同时发生，如果不仔细规划设计，就会有概率使其他动作抵消掉这种预备动作所产生的张力，最后整体产生的效果就是“粘滞”。
这里一定需要错层设计吗？不一定，但是我所考虑的情境下，就是必须的。
所有的物品运动都需要一个能量源。也就是产生运动的能量策源。发生在一个或者一组物品上的运动都将围绕这一能量源，否则运动将极不合理。能量源当然可以不止一处，但对单个运动来说一般只有一个。
对这个场记板的运动来说，它的能量源在我看来就是打板动作。这个能量的终极来源是我们虚构的看不见的人，并不出现在画面内。这个物品在这个情景下一定是人驱动的，所以人不出现并不会影响整个运动的合理性。
如果以打板为能量源，打板动作应该是所有运动的最初始运动：
上图是我修改后的动作中，打板动作和整体动作的关键帧关系，它们之间做了微弱的时间错层设计。
将打板动作的值曲线展示出来就如下图所示，总共分为3个区间，代表三个不同的动作：
区间1，是夹子张开的动作，这里的曲线被调整为“快入慢出”的一个变种版本，而且持续时间较长，会体现出一种更灵活展开但有蓄力过程的一个动作；
区间2，是停顿过程，这要配合整体动作去看，稍后解析；
区间3，是“慢入慢出”曲线，这个曲线可以让夹子迅速合上，以便使区间1所蓄张力得到有力释放。
整体动作的值曲线分两个部分，一个是Y轴的上下运动，如下所示：
它也分成三个区间：
区间1，一个变种的“慢入慢出”动作，入动作稍微延长一点，以便有响应夹子动作的观感。这个区间的起始点是和夹子一样的，因此可以在曲线设计上做出一点迟缓来达成时间错层的作用；
区间2，回落动作，一个变种的“缓入缓出”动作，更接近“快入慢出”动作，模拟重力效果；
区间3，回落后抖动的动作，这个比较常见，就不再详细说明。
另一个是整体上因为夹子的运动而产生的角度变化响应动作，它的值曲线如下所示：
它可以划分成4个区间：
区间1，因为夹子的运动而迟滞2帧的旋转，是个“慢如快出”的曲线，如果你注意到的话，这种表示响应其他动作的动作一般都会用到这种曲线；
区间2，停滞，等待其他动作完成，稍后综合分析；
区间3，夹子迅速合上后的响应动作，这个动作在整个过程中都很快，所以也用的“快入慢出”曲线；
区间4，一个来回的抖动。这里如果加上过多的抖动会显得动作过于杂乱，所以设计成只有一个来回。
最后我们把这几个曲线合起来，看下整体动作是按照什么思路制作的：
该图中，青色线是打板旋转值，绿色是整体位移值，紫色（经过了处理）是整体旋转值曲线。
可以看到打板动作区间1和整体位移区间1同时发生，但打板区间1首先在图中“1”点处关键帧结束。这意味着夹子完成了张开动作，但整体位移还没有结束。
一直到打板区间3的夹子合上，另外两个值才发生响应动作。即图中“3”点处以及红框内发生的值变化。
但它们的响应发生在打板区间3结束点的图中“2”点关键帧处之前，即“3”点处，这是因为打板区间3的动作是一个“慢入慢出”动作，主体动作的（视觉观感）完成时间要早于区间结束点。
另外可见紫色值曲线，即整体的旋转响应动作曲线，在图中黄框内（即整体旋转值曲线区间1，即上文第三个值曲线的区间1）与打板区间1之间的关系：后于后者发生，并且幅度较小，持续时间较短。这都是模拟现实中类似响应动作的特征。
整体上的效果如下所示：
从直观的角度上，我们能明显看到打板动作是最先发生的，这个“向上趋势”的动作“拉扯”整体向上运动。此后，等待一点时间，夹子猛然合上，促使整体向下运动。同时，夹子合上时的剧烈角度变化也促使整体发生角度上的扭动响应。另外，外围的星星效果也配合打板工作，设计成了“炸开”的效果。
通过这样的修改，改善了我在观察原版设计时感受到的“粘滞”，整体上更加灵动合理，顺便也让它耐看了一丢丢。不过我不是剪映的设计师，并没有通览整个应用的情况，这一点小修改也只针对这一局部感受出发，欢迎在留言区提出你的看法和意见。
以上。
欢迎点击下方名片关注本号
推荐阅读
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
