检测动画值的变化反应原生 - Javascript

在前端开发中，很常见的一个需求是在动画执行过程中根据动画的值（例如位置、透明度等）来实时地更新某个元素或其他操作。

在 Javascript 中，我们通过 requestAnimationFrame 来执行动画，并且可以通过该方法传递一个回调函数来监听动画执行过程中的变化。在回调函数中，我们可以使用原生的 getComputedStyle 方法获取动画过程中元素的属性值，然后进行相应的操作。

以下是一个例子：

// 当前动画执行的持续时间
let animationStartTime;

// 动画执行的间隔时间
const animationInterval = 1000 / 60;

// 动画执行的总时长
const animationDuration = 2000;

// 缓存需要操作的元素
const targetElement = document.querySelector('#target');

// 动画执行中所需要改变的属性
const fromValue = 100;
const toValue = 200;

// 当前的动画值
let currentValue = fromValue;

function animateTimestamp(currentTime) {
  if (!animationStartTime) {
    animationStartTime = currentTime;
  }

  const elapsed = currentTime - animationStartTime;

  // 动画执行已经结束
  if (elapsed >= animationDuration) {
    targetElement.style.left = `${toValue}px`;
    return;
  }

  // 计算当前动画的值
  currentValue = fromValue + (toValue - fromValue) * (elapsed / animationDuration);

  // 更新操作
  targetElement.style.left = `${currentValue}px`;

  // 循环执行动画
  window.requestAnimationFrame(animateTimestamp);
}

window.requestAnimationFrame(animateTimestamp);

在该例子中，我们使用 window.requestAnimationFrame 方法来循环执行动画。在回调函数中，我们记录了当前动画执行的开始时间，计算了经过了多长时间，根据当前时间与开始时间的差值来计算当前动画值。

然后，我们使用 targetElement.style.left = ${currentValue}px 来更新目标元素的 left 属性。

当动画执行结束时，我们更新目标元素的属性值直接为目标值： targetElement.style.left = ${toValue}px 。

这种方式不仅能够满足动画过程中值变化时的操作需求，还能够使其更加平滑流畅。

需要注意的是，使用 requestAnimationFrame 方法来执行动画的代码应该放置在页面加载完毕后，否则会引起一些问题。我们可以使用 window.onload 或其他方式来实现该需求。