我有一个SVG对象,使用Raphael将其添加到我的页面上。由于大约有6组中的175个路径,我怀疑它算是比较复杂的。
我正在使用.animate函数对这6组中的每一组进行动画处理。
function anim(direction, duration){
return Raphael.animation({transform: "r"+direction+"360 250 250"}, duration).repeat("Infinity");
}
IG.sets.white_outer.animate(anim("",100000)); // 2 paths
IG.sets.grey_outer.animate(anim("-",100000)); // 25 paths
IG.sets.grey_inner.animate(anim("",100000)); // 25 paths
$(window).load(function(){
IG.sets.BLUE.animate({transform: "r0 250 250"}, 4000, ">"); // 32 paths
IG.sets.RED.animate({transform: "r0 250 250"}, 3000, ">"); // 29 paths
IG.sets.GREEN.animate({transform: "r0 250 250"}, 2000, ">"); // 24 paths
}
问题在于在某些浏览器中,动画效果非常卡顿。
Mac上顺滑无比(已测试:FF、Chrome、Safari)。在Windows的Chrome中也很好看,但当我在Windows的FF、Safari或IE8中加载时,动画会变得卡顿且有些抖动。
在iPad上甚至看起来也很棒!
我希望能够使它们都看起来很棒……所以我试图弄清楚在FF和Safari中消耗所有资源的是什么(最终希望我所做的任何覆盖都能修复IE8)。
从我看到关于Raphael动画效果不佳的其他问题中,我看到提到“深入内部”添加超时到动画函数中……(如在raphael-min.js中看到的那样)
cz= window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
window.oRequestAnimationFrame||
window.msRequestAnimationFrame||
function(a){setTimeout(a,16)}, /* there is a function here that animates */
尽管在Firefox中,RequestAnimationFrame比setTimeout表现更平滑(我通过删除mozRequestAnimationFrame条件并重新加载,尝试了各种timeout间隔进行了测试),但这并非万无一失。是否还有其他可改进跨浏览器动画帧率的方法?例如,请注意图像默认为500x500,旋转围绕图像中心(点250x250),但图像显示在页面上的大小为1000x1000(视口在页面加载时进行缩放)。如果将设计师调整图像大小到1000x1000的画布上,并从一开始就以全尺寸显示,是否可能会提高性能?也许可以实现更“平滑”的效果?我不确定哪些因素会影响SVG动画和性能。