Question

此代码有望为矩形底部向上设置动画，同时无限地将颜色从黑色切换为红色。但它总是使用单一颜色，即红色而不是黑色，然后是红色。

var spec = { width: 23, height: 190, x: 8, y: 0, r : 5}
var speed = 2000;

var rect1 = paper.rect(spec.x, spec.height, PatientBar1.width, 0, spec.r);

function animateRaphaelRect(){
    rect1.attr({y:spec.height,height:0})
    rect1.animate(
        {fill: 'black', stroke:'#000', y:spec.y, height:spec.height},
        speed
    );
    rect1.animate(
        {fill: 'red', stroke:'#000', y:spec.y, height:spec.height},
        speed,
        function(){
            animateRaphaelRect();
        }
    );
}
animateRaphaelRect();

Answer 1

我认为是因为你一次对同一个对象做两个动画。而是首先尝试设置开始状态而不是动画，例如...... jsfiddle here

var paper = Raphael("container");

var spec = { width: 23, height: 190, x: 8, y: 0, r : 5}
var speed = 2000;

var rect1 = paper.rect(spec.x, spec.height, 400, 0, spec.r);

function animateRaphaelRect(){
    rect1.attr({y:spec.height,height:0})

    rect1.animate(
        {fill: 'red', stroke:'#000', y:spec.y, height:spec.height},
        speed,
        function(){
            rect1.attr("fill", "black");
            animateRaphaelRect();
        }
    );
}
animateRaphaelRect();

使用raphaeljs制作动画时，为矩形提供不同的颜色

1 个答案: