Question

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

垂直线条闪烁＆＃39;在移动时，有时它看起来像线的顶部和底部位于不同的位置（就像在旧的一天，当你试图在CRT显示器上绘制垂直线而屏幕本身是清爽的时候）
动画通常会在继续之前暂停一会儿（在运动中很少＆＃39; hickups＆＃39;）。

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

$(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/

在Raphael中移动基于路径的形状并不流畅

1 个答案: