使用RequestAnimationFrame实现曲线动画遇参数及取消问题求助

Hey there! Let's break down your two issues one by one and fix them up:

Issue 1: NaN for yt and incorrect xt values when using point0x/point0y parameters #

The root problem here is that your t and speed variables aren't declared or initialized inside your function! When you first call parameter_test(0, 700), t is undefined by default. Trying to calculate Math.pow(t, 3) with an undefined value returns NaN, which propagates to yt and messes up xt calculations too.

When you tested with p0.x/p0.y, you probably already had t initialized in the global scope from prior runs, which is why that version worked. To fix this, we need to contain these variables within the function's scope:

Issue 2: "cancelRequestAnimationFrame is not defined" error #

There are two mistakes here:

1. cancelRequestAnimationFrame is a method attached to the browser's window object—you need to reference it as window.cancelRequestAnimationFrame in most environments.
2. You're passing the function parameter_test to the cancel method, but it expects the request ID returned by requestAnimationFrame, not the function itself. Also, your termination logic is off: once t > 1, you should stop requesting new frames instead of trying to cancel an existing one that might not exist yet.

Fixed Full Code #

function parameter_test(point0x, point0y) {
  // Initialize animation control variables inside the function
  let t = 0;
  const speed = 0.01; // Adjust this value to control animation speed
  let animationId; // Store the request ID to cancel later

  const p0 = {x:0, y:700}; 
  const p1 = {x:20, y:100}; 
  const p2 = {x:200, y:100}; 
  const p3 = {x:200, y:0}; 

  // Separate animation frame logic for clarity
  function animate() {
    const cx = 3 * (p1.x - point0x); 
    const bx = 3 * (p2.x - p1.x) - cx; 
    const ax = p3.x - point0x - cx - bx; 
    const cy = 3 * (p1.y - point0y); 
    const by = 3 * (p2.y - p1.y) - cy; 
    const ay = p3.y - point0y - cy - by; 

    const xt = ax * Math.pow(t, 3) + bx * Math.pow(t, 2) + cx * t + point0x; 
    const yt = ay * Math.pow(t, 3) + by * Math.pow(t, 2) + cy * t + point0y; 

    console.log(xt, yt); 

    t += speed; 
    if (t > 1) { 
      t = 1;
      // Stop the animation by not requesting another frame
      return; 
    }
    // Save the request ID in case we need to cancel later
    animationId = requestAnimationFrame(animate); 
  }

  // Start the animation
  animate();

  // Return a function to let external code cancel the animation if needed
  return function cancelAnimation() {
    window.cancelRequestAnimationFrame(animationId);
  };
}

// Example usage:
const cancelCurveAnimation = parameter_test(0, 700);
// Uncomment below to cancel the animation after 5 seconds
// setTimeout(cancelCurveAnimation, 5000);

Key Improvements: #

• t and speed are now initialized inside the function, avoiding global scope pollution and undefined value issues.
• The animation logic is split into a dedicated animate function for better readability.
• We save the requestAnimationFrame ID to properly cancel the animation later via the returned cancelAnimation function.
• Explicitly use window.cancelRequestAnimationFrame to ensure cross-environment compatibility.
• When t > 1, we simply stop requesting new frames instead of trying to cancel an invalid request.

内容的提问来源于stack exchange，提问作者user2892930