事情的起因是这样的:
我觉得这个例子特别有趣，所以我就很想试试，这个动画用3D建模软件做的话会比较容易，但我想试试其他方式。正好这段时间在学习p5.js准备毕设，我觉得利用p5.js的3D模块应该不难实现吧。于是查了一下p5.js相关Api文档，仍旧没有收获。 一开始的想法是：利用不同方向的平面进行相应的线条长度变化 ，左边的线段做完运动动画后接着是顶部的线段开始进行动画，但是这个图形有圆角，线条圆角那块有点难度，如果没有圆角，理论上单用css3动画就可以实现。
之前的思路貌似不太可行， 我又换了一种思路，通过做画一个带描边的路径，通过坐标位移来生成厚度，之后通过修剪路径来实现动画效果，想到three.js框架很强大，貌似可以用它来做，但是目前还有其他框架在学，腾不出时间学three . js，决定还是用AE来做，于是打开了AE开始整。
那么厚度怎么做呢？思路是通过线条叠面。首先打开AE的3D视图，在位置处 Alt键 + 左键秒表图标 打开表达式，通过在表达式中写入value+[0,0,index] 大括号保存的是xyz轴的坐标，Index表示当前图层序号，通过ctrl+D不断复制图层就可以将线段叠出厚度。
叠厚度之前，先做好线段着色以及修剪动画。叠出厚度之后，给对应的部分着上白色描边，再通过调整图形位置以及相机角度，整个动画也就完成了。
