Javascript动画计时

Javascript animation timing

本文关键字：动画 Javascript      更新时间：2023-12-29

我正在用Raphael用Javascript编写一个程序，从另一个路径的结束处绘制一条路径。我尝试了很多方法，最终使用BBox坐标进行连接，因为我使用的线相对较直。我相信可能还有另一种（更好的）方法，但我所尝试的一切都没有奏效。

我现在遇到的问题是，当我在浏览器中运行程序时，在某些情况下，这两行会在正确的点连接，而在其他情况下，当我刷新它时，它不会。我真的很困惑，因为我什么都没改变。

我认为这可能与时间有关，所以我添加了一个延迟，但这并不奏效，尽管只有在延迟到位且足够长的情况下，它才会画出第二条线。

如有任何建议，我们将不胜感激。

window.onload = function(){
var paper = new Raphael(100,0,2000,2000);
var line1 = paper.path("m 300 400 l 100 200");
function lines(){
    line1.animate({"transform":"r102 t120 20"});
}
setTimeout(function box1(){
    var bbox = line1.getBBox();
    var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100");
}, 1000000000000000);
lines();
box1();
};

我现在想明白了。我用.onAnimation延迟了第二行的绘制，现在它可以工作了。

即

function lines(){
    line1.animate({"transform":"r62t40 20"}).onAnimation(function (){
        var bbox = line1.getBBox();
        var line2 = paper.path("m"+[bbox.x]+" "+[bbox.y2]+"l 200 100");
    });
}

不太确定为什么仍在设置动画。我会把它们放在一组中，然后围绕一个点旋转。Fiddle herehttp://jsfiddle.net/Lmbvm/

var paper = new Raphael(100,0,2000,2000);
var line1 = paper.path("M300 400 l100 200");
var line2 = paper.path("M400 600 l200 100");
var set = paper.set();
set.push( line1, line2 );
set.transform('r50,200,200');
相关文章：