Question

我的目标：

沿着如下图所示的路径移动/动画图像（可以连接贝塞尔曲线）。
必须在IE7 +中工作，不要构建多种解决方案。
我可以暂停/恢复动态影像。
图像将沿路径移动（重复）。

the path 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

问候

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

2 个答案:

例如：