Question

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

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

注意：我的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相似的问题。该库并没有正式支持将矩阵作为变换参数传递给animate（）only 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);

Snap svg多个动画 - 性能问题

1 个答案: