Raphaelでパスをベースとしたシェイプを移動すると、流動性がありません。

Question

黒い背景に単純な四角形を定義し、それを繰り返すことで 'アニメーション化'しようとしています。.transform()呼び出し。下のコードでは、一定速度で左から右に移動します。

• 垂直線「ちらつき」に移動させながら、時にはそれが上部のように見え、ラインの下の部分が異なる位置にあなたが描くしようとした昔の日のように（何かをしている：私は2つのことに気づきます
• アニメーションはしばらくしばらく停止してから、続行します（動きにはほとんどヒックアップはありません）。

私は正しいことをしていないと感じています。別の機能を使用してパスベースのオブジェクトを移動する必要がありますか？それとも、更新方法を変更する必要がありますか？

$(document).ready(function() { 
    var R = Raphael("display", 640, 480); 

    R.rect(0, 0, 640, 480, 10).attr({ 
     fill : "#000", 
     stroke : "#666" 
    }); 

    var path = "M10,20L10,100L100,100L100,20L10,20"; 

    rectangle= R.path(path).attr({ 
     "stroke" : "#0f0", 
     "stroke-width" : 2 
    }); 

    update(); 
}); 

function update() { 
    D=D+1; 
    var translation_string = "T"+D+",0"; 
    rectangle.transform(translation_string); 
    setTimeout(update, 20); 
} 

Answer 1

それは手動で独自のイベントタイマーとアニメーションを管理していないために、おそらく最善です。たとえば、update（）を呼び出す代わりに、次のようにします。

rectangle.animate({ "transform": "T410,0" }, 800, "<>", function() { 
    rectangle.animate({ "transform": "T0,0" }, 800, "<>"); 
}); 

右に矩形をして戻ってくるかなり滑らかなアニメーションが表示されます。

はこのフィドルでそれを試してみてください：http://jsfiddle.net/YadqP/