Пользовательская анимация пути с использованием JQuery

Question

Я создал это приложение для Android, которое отправляет точки onTouchEvents на веб-сервер, и у меня есть страница, которая получает данные JSON точек движения через Ajax, например:

{"data":[
{"x":224.28035,"y":235.4906},
{"x":263.32916,"y":219.45718},
{"x":293.3667,"y":215.44885},.....]}

Теперь я хочу использовать эти данные и анимировать div на экране с помощью плавной анимации пути, аналогичной анимации на флэш-пути, есть ли плагин, решающий эту проблему?

PS: http://weepy.github.com/jquery.path/ не похоже на собственную анимацию пути, или я что-то упускаю.

Спасибо:)

Answer 1

Надеюсь, это именно то, что вы ищете: плагин jQuery crSpline

Вы можете увидеть его демонстрацию в здесь .

Answer 2

pathAnimator

Сверхлегкий, высокопроизводительный с хорошим набором настроек.

Пример:

var path         = "M150 0 L75 200 L225 200 Z"; // an SVG path
    pathAnimator = new PathAnimator( path ),   // initiate a new pathAnimator object
    speed        = 6, // seconds that will take going through the whole path
    reverse      = false,  // go back or forward along the path
    startOffset  = 0,   // between 0% to 100%
    easing = function(t){ t*(2-t) };  // optional easing function


pathAnimator.start(speed, step, reverse, startOffset, finish, easing);

function step( point, angle ){
    // do something every "frame" with: point.x, point.y & angle
}

function finish(){
    // do something when animation is done
}