1

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

JS小提琴代码

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)); 
}​
4

1 回答 1

3

嘿，这是更新的工作小提琴

原因是您可能知道t相对于矩形当前位置的小变换。当前位置表示 的 x and y 属性，element在我们的例子中是矩形。

但是Element.transform的第一行说 

平移不会改变矩形的 x 或 y
这意味着在您执行矩形't100,0'的 x & y属性之后仍然是初始10,10因此第二个动画是相对于 10, 10

最后，对于您期望的结果，您需要能够更改 x 和 y 属性，这可以如小提琴中所示完成......希望这会有所帮助！

于 2012-10-12T05:41:56.073 回答