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

问候

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...