在《【AE表达式】更好的动画时间控制》这篇文章中说过我比较不是很喜欢用关键帧来控制动画，这是有一定条件的。使用表达式控制动画更多的是强调复用性，比如你拿到我的工程文件，不管是显示的内容、尺寸、颜色或者动画持续的时间都可以轻松的修改，而不需要再去找哪个关键帧对应着哪一段动作，它更多的工作都是由预定的程序去处理的，你只需要告诉它你要什么就够了。

在开始之前，你有必要再熟悉一下插值方法的章节：

https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/expression-language-reference.ug.html#interpolation_methods_expression_reference

今天演示的这段文本动画非常的简单，你仔细看一下，让整个动画显得生动活泼的有两点：第一是缓出（easeOut）关键帧，它让图形的运动不像线性插值（linear）那么生硬；第二是摆动赋予了物体灵魂，让它感觉比较活泼，而不是死死的僵在那里。

上面的右箭头关键帧就是 easeOut 插值关键帧了，下面是我们比较常用的线性关键帧，只需要选中关键帧，然后 shift+F9 就可以转换成 easeOut，你可以在图表编辑器中查看它们的差别（注意：图表编辑器显示和设置的是值与时间的关系而非空间关系）：

先看工程，为了便于管理和演示，所有内容都放在了一个合成中，如果大量复用，可以考虑使用预合成减少设置，这样更不容易出错。

控件形状动画

控件形状指的就是上面圈出来的这个部分，由一个形状图层来生成，这个部分也是整个设计的核心部分，所有的运动和定位都以它为参照。为了方便，我把所有的表达式控制设置也放在了这个图层上面。

这个控件中有三个圆点和一个路径线条，路径线条是根据三个圆点的位置通过 createPath() 方法 生成的，所以你根本不需要管它。

圆点的尺寸利用表达式做了 IN 和 OUT 动画，在前一篇文章中也讲过，但是这一次我们要让进入和退出在同一个属性中利用表达式来完成，就需要调整一下写法：

// 进入，从图层入点到入点后 0.4秒，从 0 过渡至设定值
value = easeOut(time, inPoint, inPoint + .4, 0, value)
// 退出，从图层出点前 0.4秒到出点，0从设定值过渡至 0
value = easeOut(time, outPoint - .4, outPoint - .05, value, 0)

value 是 AE 表达式中的预定义变量关键字，因此必须要再使用 var 或者 let 声明，可以直接调用，进入的时候在图层入点值为 0，0.4秒以后等于设置的值，这样的写法主要是让你可以保持使用参数设置的方法，它可以是一个恒定的值，然后动画的值以此为基础进行计算。

这里需要特别注意的是，如果不在每一句前面加上 "value = " 那么结果只能等于最后一句。按照以上的方法相当于你设置了四个关键帧，但是这个表达式中关键帧在时间线上的位置是相对与图层入点和出点的，如果你需要调整整个动画的进入和退出时间，就只需要调整入点和出点，别的什么都不需要动了，在这一点上，复用修改的效率要比手动key帧高多了。

椭圆路径 1 就是大的圆点，它的动作又是控件形状动画的核心。

let _start = [effect("控件宽度")("滑块") * .5, 0] // 开始位置
let _end    = [effect("控件宽度")("滑块") * -.5, 0] // 结束位置
// 开始的时候使用了 wiggle() 方法让圆点摆动，在入点后 1.5秒时必须回归初始的位置
// 这样才能保证下一个动作横向移动的时候是一条直线
value = easeOut(time, inPoint + 1.25, inPoint + 1.5, add(_start, wiggle(1, 30, 1, .5, time)), _start)
// 无摆动移动到结束位置
value = ease(time, inPoint + 1.5, inPoint + 3.5, value, _end)
// 到达结束位置以后继续较大幅度的摆动
value = easeOut(time, inPoint + 3.5, outPoint, value, add(value, wiggle(1, 100, 1, .5, time)))

wiggle(freq, amp, octaves=1, amp_mult=.5, t=time) 方法不能算一个赋值方法，当你使用它的时候需要 value + wiggle，当然在 value 为数组的情况下使用 AE 表达式中特有的矢量加法计算 add( ) 会方便很多，这就跟音频电路里面交流耦合意思差不多，value 相当于 DC 直流偏移，而 wiggle 是交流波形信号（好像扯远了，如果要聊音频电路可以移步我的另外一个专栏），总之就是你直接把 wiggle( ) 方法写在外面，就会整个时间线上都在发生摆动，第二个动作就没有办法保持直线运动了。

let _start = [effect("控件宽度")("滑块") * .45 , effect("控件高度")("滑块") * -.35]
let _end    = [effect("控件宽度")("滑块") * -.45, effect("控件高度")("滑块") * -.35]
let _origin = content("圆点").content("椭圆路径 1").position // 大圆点位置
// 从大圆点中长出来
value = easeOut(time, inPoint + .5, inPoint + .85, _origin, add(_start, wiggle(1, 20, 1, .5, time)))
// 跟随大圆点平移，它的平移是摆动的
value = ease(time, inPoint + 1.75, inPoint + 3.55, value, add(_end, wiggle(1, 20, 1, .5, time)))
// 回到大圆点中
value = easeOut(time, outPoint - .75, outPoint - .5, value, _origin)

注意：

控件高度乘以 0.35 和 0.65 是为了不居中对称，要调整偏移需要注意这两个数字相加要等与 1（负号是控制方向的）。

从大圆点中长出来或者回去的关键帧上面不能产生摆动，否则会错位。

生成线条路径就比较简单了，注意多个点的不闭合路径，最后一个参数应该为 false 。

createPath([content("圆点").content("椭圆路径 2").position, content("圆点").content("椭圆路径 1").position, content("圆点").content("椭圆路径 3").position
], [], [], false)

文本遮罩

文本遮罩也是通过控件生成的，这个直接看一下就明白了：

let _points = thisComp.layer("控件形状动画").content("线条").content("路径 1").path.points(time)
_points.push([thisComp.width * .5, thisComp.layer("控件形状动画").content("圆点").content("椭圆路径 3").position[1]],[thisComp.width * .5, thisComp.layer("控件形状动画").content("圆点").content("椭圆路径 2").position[1]]
)
createPath(_points)

因为这个合成中图层很少，文本只设定了两个图层，，如果图层比较多就需要考虑尽可能少用这样的方法，因为比较容易失误，当然你也可以使用表达式引用初始图层的路径：

thisComp.layer("文本 Mask").content("路径 1").path

但是要想完全不在复杂的实际项目制作过程中出错，需要绑定的内容就太多了，使用预合成把所有需要使用这个遮罩的内容放在一起是最好的办法。

文本定位

文本位置设置主要看个人的习惯，选择你觉得最好用的方法就可以了，但是要注意，因为小圆点使用了 wiggle( ) 方法，所以文本上下应该留有余地，不然就可能被偶然的削掉一条。

最后老规矩，源文件放上：

AE-文本动画控件-2021-05-19.aep

喜欢我的内容的同学如有疑问欢迎评论留言，被选中的问题将会单独奉上教程文章一篇！