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

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

1 голос
/ 02 февраля 2011

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

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

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

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

4) В каждом кадре переместите небольшую точку в эту точку

5) В каждом кадре, lineTo новая позиция маленькой точки - прямая линия, но есть достаточно кадров, чтобы конечный результат все еще выглядел красиво, квадратично и пышноПуть медленный.Я пробовал 10 разных подходов к этой проблеме, и вышеупомянутое решение - самое быстрое, которое я когда-либо придумал.Все они работают, но включение getPointAtLength делает его слишком медленным.Использование animateAlong с точкой, а затем lineTo с координатами этой точки не намного лучше, во-первых, потому что он создает столько потоков, сколько есть дочерних узлов, и потому что он просто не намного быстрее.

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

1 Ответ

1 голос
/ 03 августа 2011

У Рафаэля есть встроенный метод 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знаю, что это немного сложнее, но по сути вы выясняете, как далеко вдоль пути объект-помощник проходит каждый шаг пути (i), а затем, когда счетчик зацикливается (j), вы перемещаете другую дробь вдоль пути.

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

...