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