AEJoy —— 表达式之模拟超越与反弹（四）【JS】

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

效果图

超越表达式已应用于关键帧 X 旋转属性

超越表达式被应用到关键帧的位置属性

深入超越（Overshoot）

关键帧超越（Overshoot）

也许一个更常见的超越应用程序是在关键帧动画中添加超越。这实际上是相当简单的，因为表达式语言可以让你访问属性的速度。在本例中，我们将使用 velocityAtTime() 函数来获取最近关键帧的传入速度。这是关键帧的超越表达式:

freq = 3;
decay = 5;

n = 0;
if (numKeys > 0){
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}
if (n > 0){
  t = time - key(n).time;
  amp = velocityAtTime(key(n).time - .001);
  w = freq*Math.PI*2;
  value + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);
}else

和前面一样，前两行定义了控制振荡频率和衰减的变量。接着是一个方便的小例程，用于查找最近的关键帧。表达式的其余部分提取该属性在关键帧的速度，并使用该速度作为超越计算的振幅。请注意，该表达式实际上在关键帧往前 .001 秒获得速度 ，以确保它获得传入(而不是传出)速度。

这个表达式的一个非常好的特性是它是属性不可知的，这意味着它不用知道自己被应用在什么属性之上，都可以按原样工作，即几乎可以使用关键帧的任何属性。请参阅前文的两个动图以获得两个关键帧动画示例，其中表达式提供了超越。第一个演示了流行的 X 旋转超越，其中的关键帧层快速旋转从 100° 到 0°，表达式提供超越动画。第二个演示了应用于关键帧到 Position 属性的超越。