如何为HTML Canvas中lineTo绘制的线条添加anime.js动画？

Absolutely! You can add smooth, polished animations to your Canvas line using anime.js. Below are two practical approaches to achieve different animation effects, tailored to your existing code:

Approach 1: Animate the line's endpoint (grow the line from start to finish) #

This method animates the line's end coordinates, making it "grow" from the starting point (0,0) to your target (300,150) over time. Here's how to implement it:

<canvas id="myCanvas" width="300" height="150"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Initialize animation state: start with the line's end at the start point
const lineState = {
  x: 0,
  y: 0
};

// Function to redraw the line based on current state
function drawLine() {
  // Clear the canvas before each redraw to avoid trail artifacts
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(lineState.x, lineState.y);
  ctx.stroke();
}

// Use anime.js to animate the endpoint coordinates
anime({
  targets: lineState,
  x: 300,
  y: 150,
  duration: 1500, // Animation lasts 1.5 seconds
  easing: 'easeInOutQuad', // Smooth easing function
  update: drawLine // Call drawLine on every frame update
});
</script>

How this works: #

• We create a lineState object to track the current endpoint coordinates, starting at (0,0)
• The drawLine function clears the canvas and redraws the line using the current state values
• anime.js animates the x and y properties of lineState, triggering the update callback on every frame to refresh the line

Approach 2: Animate the line's "drawing" effect (reveal the line gradually) #

If you want the illusion of the line being drawn onto the canvas (like a pen sketching it out), you can use Canvas' stroke dash properties combined with anime.js:

<canvas id="myCanvas" width="300" height="150"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
<script>
const c = document.getElementById("myCanvas");
const ctx = c.getContext("2d");

// Draw the full line first (it won't be visible initially)
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);

// Calculate the total length of the line using the Pythagorean theorem
const lineLength = Math.sqrt(Math.pow(300 - 0, 2) + Math.pow(150 - 0, 2));

// Set dash properties: make the dash equal to the line length, offset by the same length
ctx.setLineDash([lineLength]);
ctx.lineDashOffset = lineLength;
ctx.stroke();

// Animate the dash offset to reveal the line
anime({
  targets: ctx,
  lineDashOffset: [lineLength, 0],
  duration: 1500,
  easing: 'easeInOutQuad'
});
</script>

How this works: #

• We draw the full line but hide it by setting lineDashOffset to match the line's total length
• anime.js animates the lineDashOffset from the full length down to 0, gradually revealing the line as the dash moves into view

Both approaches work seamlessly with your existing Canvas setup—pick the one that fits your desired visual effect!

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