使用raphaeljs制作动画时，给矩形赋予不同的颜色

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