基于JavaScript计算HTML视频时间段内的动画进度百分比问题

Let's break this down to get you a reliable real-time percentage calculation for your animation sync:

First, let's formalize all the key variables you need (I'll fill in the missing end time variable you referenced):

// Animation timeline boundaries
const animationOneStart = 5.89;
const animationOneEnd = 10.05;
// Calculate total animation duration dynamically (avoids hardcoding errors)
const animationDuration = animationOneEnd - animationOneStart; // This gives 4.16 seconds, as you noted

Next, in your video's timeupdate event handler (where you're getting the current playback time), add this logic to compute the 0-100 percentage:

function updateAnimationProgress(currentVideoTime) {
  let animationProgressPercent;

  // Handle cases where video is before the animation starts or after it finishes
  if (currentVideoTime <= animationOneStart) {
    animationProgressPercent = 0;
  } else if (currentVideoTime >= animationOneEnd) {
    animationProgressPercent = 100;
  } else {
    // Calculate relative progress within the animation window
    const elapsedAnimationTime = currentVideoTime - animationOneStart;
    animationProgressPercent = (elapsedAnimationTime / animationDuration) * 100;
  }

  // Optional: Round to a fixed number of decimals if you don't need ultra-precise values
  // animationProgressPercent = Math.round(animationProgressPercent);
  // OR animationProgressPercent = animationProgressPercent.toFixed(2);

  // Use this percentage to control your animation (e.g., update a CSS transform, progress bar, etc.)
  console.log(`Animation progress: ${animationProgressPercent}%`);
  return animationProgressPercent;
}

How this works: #

• We first check if the video is outside the animation's active window to clamp the percentage to 0 or 100 (prevents weird animation behavior if the user scrubs past the timeline).
• For times within the 5.89s-10.05s window, we calculate how much time has passed since the animation started, divide that by the total animation duration, then multiply by 100 to get the percentage.
• The optional rounding steps are useful if you don't need the super precise decimal values you mentioned (like 0.0416... per 1%)—adjust based on your animation's needs.

Example calculation: #

If the current video time is 7 seconds:

1. Elapsed animation time = 7 - 5.89 = 1.11s
2. Progress = (1.11 / 4.16) * 100 ≈ 26.68%

Just hook this function into your video's time update event, pass in the current playback time, and you'll have a real-time percentage to drive your animation.

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