Javascript Raphaelパスのアニメーション

Question

シェイプを作成して回転できるパスがありますが、シェイプ/パスを取得して画面を移動する方法がわかりません。私は他の解決策を見てきましたが、私はそれらを働かせるように見えません。ありがとう。

leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50z"); 
leftRec.attr("fill","#f00"); 
leftRec.animate({transform:"r-70,400,150"}, 2000, "ease-in"); 

leftRec.animate({cy: 600, cx: 200}, 2000); 

Answer 1

第一およびその後の翻訳回転を実行するanimate方法

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z"); 
leftRec.attr("fill","#f00"); 
leftRec.animate({transform: "T0,500R-90"}, 1000, "ease-in"); 

を使用し、同時に回転および平行移動の両方を行うために、animate方法

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z"); 
leftRec.attr("fill","#f00"); 
leftRec.animate({transform:"r-90,400,150"}, 1000, "ease-in", function() { 
    this.animate({ 
     path: Raphael.transformPath('M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z', 'T-500,0') 
    }, 1000); 

    // The below approach could have worked in theory but probably the coordinate system change might 
    // tamper with the subsequent transform. I am not so sure. 
    // this.animate({transform: "T0,500"}, 1000) 
}); 

にコールバックを利用しますどちらの場合も、形状は垂直方向に500px移動します。

これは最適な解決策ではない可能性があります。これを改善する方法があれば、改善/改善してください。