如何在拉法爾js庫的動畫後畫線？

我想在5秒內畫出一個形狀，就像這樣。我使用raphael 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 2010-12-29 20:59:58

如何在拉法爾js庫的動畫後畫線？

回答

相關問題