Перемещение формы на основе пути в Рафаэле не является плавным - PullRequest
Новая
       0

Перемещение формы на основе пути в Рафаэле не является плавным

2 голосов
/ 02 апреля 2012

Я определил простую квадратную форму на черном фоне и пытаюсь «оживить» ее с помощью повторяющихся вызовов .transform(). С кодом ниже он просто перемещается слева направо с постоянной скоростью. Я замечаю две вещи:

  • Вертикальные линии «мерцают» при движении, иногда кажется, что верхняя часть и нижняя часть линии находятся в разных положениях (что-то вроде старого дня, когда вы пытались рисовать вертикальные линии на ЭЛТ-мониторе, когда сам экран обновлялся)
  • Анимация часто останавливается на мгновение, прежде чем продолжить (небольшие «всплески» в движении).

Так что у меня такое чувство, что я поступаю неправильно. Должен ли я использовать другую функцию для перемещения объектов на основе пути? Или я должен изменить способ обновления? 

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

1 Ответ

4 голосов
/ 02 апреля 2012

Вероятно, лучше не управлять анимацией вручную с помощью собственных таймеров событий.Например, вместо вызова update (), сделайте следующее: 

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

Вы должны увидеть довольно плавную анимацию, которая перемещает прямоугольник вправо, затем назад.

Попробуйте это в этой скрипке:http://jsfiddle.net/YadqP/

...