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

Моя цель:

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

Тропинка http://i50.tinypic.com/dwwhhy.jpg

То, что я рассмотрел

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

Мой план

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

Мой вопрос

  • звучит ли мой план как безумие? Лучшие предложения?
  • Вы предвидите некоторые проблемы с производительностью? Я мог бы закончить с координатами 5K или 10K.
  • знаете ли вы умный способ, программу, функцию или что-нибудь подобное, чтобы вычислить все координаты?
2 9
javascript jquery-animate bezier

2 ответа:

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

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

С уважением

9

Есть крошечный скрипт (на основе SVG), только для анимации, которая не находится в прямых линиях,
звонил патаниматор (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 )

14