如何使用贝塞尔曲线沿着路径为图像设置动画

Question

我的目标:

• 沿着如下图所示的路径移动/动画图像(可以连接贝塞尔曲线).
• 必须在IE7 +中工作,不要构建多个解决方案.
• 我可以暂停/恢复运动图像.
• 图像将沿着路径继续移动(重复).

路径http://i50.tinypic.com/dwwhhy.jpg

我考虑过的

• CANVAS:IE7 + 8不支持,还没有测试过explorercanvas!预见一些z-index问题.
• SVG,IE7 + 8不支持.
• jQuery.path,一个扩展jQuery动画功能的插件.无法弄清楚恢复部分,我想在支持时使用CSS转换.

我的计划

• 使用CSS 3D变换,CSS 2d变换或jQuery.animate(支持的内容)和requestAnimationFrame为图像设置动画.
• 计算所有坐标并逐个像素地简单移动图像.

我的问题

• 我的计划听起来像疯了吗？更好的建议？
• 你预见到一些性能问题吗？我可能最终得到5K或10K坐标.
• 你知道一个聪明的方法,一个程序,一个函数或类似的东西来计算所有的坐标吗？

Answer 1

有一个很小的脚本(基于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甚至可以提高效率)

Answer 2

我建议你使用GSAP:http://www.greensock.com/get-started-js/

有了它你可以处理时间表,这是一个bezier插件:http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

问候