Нахождение положения точки на пути в Рафаэле

Я делаю анимацию в Raphael, которая включает в себя пару квадратичных линий Безье, выходящих из div и анимирующих по пути к паре дочерних элементов. Я хочу, чтобы кривые, идущие к каждому дочернему элементу, постепенно рисовали сами себя, пока не достигли конечной точки. Я обхожу это следующим образом:

1) Создайте центральный поток для всей анимации

2) В каждом кадре увеличивайте переменную currentLength на определенную величину.

3) В каждом кадре найдите текущую точку на каждой кривой с помощью getPointAtLength

4) В каждом кадре перемещайте маленькую точку в эту точку

5) В каждом кадре линия до нового положения маленькой точки - прямая линия, но кадров достаточно, чтобы конечный результат все равно выглядел красиво, квадратично и извилисто.

Все это работает как абсолютный шарм, за исключением одной вещи — getPointAtLength кажется НАМНОГО медленным. Я пробовал около 10 различных подходов к этой проблеме, и вышеупомянутое решение — самое быстрое из всех, что я придумал. Все они работают, но включение getPointAtLength делает их слишком медленными. Использование animateAlong с точкой, а затем lineTo с координатами этой точки не намного лучше, во-первых, потому что создается столько потоков, сколько есть дочерних узлов, и потому что это просто ненамного быстрее.

Пожалуйста помоги! Прочитайте мое сообщение, поймите его, помогите мне найти решение! getPointAtLength кажется слишком медленным - вызывайте его один раз в каждом кадре из 40 кадров для 7 строк, и это замедляет все. Любая помощь будет оценена по достоинству.


javascript svg animation raphael bezier
person dev    schedule 02.02.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В Raphael есть встроенный метод animateAlong (http://raphaeljs.com/reference.html#animateAlong). Определите свой путь, а затем попросите вспомогательный объект двигаться по пути.

Затем с помощью метода onAnimation (http://raphaeljs.com/reference.html#onAnimation). Этот метод вызывает функцию на каждом шаге анимации, и вы можете определить функцию обратного вызова для рисования части кривой, которой достиг вспомогательный объект (с помощью метода getSubpath).

var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z"),
    t = 4000, // length of timeout
    i = p.getTotalLength()/4000, // length of path to move each time
    j = 0, // counter
    p2 = r.path(),
    e = r.ellipse(10, 50, 1,1).attr({stroke: "none", fill: "#f00"}).onAnimation(function () {
        p2.attr({path: p.getSubpath(0, j*i)});
        j++;
    }).animateAlong(p, t, function() {
        console.log(j);
    });
});

Я знаю, что это становится немного сложным, но, по сути, вы определяете, как далеко по пути проходит вспомогательный объект за каждый шаг пути (i), а затем, когда счетчик зацикливается (j), вы перемещаете еще одну часть пути.

Я не уверен, что Рафаэль будет перерисовывать каждую миллисекунду, но должен быть способ определить, сколько этапов анимации. animateAlong имеет функцию обратного вызова, которую я использовал для регистрации j завершения анимации, чтобы вы могли точно видеть, сколько этапов анимации имеется.

person chris5marsh    schedule 03.08.2011