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

2023-09-03 00:41:22

超越与反弹，这是AEJoy动画效果中不可或缺的元素。通过模拟超越与反弹效果，动画师可以轻松地为动画对象添加律动感和灵活性。在JS中，同样可以通过代码实现这种超越与反弹效果。

超越（Overshoot）

超越效果是指动画对象在到达最终位置之前，先略微超过目标位置，然后再回弹到最终位置。这种效果可以为动画添加动感和趣味性，让动画看起来更加生动逼真。

function overshoot(target, current, velocity) {
  const tension = 1.7;
  const friction = 2.5;
  const difference = target - current;
  const acceleration = -tension * difference - friction * velocity;
  return current + acceleration;
}

反弹（Bounce）

反弹效果是指动画对象在到达最终位置之前，先减速，然后反向运动，直到到达最终位置。这种效果可以为动画添加趣味性和弹性，让动画看起来更加富有活力。

function bounce(target, current, velocity) {
  const tension = 1.7;
  const friction = 2.5;
  const difference = target - current;
  const acceleration = -tension * difference - friction * velocity;
  const newVelocity = velocity + acceleration;
  return current + newVelocity;
}

案例：模拟超越与反弹

const target = 100;
let current = 0;
let velocity = 0;

function update() {
  // 计算超越
  const acceleration = overshoot(target, current, velocity);
  // 更新速度和位置
  velocity += acceleration;
  current += velocity;
  // 如果速度为0，则动画结束
  if (Math.abs(velocity) < 0.01) {
    velocity = 0;
    current = target;
  }
  // 绘制动画
  draw(current);
  // 继续动画
  requestAnimationFrame(update);
}

update();