如何使用贝塞尔曲线沿着路径为图像设置动画 [英] How to animate an image along a path with Bezier curves

问题描述

我的目标：

• 沿着如下图所示的路径移动/动画图像（可能是连接bezier曲线）。


• 必须在IE7 +中工作，不要构建多个解决方案。


• 我可以暂停/恢复运动图像。


• 图像将继续沿路径移动（重复）。

• Move/animate an image along a path like the drawing below (Could be connecting bezier curves).
• Must work in IE7+, don't what to build multiple solutions.
• I can pause/resume the moving image.
• The image will keep moving along the path (repeat).

路径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坐标。


• 你知道一个聪明的方法，一个程序，一个函数或类似的东西来计算所有的坐标吗？

推荐答案

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

I would recommend you to use GSAP : http://www.greensock.com/get-started-js/

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

With that you can handle timelines, and here is a bezier plugin : http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

问候

这篇关于如何使用贝塞尔曲线沿着路径为图像设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！