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

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

效果图

超越表达式与随机文本缩放相结合

3D 字符顺序旋转到视野中，并带有超越效果

深入超越（Overshoot）

计算超越（Overshoot）

接下来是一个非常有帮助和通用的表达式。它是上一节的一个有趣变体，你可以在文本层上使用它来让文本字符随机从零放大到 100% ，并带有超越效果。为了让它奏效，你将添加一个缩放动画到你的文本层，设置缩放值为 0 ，添加一个表达式选择器，(然后你可以删除范围（Range）选择器)，最后，替换表达式选择器的数量（Amount）属性的默认表达式为:

freq = 3;
decay = 5;
maxDelay = 1.0;

seedRandom(textIndex,true);
myDelay = random(maxDelay);
t = time - (inPoint + myDelay);
startVal = [100,100];
endVal = [0,0];
dur = 0.1;
if (t < dur){
  linear(t,0,dur,startVal,endVal);
}else{
  amp = (endVal - startVal)/dur;
  w = freq*Math.PI*2;
  endVal + amp*(Math.sin((t-dur)*w)/Math.exp(decay*(t-dur))/w);
}

效果如上方第一幅图所示

您会注意到，这个表达式与之前版本的表达式之间的唯一真正区别是根据字符的 textIndex 值计算随机延迟变量(myDelay)的代码。使用 textIndex 作为随机种子确保每个字符将获得唯一的随机延迟。

这是另一种变体，你可以使用它来让文本层的 3D 字符顺序地切换到视图中。首先，你需要将文本层的锚点移动到文本的顶部。你可以用锚点动画器（Anchor Point Animator）来做这件事。另外，确保你已经启用了每个字符的 3D 选项。为旋转添加一个新的动画器(不要使用你用来调整锚点的那个)。设置 X 旋转的值，使文本旋转出视图(垂直于屏幕)。添加表达式选择器并删除范围（Range）选择器。将表达式选择器的 Amount 属性的默认表达式替换为:

freq = 2;
decay = 5;
delay = .15;
dur = .12;

myDelay = (textIndex-1)*delay;
t = time - (inPoint + myDelay);
startVal = 100;
endVal = 0;

if(t < dur){
  linear(t,0,dur,startVal,endVal);
}else{
  amp = (endVal - startVal)/dur;
  w = freq*Math.PI*2;
  endVal + amp*(Math.sin(t*w)/Math.exp(decay*t)/w);
}

效果如上方第二幅图所示