javascript – 如何使用Bezier曲线沿着路径动画化图像

前端之家收集整理的这篇文章主要介绍了javascript – 如何使用Bezier曲线沿着路径动画化图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我的目标:

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

the path http://i50.tinypic.com/dwwhhy.jpg

我考虑过的

> CANVAS:IE7不支持8,还没有测试过explorercanvas!预计一些z指数问题.
> SVG,不支持IE7 8.
> jQuery.path,一个扩展jQuery动画功能插件.无法找出简历部分,我希望在支持时使用CSS变换.

我的计划

>使用CSS 3D变换,CSS 2D变换或jQuery.animate(支持什么)和requestAnimationFrame动画化图像.
>计算所有坐标,并简单地逐个移动图像.

我的问题

我的计划听起来像疯狂吗?更好的建议?
你预见到一些性能问题吗?我可能会得到5K或10K坐标.
>你知道一个聪明的方式,一个程序,一个函数或类似的计算所有的坐标吗?

解决方法

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

这样可以处理时间轴,这里是一个bezier插件http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

问候

猜你在找的JavaScript相关文章