1

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

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

注意：我的 svg 是在动画的“结束”状态下在 illustrator 中绘制的，所以我使用 snap 将它们偏移，然后动画回到它们的自然位置

$(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 或类似的东西调用它？（我对这个概念很陌生，帮助！）

4

1 回答 1

0

如果您仍然对此事感兴趣，我遇到了一个与 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);
于 2014-12-21T17:49:59.827 回答