Question

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

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

Answer 1

嘿，这是更新的工作fiddle

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

但Element.transform中的第一行说

 translation doesn’t change x or y of the rectangle

这意味着在您执行element之后，矩形的't100,0'属性仍然是初始 x & y因此第二个动画将根据10,10

执行

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

raphael.js中的多个动画

1 个答案: