raphael.js中的多个动画

我画了一个盒子。第一个动画使箱子水平移动，第二个动画使箱子垂直移动。但是当执行第二个动画时，盒子首先回到其原始位置，然后垂直地进行动画。我想要的是该盒子不应该回到其原始位置，并且第一个动画结束时，第二个动画必须从该位置准确执行。我怎样才能做到这一点？我究竟做错了什么？raphael.js中的多个动画

JS小提琴Code

window.onload = function(){ 
    var paper = Raphael(0,0,800,400); 

    var hi = paper.rect(10,10,100,30); 

    var move1 = Raphael.animation({ 
     transform:'t100,0' 
    },1000); 

    var move2 = Raphael.animation({ 
     transform:'t0,100' 
    },1000); 

    hi.animate(move1);  
    hi.animate(move2.delay(1000)); 
}

来源

2012-10-12 rohan_vg

嘿，这里的更新的工作fiddle

的原因是因为你可能知道小t转换相对于矩形的当前位置。按照当前位置，这意味着element的属性x and y，在我们的例子中是矩形。

但在Element.transform第一行表示

translation doesn’t change x or y of the rectangle

执行 't100,0'矩形的 x & y属性后这意味着仍然是初始 10,10因此第二动画相对于执行 10, 10

最后，对于结果你所期望的，你需要能够改变x & y属性，可以按照小提琴中所示完成......希望这有助于！

来源

2012-10-12 05:41:56

您可能也会考虑使用Element.translate，但Raphael并不鼓励我们使用它... –

感谢您的解释。现在如果我想要让它动画两次以上。让我们按照以下顺序进行操作：向右，向下，向左，直到原来的位置。我怎样才能做到这一点？ –

更新小提琴http://jsfiddle.net/CfH7G/3/ –

raphael.js中的多个动画

回答

相关问题