如何用JavaScript/JQuery实现点击图片按指定角度、速度旋转并逐次提速？

Alright, let's knock out these two requirements for you. I'll share both jQuery and vanilla JavaScript solutions—pick whichever fits your project better. The core idea is tracking the current rotation angle and ramping up speed with each click, then animating the rotation smoothly.

jQuery Implementation #

First, here's the jQuery version since you mentioned it. We'll use jQuery's animate method with a custom property to handle the rotation animation, plus variables to track our angle and speed.

HTML #

<!-- Add your image with an ID for easy selection -->
<img 
  id="rotating-img" 
  src="your-image-path.jpg" 
  alt="Click to rotate" 
  style="width: 200px; height: 200px; transform-origin: center; cursor: pointer;"
/>

JavaScript #

$(document).ready(function() {
  // Track current total rotation angle and initial rotation duration (ms)
  let currentAngle = 0;
  let rotationDuration = 1000; // Lower number = faster rotation

  $('#rotating-img').on('click', function() {
    // Increase speed: cut duration by 20% each click (adjust factor as needed)
    rotationDuration *= 0.8;
    // Add your desired rotation angle per click (90 degrees here)
    currentAngle += 90;

    // Animate the rotation using a custom "deg" property
    $(this).animate(
      { deg: currentAngle },
      {
        duration: rotationDuration,
        step: function(now) {
          // Update the transform property on each animation step
          $(this).css({ transform: `rotate(${now}deg)` });
        },
        easing: 'linear' // Keeps rotation smooth and constant speed
      }
    );
  });
});

Key Details #

• transform-origin: center ensures the image rotates around its center (not a corner).
• The rotationDuration variable controls speed: multiplying by 0.8 each click makes the rotation 20% faster every time. Use 0.7 for quicker acceleration, 0.9 for slower.
• We use a custom deg property in animate because jQuery doesn't natively animate transform—the step callback updates the rotation in real-time for smooth motion.

Vanilla JavaScript Implementation #

If you don't want to rely on jQuery, here's a native JS solution using requestAnimationFrame for smooth animation:

HTML (same as above) #

<img 
  id="rotating-img" 
  src="your-image-path.jpg" 
  alt="Click to rotate" 
  style="width: 200px; height: 200px; transform-origin: center; cursor: pointer;"
/>

JavaScript #

document.addEventListener('DOMContentLoaded', function() {
  const img = document.getElementById('rotating-img');
  let currentAngle = 0;
  let rotationDuration = 1000;
  let activeAnimationId; // Track animation to prevent overlaps

  img.addEventListener('click', function() {
    // Speed up rotation
    rotationDuration *= 0.8;
    // Set target angle
    const targetAngle = currentAngle + 90;
    const startAngle = currentAngle;
    const startTime = Date.now();

    // Cancel any ongoing animation to avoid conflicts
    cancelAnimationFrame(activeAnimationId);

    function animateRotation() {
      const elapsedTime = Date.now() - startTime;
      const progress = Math.min(elapsedTime / rotationDuration, 1);
      // Calculate current rotation angle based on progress
      const currentRotation = startAngle + (90 * progress);
      
      img.style.transform = `rotate(${currentRotation}deg)`;

      // Continue animation until progress reaches 100%
      if (progress < 1) {
        activeAnimationId = requestAnimationFrame(animateRotation);
      } else {
        currentAngle = targetAngle; // Update total angle when done
      }
    }

    animateRotation();
  });
});

Key Details #

• requestAnimationFrame ensures the animation runs at the browser's optimal frame rate (smooth, no jank).
• We cancel any active animation before starting a new one to prevent weird overlapping rotations if the user clicks quickly.
• The progress calculation ensures the rotation speeds up consistently with each click.

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