2011-02-02 3 views
1

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

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

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

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

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

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

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

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

ответ

1

У 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, когда анимация закончилась, поэтому вы можете точно видеть, сколько анимационных сцен есть.