html5 - 像脉搏或心跳一样制作 2 个圆圈的动画

Question

我正在尝试为两个圆圈设置动画，就像跳动的脉搏或心跳一样。我的想法是画一个小圆圈，然后在上面画一个更大的圆圈来模拟心跳，然后清除它并重复这个过程。

最好的方法是什么？我真的需要 3 个 setIntervals 吗？

100ms画小圆 200ms画大圆 300ms 时清除矩形

如果我这样做，一段时间后它会产生更多闪烁效果。如果我能让一个圆圈来做这件事，我希望能够做多个圆圈。

Answer 1

你让它有点模块化怎么样..

var c = document.getElementById('test').getContext('2d');


function Circle(_x, _y, _r){
    var x = _x;
    var y = _y;
    var radius = _r;
    var endAngle = (Math.PI/180)*360;

    this.draw = function(canvas){
        canvas.fillStyle = "red";
        canvas.beginPath();
        canvas.arc(x,y,radius,0,endAngle ,true);
        canvas.fill();
    };

    this.delete = function(canvas){
        canvas.fillStyle = "white";
        canvas.beginPath();
        canvas.arc(x,y,radius+1,0,endAngle ,true);
        canvas.fill();
    };

    return this;
}

function Heart(_canvas, x,y,radius,increase){
    var canvas = _canvas;
    var currentState = 0;
    var states = [
        new Circle(x,y,radius),
        new Circle(x,y,radius+increase/2),
        new Circle(x,y,radius+increase)
    ];

    var that = this;


    this.beat = function(delay){
        if (delay){
            setTimeout(function(){that.beat(0);}, delay);
        }
        else{
            if (currentState == states.length){
                states[states.length-1].delete(canvas);
                that.beat(1000);
                currentState = 0;
            }
            else{
                states[currentState++].draw(canvas);
                setTimeout( function() {
                    that.beat();
                }, 150);
            }
        }
    }

    return this;
}

var heart1 = new Heart(c, 50,50,30,10);
var heart2 = new Heart(c, 130,120,40,20);
var heart3 = new Heart(c, 40,160,20,10);

heart1.beat(100);
heart2.beat(500);
heart3.beat(1300);

在 http://jsfiddle.net/gaby/NyPZM/ 现场表演

Answer 2

你可以在一个间隔内完成它。只需有一个计数器并用它来确定需要绘制哪些圆圈即可。另外，您可能需要考虑使用 settimeout 并递归地调用新的 settimeout。 setinterval 可能会变得混乱，具体取决于在您的时间间隔内运行代码所需的时间。

编辑

类似这样的东西..

var _count = 1;

function doStuff()
{ 
    switch (_count)
    {
       case 1:  drawSmallCircle(); break;
       case 2:  drawMediumCircle(); break;
       case 3:  drawLargeCircle(); break;
    }

    _count = _count == 3 ? _count = 1 : _count++;
    setTimeout(doStuff, 100);
}

Answer 3

var count = 1

function animate() {

switch(count)
{ 
     case 1: small(); break; 
     case 2: big(); break; 
     case 3: clear(); small(); break; 
} 

if(count == 3) 
     count = 1; 
else 
     count++;  

setTimeout(animate, 200); 

}