My goal:
- 沿着如下图所示的路径移动/动画图像(可能连接贝塞尔曲线)。
- 必须在 IE7+ 下工作,不要构建多个解决方案。
- 我可以暂停/恢复移动图像。
- 图像将沿着路径继续移动(重复)。
我考虑过什么
- CANVAS:IE7+8不支持,尚未测试explorercanvas!预见一些 z-index 问题。
- SVG,IE7+8 不支持。
- jQuery.path,一个扩展 jQuery animate 功能的插件。无法弄清楚简历部分,我想在支持时使用 CSS 转换。
My plan
- 使用 CSS 3D 变换、CSS 2d 变换或 jQuery.animate(支持的)和 requestAnimationFrame 对图像进行动画处理。
- 计算所有坐标并简单地逐像素移动图像。
我的问题
- 我的计划听起来很疯狂吗?更好的建议?
- 您预见到一些性能问题吗?我最终可能会得到 5K 或 10K 坐标。
- 你知道计算所有坐标的聪明方法、程序、函数或类似的东西吗?
有一个小脚本(基于 SVG),专门用于非直线的动画,
called 路径动画器 https://github.com/yairEO/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 https://github.com/wilsonpage/fastdom)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)