Question

我有一个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）。它在Chrome上的Windows上也很可爱，但是当我加载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 */

虽然它看起来像在FF中，例如RequestAnimationFrame提供比setTimeout更平滑的性能。（我通过删除mozRequestAnimationFrame条件并重新加载测试了这个，尝试了超时的各种间隔）

我是否还有其他可能有助于提高动画的跨浏览器帧率的内容？

请注意，例如，图像默认为500x500，旋转发生在图像中心周围（点250x250），但图像显示在页面上1000x1000（视口在页面加载时进行缩放。

如果我让设计师将图像调整为1000x1000画布并且从一开始就以全尺寸显示，我是否有可能提升？也许是“更顺畅的骑行”？我不确定哪些因素会影响SVG动画和性能。

Answer 1

您应该查看Element.animateWith（http://raphaeljs.com/reference.html#Element.animateWith）。它具有一项功能，可让您将一个动画与另一个动画同步，以便在锁定步骤中更新所有内容。如果浏览器或设备速度很慢，则不稳定会有所帮助，但同步动画会让它看起来更好。

Raphael SVG动画在某些浏览器中不稳定

1 个答案: