10

我的目标：

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

路径

我所考虑的

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

我的计划

  • 使用 CSS 3D 变换、CSS 2d 变换或 jQuery.animate（支持的）和 requestAnimationFrame 对图像进行动画处理。
  • 计算所有坐标并简单地逐像素移动图像。

我的问题

  • 我的计划听起来很疯狂吗？更好的建议？
  • 您是否预见到一些性能问题？我最终可能会得到 5K 或 10K 坐标。
  • 你知道计算所有坐标的聪明方法、程序、函数或类似的东西吗？
4

2 回答 2

15

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

于 2013-04-24T13:08:57.717 回答
9

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

有了它，您可以处理时间线，这是一个贝塞尔插件：http ://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

问候

于 2012-11-28T19:37:36.837 回答