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

Posted 2023-05-08

【中文标题】如何使用贝塞尔曲线沿路径为图像设置动画

【英文标题】：How to animate an image along a path with Bezier curves

【发布时间】：2012-11-16 18:26:52

【问题描述】：

我的目标：

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

我的考虑

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

我的计划

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

我的问题

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

【问题讨论】：

您的图片尺寸是多少？您是否有将要使用的路径数据示例？

【参考方案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 甚至可以提高效率）

【参考方案2】：

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

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

问候

【讨论】：

大声笑，就性能、兼容性（甚至 ie6！）和易用性而言，GSAP 是最好的 js 动画库。

GSAP+1。它还有一些 CDN 托管的 URL，包括 TweenMax、TimelineMax、CSSPlugin、EasePack、BezierPlugin 和一些更常用的 URL。所以不管有没有 60 行 js 代码，考虑到这个 URL 是为 HTML5 横幅广告托管的，你可以期待它的易用性和快速的下载时间，所以大多数用户已经将它缓存在他们的浏览器上：s0.2mdn.net/ads/studio/cached_libs/…