Explanation of the Animation Concept

Detailed breakdown of the core components of animation, including change rate, elapsed time, and easing functions.

Explanation of the Animation Concept

From a professional perspective, let's break down the concept of animation into its essential components.

Essence of Animation

Animation is the process of changing a value over time. The core components of this process are:

1. Change Rate (变化率): How fast the value changes over a given period. This can be understood as the "speed" of the animation.
2. Elapsed Time (经过时间): The amount of time that has passed since the start of the animation.
3. Easing Function (缓动函数): A function that defines the rate of change over time. It can be linear (constant speed) or non-linear (e.g., accelerating, decelerating).

The formula for calculating the animated value at a given time is:

value = from + (to - from) \* easing(t)

where ( t ) is the normalized time (elapsed time divided by total duration).

Example in Code

Let's use this understanding to refine our animation function:

function animate({ from, to, duration, callback, easing = (t) => t }) {
  const start = performance.now();
 
  function _run(now) {
    const elapsedTime = now - start; // Time elapsed since the start of the animation
    if (elapsedTime >= duration) {
      callback(to); // Ensure the final value is exactly 'to'
      cancelAnimationFrame(rid);
      return;
    }
 
    const normalizedTime = elapsedTime / duration; // Normalized time (0 to 1)
    const easedTime = easing(normalizedTime); // Apply easing function
    const currentValue = from + (to - from) * easedTime; // Calculate current value
    callback(currentValue); // Update the animation state
    rid = requestAnimationFrame(_run); // Continue the animation loop
  }
  let rid = requestAnimationFrame(_run);
}
 
// Example easing function: easeInOutQuad
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}
 
// Usage example
const box = document.querySelector(".box");
 
animate({
  from: 0,
  to: 300,
  duration: 2000,
  callback: (val) => {
    box.style.left = val + "px";
  },
  easing: easeInOutQuad,
});

Explanation of the Code

• Elapsed Time (经过时间): const elapsedTime = now - start; calculates the time that has passed since the animation started.
• Normalized Time (归一化时间): const normalizedTime = elapsedTime / duration; scales the elapsed time to a range of 0 to 1.
• Eased Time (缓动时间): const easedTime = easing(normalizedTime); applies the easing function to the normalized time.
• Current Value (当前值): const currentValue = from + (to - from) * easedTime; computes the current animated value based on the eased time.
• Callback (回调函数): callback(currentValue); updates the animation state using the callback function.

Summary

By understanding animation as the process of changing data over time, and breaking it down into components like elapsed time, change rate, and easing functions, we can create flexible and reusable animation functions. The provided example demonstrates how these concepts can be applied to achieve smooth and customizable animations.