[AE 表达式]路径跟随动画

声明：我写的【AE 表达式】文章都是原创，包括文字和图片请不要以任何形式进行转载。

这个技巧可以让你精确控制物体沿路径运动，同时生成路径轨迹，就像上面的动画一样，箭头在运动的同时拖出一条轨迹，而且箭头方向保持前进的方向。

我能从网上找到的沿路径运动的方法是先画一条路径，然后复制路径，在物体位置属性上粘贴生成关键帧，这个方法有两个缺陷：

如果路径改变了，就需要重新复制一遍；像上面这样的箭头，没法一直指向前方，如果需要指向，就需要手动 key 帧，这样不仅繁琐，而且非常不精准。

利用表达式可以完美解决这两个问题，下面跟着我操作就行了：

先画好一条路径；

在路径图层增加一个【描边】效果，并且为【结束】属性添加关键帧，这个关键帧既控制路径描边动画，也控制箭头运动：画一个箭头，或者直接使用现成的图案，或者用空对象都可以：然后为箭头【位置】和【旋转】属性添加表达式：【位置】属性引用路径，然后使用 pointOnPath() 方法跟随路径中每个点的位置：/cn/after-effects/using/expression-language-reference.html#%E8%AE%BF%E9%97%AE%E6%9C%89%E5%85%B3%E5%BD%A2%E7%8A%B6%E8%92%99%E7%89%88%E5%92%8C%E7%94%BB%E7%AC%94%E6%8F%8F%E8%BE%B9%E7%9A%84%E8%B7%AF%E5%BE%84%E7%82%B9%E7%9A%84%E8%A1%A8%E8%BE%BE%E5%BC%8F%E8%A1%A8%E8%BE%BE%E5%BC%8F%E5%BC%95%E7%94%A8

Path pointOnPath() 方法{pathProperty}.pointOnPath(percentage = 0.5, t = time)获取路径上任意点的 x、y 坐标。该点表示为路径弧长的百分比。第一个点为 0%，最后一个点为 100%。如果路径是闭合的，那么 0% 和 100% 将返回相同的坐标。弧长的百分比用于确保沿路径的速度一致。除了 0% 和 100% 之外，百分比并非必须与路径上的贝塞尔曲线点对应 - 对于三个点的路径，第二点并非必须在 50%。这也意味着对于具有相同点的开放路径和闭合路径，由于闭合路径含有附加长度，因此沿开放路径的百分比将不会返回与闭合路径相同的坐标。(可选) 指定采样到路径的时间。

参数：

百分比（可选）0 到 1 之间的数字。采样沿路径的弧长的百分比。值小于 0 和大于 1 的部分会被剪掉。默认值为 0.5。t（可选）数字。采样路径的合成时间（以秒为单位）。默认值为时间（当前时间）。

返回：

数偶数组。

// 引用路径var _path = thisComp.layer("深灰色 纯色 1").mask("蒙版 1").maskPath// {pathProperty}.pointOnPath(percentage = 0.5, t = time)// pointOnPath() 方法有两个参数，percentage 表示路径长度的百分比，这里我们使用【描边】动画里的【结束】属性// 因为 percentage 作为百分比范围是用 0~1 之间的小数表示，而结束属性是用百分数表示，所以需要将这个数值除以 100var _percentage = thisComp.layer("深灰色 纯色 1").effect("描边")("结束") / 100// 使用 pointOnPath() 方法生成路径动画, t 表示时间线上的时间，直接引用全局变量 time 就可以了_path.pointOnPath(_percentage, time)// 原有的属性先不动它，避免报错// transform.position

控制【旋转】属性，让箭头一直朝着前方，这时我们需要用到 tangentOnPath() 方法，这个方法可以获取路径上每个点手柄出点的相对位置，因为手柄总是在弧线的切线上的，所以我们实际上就是为了让箭头的前方一直指向手柄的出点（不明白请自行补足平面几何知识）：

Path tangentOnPath() 方法{pathProperty}.tangentOnPath(percentage = 0.5, t = time)获取路径上经过计算的任意点的出点手柄的 x、y 坐标。切点坐标值是相对于父点的坐标的位移 - 值 [0,0] 在出点处不产生弯度。入点手柄是此值的负值（将 x、y 坐标乘以 -1）。切线的父点表示为路径的弧长的百分比。如果用户定义的点也在该弧长百分比的范围内，那么tangentOnPath()返回的坐标从其父点开始计算，并且将与outTangents()返回的那些坐标有所不同。父点的坐标与tangentOnPath()坐标之间的直线距离将始终为 1。您可以将返回的坐标相乘以产生更长的切线，例如，(myPath.tangentOnPath()*100)。(可选) 指定采样到路径的时间。

参数：

百分比（可选）0 到 1 之间的数字。采样沿路径的弧长的百分比。值小于 0 和大于 1 的部分会被剪掉。默认值为 0.5。t（可选）数字。采样路径的合成时间（以秒为单位）。默认值为时间（当前时间）。

返回：

数偶数组。

Math.atan2()

Math.atan2(x, y) 方法是非常方便的 JavaScript 数学方法，直接输入坐标就可以计算出从原点(0,0)到(x,y)点的线段与x轴正方向之间的平面角度(弧度值)，因此也省去了大量复杂语句。

三角函数的部分点下面的链接再熟悉一下：

/algebra/trig-inverse-sin-cos-tan.html

因为旋转属性是角度值，而反正切 atan2() 方法得到的是弧度值，若要转换，弧度除以 (π / 180) 即可转换为角度，JavaScript 中 π 为静态属性，用 Math.PI 引用。

不过，在 AE 表达式中，因为弧度角度经常需要互相转换，所以内置了转换方法：

其他数学方法（表达式引用）

degreesToRadians(degrees)

返回类型：数值。

参数类型：degrees是数值。

将度转换为弧度。

radiansToDegrees(radians)

返回类型：数值。

参数类型：radians是数值。

将弧度转换为度。

// 引用路径var _path = thisComp.layer("深灰色 纯色 1").mask("蒙版 1").maskPath// {pathProperty}.tangentOnPath(percentage = 0.5, t = time)// tangentOnPath() 方法有两个参数，percentage 表示路径长度的百分比，这里我们使用【描边】动画里的【结束】属性// 因为 percentage 作为百分比范围是用 0~1 之间的小数表示，而结束属性是用百分数表示，所以需要将这个数值除以 100var _percentage = thisComp.layer("深灰色 纯色 1").effect("描边")("结束") / 100// 使用 tangentOnPath() 计算出点手柄的相对位置var _tangent = _path.tangentOnPath(_percentage, time)// 使用 JavaScript 反正切公式计算当前点到手柄出点所处边相对于 x 坐标的平面角度(弧度值)var _radians = Math.atan2(_tangent[0],_tangent[1]);// 使用 radiansToDegrees() 方法将弧度值转换为角度值// 因为正反切计算是逆时针的，但是旋转属性是顺时针计算的，所以应该使用负数，直接在前面加上减号var _degrees = -radiansToDegrees(_radians)// 还需要手动控制图形的方向，我们在 _degrees 的技术上加上【旋转】属性原有的值，可引用 transform.rotation// 这样写 _degrees + transform.rotation// 当然更简便的是直接使用 value 关键字，这样这一段表达式复制到任何地方都是有效的// 因为使用 transform.rotation 在【效果】的属性或者形状图层的形状中是错误的，但是 value 关键字永远没错value + _degrees// 原有的属性先不动它，避免报错// transform.rotation

工程文件里面还有两个演示合成，分别展示了如何使用蒙版路径和形状图层路径的方法，可以作为参照，不过里面的表达式都是简写的，只要这篇文章看懂了，也能看懂：

点下面的分享链接，下载工程自己玩儿吧！

文件分享