javascript - Snap svg 多个动画 - 性能问题

Question

这是我第一次尝试使用 javascript/jquery/snap 制作 SVG 动画，我发现动画即使在一些较新的设备上也不能很好地运行(在 iPhone 4s 上进行测试)。看起来像是性能问题？

我正在尝试为嵌入到我的 html 中的 svg 中的多个分组元素制作动画。它们在页面加载时呈现动画，这是相关代码。

注意:我的 svg 是在动画的“结束”状态下在 illustrator 中绘制的，因此我使用捕捉来偏移它们，然后将其动画回到自然位置

$(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 中遇到了可能相关的类似问题。该库不正式支持将矩阵作为变换参数传递给 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);