Question

我正在尝试动画2个圆圈，就像跳动脉搏或心跳一样。我的想法是绘制一个小圆圈，然后是一个较大的圆圈，模拟一个心跳，然后清除它并重复这个过程。

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

在100毫秒画一个小圆圈在200ms处绘制大圆圈在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

你可以在一个时间间隔内完成。只需要一个计数器并使用它来确定需要绘制哪些圆圈。此外，您可能需要考虑使用settimeout并以递归方式调用new settimeouts。根据在你的时间间隔内运行代码所需的时间，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); 

}

html5 - 动画2个圆圈，如脉冲或心跳

3 个答案: