【亿点细节】~001~一个小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之间的关系：后于后者发生，并且幅度较小，持续时间较短。这都是模拟现实中类似响应动作的特征。

整体上的效果如下所示：

从直观的角度上，我们能明显看到打板动作是最先发生的，这个“向上趋势”的动作“拉扯”整体向上运动。此后，等待一点时间，夹子猛然合上，促使整体向下运动。同时，夹子合上时的剧烈角度变化也促使整体发生角度上的扭动响应。另外，外围的星星效果也配合打板工作，设计成了“炸开”的效果。

通过这样的修改，改善了我在观察原版设计时感受到的“粘滞”，整体上更加灵动合理，顺便也让它耐看了一丢丢。不过我不是剪映的设计师，并没有通览整个应用的情况，这一点小修改也只针对这一局部感受出发，欢迎在留言区提出你的看法和意见。

以上。

 欢迎点击下方名片关注本号 

---

推荐阅读