html5 - анимация двух кругов, таких как пульс или сердцебиение

Question

Я пытаюсь оживить 2 круга, такие как пульс или биение сердца. Моя идея состоит в том, чтобы нарисовать маленький круг, затем большой, имитирующий биение сердца, а затем очистить его и повторить этот процесс.

Каков наилучший способ сделать это? мне действительно нужно 3 setIntervals?

Нарисуйте маленький круг на 100 мс нарисовать большой круг на 200 мс очистить прямоугольник при 300 мс

Если я сделаю это таким образом, через некоторое время это будет более мигающим эффектом. Если я смогу сделать для этого один круг, я хочу иметь возможность сделать несколько кругов.

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

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); 

}

Answer 3

Вы можете сделать это за один интервал.Просто есть счетчик и используйте его, чтобы выяснить, какие круги нужно нарисовать.Кроме того, вы можете рассмотреть возможность использования 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);
}