Snap svg多个动画 - 性能问题

Question

这是我第一次尝试使用javascript/jquery/snap动画SVG，并且我发现即使是一些相当新的设备（测试iPhone 4s），动画也不能很好地运行。似乎是一个性能问题？

我试图在svg中嵌入到我的html中的一些分组元素动画。它们在页面加载时动画，这里是相关的代码。

注：我的SVG绘制在动画的“结束”状态，插画家，所以我使用捕捉抵消它们，然后动画回到它们的自然位置

$(function() { 
    //initialise renderer 
    var renderer = Snap(".bg-space_svg"); 

    //define animation start states 
    var stars_bg_transform = new Snap.Matrix().translate(0, 200).scale(1.5, 1.5, 260, 0); 
    var shard_center_transform = new Snap.Matrix().translate(0, 80).scale(1.8, 1.8, 260, 0); 
    var shard_left_transform = new Snap.Matrix().translate(-45, 30).scale(1.3, 1.3, 220, 0); 
    var shard_right_transform = new Snap.Matrix().translate(50, 40).scale(1.3, 1.3, 300, 0).rotate(-16); 
    var stars_center_transform = new Snap.Matrix().translate(0, -80).scale(0.8, 0.8, 260, 0); 
    var stars_left_transform = new Snap.Matrix().translate(-70, -30).scale(0.7, 0.7, 220, 0); 
    var stars_right_transform = new Snap.Matrix().translate(80, -30).scale(0.7, 0.7, 300, 0).rotate(-16); 

    //capture svg elements in variables 
    var greenline = renderer.select('.green-line'); 
    var starsbg = renderer.select('.stars-background').transform(stars_bg_transform); 
    var shard_center = renderer.select('.shard-center').transform(shard_center_transform).attr({'fill-opacity': 0.8}); 
    var shard_left = renderer.select('.shard-left').transform(shard_left_transform); 
    var shard_right = renderer.select('.shard-right').transform(shard_right_transform); 
    var stars_center = renderer.select('.stars-center').transform(stars_center_transform); 
    var stars_left = renderer.select('.stars-left').transform(stars_left_transform); 
    var stars_right = renderer.select('.stars-right').transform(stars_right_transform); 

    //define original positions of svg elements as a "null" transform - this is the end state of the animations 
    var origin = new Snap.Matrix().translate(0, 0).scale(1); 

    //initialise animations 
    starsbg.animate({'transform': origin}, 3000, mina.easeinout); 
    shard_center.animate({'transform': origin, 'fill-opacity': 1}, 3000, mina.easeinout); 
    shard_left.animate({'transform': origin}, 3000, mina.easeinout); 
    shard_right.animate({'transform': origin}, 3000, mina.easeinout); 
    stars_center.animate({'transform': origin}, 3000, mina.easeinout); 
    stars_left.animate({'transform': origin}, 3000, mina.easeinout); 
    stars_right.animate({'transform': origin}, 3000, mina.easeinout); 
    greenline.animate({'stroke-opacity': 1}, 1000); 
}); 

会发生什么事是，开始状态的初始化很好，但是动画本身不会运行，并在几秒钟的延迟之后简单地弹出到结束状态。

有没有更好的方法来处理这些动画，以便它们表现更好？

我是否需要编写自定义绘制循环，然后使用requestAnimationFrame或类似的方法调用它？ （我对这个概念很陌生，帮助！）

Answer 1

如果您仍然对这个问题感兴趣，我遇到了与Snap可能相关的类似问题。该库没有正式支持将antrix作为transform参数传递给animate（）仅传递transform（）。它通常有效，但有时候不会，如果你有错误的数据，有时候会补间。因此，直到他们在库中解决此问题，您需要替换表单中的电话：

// if origin is a matrix and not a string 
starsbg.animate({'transform': origin}, 3000, mina.easeinout); 
// replace with this 
starsbg.animate({'transform': origin.toTransformString() }, 3000, mina.easeinout);