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

2024-02-07 17:07:07

超越动画（Overshoot Animation）在动画设计中十分常见，它能够为动画效果增添活力与灵动性。本文将带您探索AEJoy——模拟超越与反弹的奇妙世界，帮助您更深入地理解超越动画的原理和应用。

深入超越（Overshoot）

超越动画的关键在于“超越”（Overshoot），即动画元素在运动过程中超出目标位置，然后反弹回目标位置。这种效果可以通过指数衰减正弦波的基本表达式来实现：

function overshoot(t, b, c, d, s) {
  if (s == undefined) {
    s = 1.70158;
  }
  return c * (Math.pow(2, -10 * t / d) * Math.sin((t * d - s) * (2 * Math.PI) / d)) + b;
}

t：当前时间
b：起始值
c：变化量
d：持续时间
s：弹簧张力，值越大弹性越大

模拟反弹

在动画设计中，反弹效果与超越动画同样重要。模拟反弹的关键在于调整弹簧张力（s）的值。当s的值较大时，弹簧张力较强，反弹效果也更明显。

示例代码

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var ball = {
  x: 100,
  y: 100,
  radius: 10,
  color: 'red'
};

var vy = 0;
var gravity = 0.1;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  vy += gravity;
  ball.y += vy;

  // 检测反弹
  if (ball.y + ball.radius > canvas.height) {
    vy = -vy * 0.9;
    ball.y = canvas.height - ball.radius;
  }

  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI);
  ctx.fillStyle = ball.color;
  ctx.fill();

  requestAnimationFrame(draw);
}

draw();