AEJoy —— 表达式之速度和频率控制（五）【JS】

效果图

这是由 Math.sin() 生成的平滑的、周期性的正弦波形

利用线性关键帧积分器，实现了平滑的频率斜坡

控制频率

在表达式的世界中，通过使用内置的 JavaScript 三角函数 Math.sin( 和 Math.cos() 来创建循环或振荡运动并不罕见。它们能很好地产生平滑的、周期性的正弦波。如果你还记得 JavaScript 三角函数要求的是弧度而不是度，那么设置波的频率就很容易了，因为一个完整的振荡(360度)用 2*pi 弧度表示。这些三角函数产生振幅在 -1 和 +1 之间变化的波形。例如，上面效果图中的第一幅，这个表达式在 +100 和 -100 之间振荡，周期时间为 1 秒(或者，换句话说，频率为1.0):

freq = 1;
amp = 100;
value + amp*Math.sin(freq*time*Math.PI*2)

请注意，通过将频率乘以 JavaScript 的内置常数 π （Math.PI）乘以 2 ，就可以轻松地处理到弧度的转换。还要注意，该表达式将计算结果与表达式前值进行相加，它将围绕关键帧或属性的静态值进行振荡。

现在是时候让我们尝试通过将频率变量 freq 直接绑定到 Slider Control 来控制频率了。这是代码:

freq = effect("Slider Control")("Slider");
amp = 100;
value + amp*Math.sin(freq*time*Math.PI*2)

下图显示了 Slider Control 的关键帧值:频率从 0 到 1 ，接着保持在 1 ，然后从 1 到 2，又保持在 2 ，然后恢复到 0 。

这显示了用于控制频率的 Slider Control 的关键帧值。

下一个图显示了可怕的结果，这甚至不是我们想要的。

上图这是尝试用 Slider control 直接控制 Math.sin() 频率的混乱结果。

线性关键帧积分器再一次发挥了作用。这是代码:

freq = effect("Slider Control")("Slider");
amp = 100;
n = freq.numKeys;
if (n > 0 && freq.key(1).time < time){
  accum = freq.key(1).value*(freq.key(1).time - inPoint);
  for (i = 2; i <= n; i++){
    if (freq.key(i).time > time) break;
    k1 = freq.key(i-1);
    k2 = freq.key(i);
    accum += (k1.value + k2.value)*(k2.time - k1.time)/2;
  }
  accum += (freq.value + freq.key(i-1).value)*(time - freq.key(i-1).time)/2;
}else{
  accum = freq.value*(time - inPoint);
}
value + amp*Math.sin(accum*Math.PI*2)

下图显示了改进后的结果，非常准确。在上方效果图中的第二幅中观看它的效果。

线性关键帧积分器的使用大大改善了计算结果。