关于「传送带」动画的补充研究

大家好啊，我是死磕自己的陈老师。

昨天发的前天写的发了又删掉的推文，大家都看了么？还没看？淘气！给你个链接，快看：4款插件齐上阵，我做出了这个让网黄阿文表白的动画

这篇文章发布之后呢，在留言区和后台都收到了一些热心朋友们的回应，好几个朋友都提出了自己的想法和做法。这很棒，说明我的公众号订阅者里面还是卧虎藏龙滴，大家都赶紧来给我投稿啊 ，我这真的快忙不过来了……

今天利用一上午的时间，验证了一下几种不同的做法，赶紧跑来给大家把结论说一下：

第一种做法来自于@Karlie Zhang同学：

首先是结论：不可行。为什么呢？

如果只需要出现、消失一次，的确是可以实现的——只需要让传送带B在0.5秒时再出现（这样动画开始的时候就只有A），同时再让传送带A消失，就可以完成「A-B」的切换：

但如果想要重复这个循环，问题就出来了。首先，「出现」和「消失」是瞬时动画，无法设置重复次数：

即便是改用时间很短的「淡入淡出」动画，可以设置重复次数了，但此时的「淡入」和「淡出」也是两个独立的动画，没办法作为一个整体来重复。如果非要设置重复次数，动画窗格就会变成这样：

一个不停地淡入，一个不停地淡出……这和我们期望的「你来我往」的效果明显是不同的。

除非怎么样呢？你把所有动画都设置为「上一项之后开始」，然后挨个去手动调整动画的延迟：

可是这样做，你不得累死？

万一演讲人在这里要讲个三分钟，你每0.5秒要做两个动画，那就需要做360个动画，每个还得设置「与上一动画同时」、调整动画时长 ……

所以，这个方法是行不通的。

能提出这个方案，说明已经是对PPT动画有所研究了。在留言区，@芃苇° 率先提到了这个方法：

所谓文本框动画，就是在文本框中输入一系列的点，先通过将行距设置为0，然后挤压文本框的宽度，使所有的点重叠汇集到一起：

最后为文本框设置路径动画，并调整动画效果为「按字母顺序」延迟合适的百分比，实现让这些「点」（其实是一个个的字母）一个个的顺次进行路径动画，而不是文本框进行运动。由此就实现了流动起来的动画效果：

可是问题又来了——很明显在这个方案中，圆点会有一个由汇聚到分散，再由分散到汇聚的过程。可在「传送带」效果中，圆点需要始终是分散可见的。

另外一位朋友@老吴 提出了一个解决方案：

什么意思呢？就是让「出现」动画排在文本框动画之前，但又延迟一定时间（等到圆点都散开了）再发生，这样就可以隐去由汇聚到分散的过程。按照这个思路，还可以在圆点开始汇聚之插入「消失」动画，隐去汇聚的过程。

我们来看看效果如何：

看起来好像可行。但你再想想就能发现问题：

首先，传送带在开始转动之前，需要是可见的，哪有突然凭空冒出来一个传送带的道理？这不符合逻辑。

即便是你说可以先放一个静态版的传送带在那里，等到动态版的传送带分散开之后使其消失，进行「偷梁换柱」，这也存在两个问题：

①如何保证绘制的静态传送带圆点大小、分布间距与动态版的一致？（对动态截图然后一比一临摹？这太麻烦）

②PPT是要配合演讲的，控制幻灯片的人应该何时点击鼠标，才能保证延迟数秒后开始的动画，刚刚好是需要传送带转动起来的那一刻？（例如演讲人讲到「只有这样，我们的信用飞轮才能转动起来」这个「来」字时）

除此以外，留言区的@邓亮 同学还提到「文本框动画」的另一个问题：

什么意思呢？就是说文本框中的这些点在运动时，并不是绝对等距的。我测试后发现的确如此——圆点会在直线部分分散得教开，而在曲线弯道处汇聚得较拢。

将运动轨迹设置为传送带的形式后，应该是很明显了：

如果觉得还不够明显，看这个截图：

至此，可以宣告使用「文本框动画」的方案也是行不通的。

最后来看一个可行的方案：使用「闪烁」动画。

这个方案是由@prussiaN Blue 在后台留言提到的：

「闪烁」动画的效果，是让对象消失一下，然后重新出现：

我们只需要把传送带A和传送带B都设置为「闪烁」动画，然后设置重复，最后错开半个单位时间，就可以得到与插件制作出来的错位闪烁一致的效果：

同样，为了让动画开始之前，页面上只有一组传送带，我们可以为其中一组传送带设置一个出现动画，这样效果就很完美了：

给@prussiaN Blue 同学鼓掌！你的做法是最简单易行的！

从这次的复盘中，我希望大家能学到两点：

1、技术性的问题，一定不能想当然，得老老实实去做试验。很多问题想起来是一回事儿，做起来又是另一回事儿。

就像有的朋友平时觉得做个PPT多简单啊，或者是看完一篇教程——嗯，我懂了！然后就没有然后了，到了真正需要做出来的时候才发现这里也不对，哪里也不对，到处是意料之外的问题。

看懂不算懂，能自己做出来才算真懂。

2、虽然现在有很多很方便的插件，但我们也要对软件的各个功能尽可能的熟悉。否则就容易像陈老师一样，把简单的事情搞复杂。

因为「闪烁」动画藏在「更多强调动画」中，平时很少使用，所以我就完全忘记了有这么一个现成可用的效果，跑去用插件来调整对象的可见性，走了不少弯路。

昨天下午在家做了一个钢琴方面的教程发抖音，其中有一页动画效果我想展现一个人绞尽脑汁然后终于想出解决方案：

问@ACE 这种左右小范围振动的函数动画公式怎么写，结果他轻描淡写的来了一句：

你们看，我又差点儿掉坑里……

用好技巧，但不要迷恋技巧。踏踏实实把基础打牢，任何学科都应该如此吧！

——
公众号：Jesse1981
原文链接：关于「传送带」动画的补充研究