使用 vanilla JavaScript 的脉冲效果答案

【问题标题】：Pulse effect using vanilla JavaScript使用 vanilla JavaScript 的脉冲效果
【发布时间】：2016-05-11 07:55:16
【问题描述】：

尝试使用带有普通 javascript 的画布对象创建脉冲效果。每个函数似乎都在正确调用，并且我的所有值都正确记录，但是由于某种原因，当在 ballShrink() 函数中调用 drawBall() 函数时，什么也没有发生。我期待它动画收缩，但事实并非如此。 ballRadius 正在减小，但没有动画发生。我在这里有我的代码和一个 JSFiddle https://jsfiddle.net/96hthyw0/

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
  }

function ballGrow() {
    ballRadius += 1;
    drawBall();
    if (ballRadius === 20)  {
        clearInterval(ballGrowInterval);
        ballShrinkInterval = setInterval(ballShrink, 100);
    } 
}

function ballShrink()   {
    ballRadius -= 1;
    drawBall();
    if (ballRadius === 0)   {
       clearInterval(ballShrinkInterval);
    }
}

function testInterval() {
    ballGrowInterval = setInterval(ballGrow, 100);
}  

testInterval();
draw();

【问题讨论】：

为什么不使用 CSS3 动画？你可以用几行 CSS 来做到这一点
参见例如此页面适用于 CSS 微调器：tobiasahlin.com/spinkit

标签： javascript canvas

【解决方案1】：

问题是您没有清除上一张图纸，而只是在现有图纸上添加新图纸。这是一个更新的小提琴：https://jsfiddle.net/96hthyw0/1/ 但简而言之，我所做的只是将您的 ballShrink 函数更改为：

function ballShrink()   {
  ballRadius -= 1;
  draw(); // clear canvas - note you could add this to ball grow too
  drawBall();
  if (ballRadius === 0) {
    clearInterval(ballShrinkInterval);
  }
}

【讨论】：

太棒了！感谢@winhowes。现在说得通了。