Как оживить изображение вдоль пути с помощью кривых Безье

Моя цель:

Переместите/анимируйте изображение вдоль пути, как показано на рисунке ниже (возможно, подключение кривых Безье).
Должен работать в IE7+, а не для того, чтобы создавать несколько решений.
Я могу приостановить/возобновить движущееся изображение.
Изображение будет продолжать двигаться по пути (повторите).

Что я рассмотрел

CANVAS: не поддерживается в IE7+ 8, еще не проверял explorercanvas! Предвидите некоторые проблемы с z-индексами.
SVG, не поддерживается в IE7+ 8.
jQuery.path, плагин, расширяющий функцию анимации jQuery. Не могу понять часть резюме, и я хочу использовать CSS-преобразования, когда они поддерживаются.

Мой план

Анимируйте изображение с помощью CSS 3D-преобразования, CSS 2d-преобразования или jQuery.animate (что поддерживается) и requestAnimationFrame.
Рассчитайте все координаты и просто переместите изображение попиксельно.

Мой вопрос

Мой план звучит как безумие? Лучшие предложения?
Вы предвидите некоторые проблемы с производительностью? Я мог бы в конечном итоге с 5K или 10K координаты.
Знаете ли вы умный способ, программу, функцию или что-нибудь подобное для вычисления всех координат?

Ответ 1

Я бы рекомендовал вам использовать GSAP: http://www.greensock.com/get-started-js/

С этим вы можете обрабатывать временные рамки, а вот плагин безье: http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

рассматривает

Ответ 2

Там крошечный script (на основе SVG), просто для анимации, которая не находится в прямых линиях,
называемый pathAnimator (2kb), он очень маленький и очень эффективный.
Не требуется jQuery.

Например:

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
}

(может даже повысить эффективность с помощью fastdom)