라파즈 js 라이브러리로 애니메이션을 그린 후 어떻게 그리 시나요?

5 초 동안 모양을 그려야합니다. 나는 라파엘 js 라이브러리를 사용한다. 그러나 애니메이션 후에 어떻게 선을 그리는가? (나는 움직이는 궤도를 그리는 것을 의미한다). 감사.라파즈 js 라이브러리로 애니메이션을 그린 후 어떻게 그리 시나요?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> 
<script type="text/javascript" charset="utf-8"> 
window.onload = function() { 
    var r = Raphael(0, 0, 500, 600); 
    var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100").attr({stroke: "none"}), 
    e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}) 
    e.attr({rx: 5, ry: 5}).animateAlong(p, 5000, true); 
} 
</script> 
</head> 
<body> 
    <div id="stroke"></div> 
</body> 
</html>

출처

2010-12-22 cj333

onAnimation을 사용하면 경로를 동적으로 업데이트 할 수 있습니다. 여기에 원시 방법이있다

window.onload = function() { 
    var r = Raphael(0, 0, 500, 600); 
    var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100").attr({stroke: "none"}); 
    var p2 = r.path("M104 100"); 
    var e = r.ellipse(104, 100, 4, 4).attr({stroke: "none", fill: "#f00"}); 
    e.attr({rx: 5, ry: 5}).animateAlong(p, 5000, true).onAnimation(function() { 
     p2.attr("path", p2.attr("path").concat([["L", e.attr("cx"), e.attr("cy")]])); 
    }); 
}

출처

2010-12-28 19:35:48 TigrisC

고마워. 하지만 이것은 애니메이션을 마친 후에 선을 그리는 효과입니다. 애니메이션하는 동안 선을 그리는 다른 방법이 있습니까? – cj333

라파즈 js 라이브러리로 애니메이션을 그린 후 어떻게 그리 시나요?

답변

관련 문제