Element.status() 사용법; Raphael.js

Question

문서가 너무 복잡합니다. Raphael.js에서 Element.status()를 사용하는 방법에 대해 누구나 알고있을 수 있습니까? 데모를 줄 수 있다면 매우 감사드립니다.

Answer 1

Element.status는 요소에 적용된 현재 애니메이션을 표시하거나 특정 애니메이션에 상태를 설정할 수 있습니다.

애니메이션은 0과 1 사이를 보간합니다. 애니메이션의 중간에 0.5라는 값이 있습니다. 이 속성은 애니메이션으로 적용되는 모든 속성에 적용됩니다. (0에서 100까지 x의 애니메이션을 적용하면 상태는 0.5가되고 x는 50이됩니다. 바운스처럼 적용된 여유를 고려하지 않습니다.)

속성 사이에 멋진 부드러운 보간을 만드는 대신 요소를 10 개의 개별 단계로 이동 시키려고합니다. 애니메이션의 매번 수동으로 상태를 설정할 수 있습니다. 예.

example jsfiddle

var rect = paper.rect(10, 20, 300, 200); 

var raphAnimation = Raphael.animation({ x: 100, y: 100 }, 1000); 

for(var c = 1; c <= 10; c++) { 
    (function() { 
     var step = c 
     setTimeout(function() { 
     rect.status(raphAnimation, 0.1 * step) 
     }, step * 200) 
    })(); 
} 

주

var raphAnimation = Raphael.animation({ x: 100, y: 100 }, 1000); 
rect.status(raphAnimation, 0.5) 

: 당신은 상태 설정 명령을 사용하여 반복합니다, 나는 신선한 애니메이션을 것이라 생각합니다. 애니메이션이 0-> 100이고 상태를 0.5로 설정했다고 가정하면 절반으로 갈 것입니다. 이제 당신이 똑같은 일을하고 0.5로 다시 부르면, 이제는 남은 거리의 0.5 배 밖에되지 않으므로 이제는 나머지가 0.5가 될 것입니다.