jquery - 在拉斐尔中移动基于路径的形状并不流畅

Question

我在黑色背景上定义了一个简单的正方形，并尝试通过重复调用 .transform() 对其进行“动画”处理。使用下面的代码，它只是以恒定的速度从左向右移动。我注意到两件事:

• 垂直线在移动时会“闪烁”，有时看起来线的顶部和底部位于不同的位置(就像以前当你试图在 CRT 显示器上绘制垂直线时，屏幕本身很清爽)
• 动画在继续之前经常会停止一会儿(运动中出现一些“小问题”)。

所以我感觉我没有做正确的事。我应该使用不同的函数来移动基于路径的对象吗？或者我应该改变它的更新方式？

$(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, "<>");
});

您应该看到一个相当流畅的动画，该动画将矩形向右移动，然后返回。

用这个 fiddle 试试:http://jsfiddle.net/YadqP/