1

箱を描きました。最初のアニメーションはボックスを水平方向に動かし、2 番目のアニメーションはボックスを垂直方向に動かします。しかし、2 番目のアニメーションが実行されると、ボックスは最初に元の位置に戻り、次に垂直方向にアニメーション化されます。私が望むのは、ボックスが元の位置に戻ってはならず、最初のアニメーションが終了したところで、2 番目のアニメーションがその位置から正確に実行されなければならないということです。どうすればこれを達成できますか？私は何を間違っていますか？

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'の属性 を実行した後も初期のままです。したがって、2 番目のアニメーションは、 x & y10,10 10, 10

最後に、あなたが期待している結果のために、フィドルに示されているように実行できる x & y 属性を変更できる必要があります....これが役立つことを願っています!

于 2012-10-12T05:41:56.073 に答える