0

大家好我想弄清楚如何使用Snap SVG编写动画。

我知道有很多方法可以实现我正在寻找的东西，这实际上只是一个简单的动画，但不确定我做错了什么。

所以我有几个 SVG 文件，我想在点击事件上制作动画，但我已经尝试了几次，但没有任何动画效果。

目前这就是我所拥有的：

<script>
  var paper= Snap(5000,5000);
  var c = paper.image("clock machine.svg", 100,100,500,480);
  var b = paper.image("new years ball.svg", 306,20,200,200);
  var l = paper.image("lights.svg",306,20,200,200);
  var p = paper.image("button.svg", 158,508,35,35);
  var s = paper.image("LCD screen mask.svg", 265,454,263,85);
  var g = s.group(b,l);
  var clickFunc = function ()  {
    g.transform ('');
    g.animate({transform : "t0,200" }, 2000, mina.backin );
  }
  g.click( clickFunc );
</script>

图像加载并似乎可以工作，但我无法让它们正确设置动画。最终，我希望在用户单击 var p 时为 var B 和 var L 组设置动画。

如果有人熟悉 snap svg 或 raphael js 并且知道如何使用它们制作动画，也许你可以帮助我？任何帮助深表感谢。

4

1 回答 1

1

为了在 SNAP 中为 SVG 设置动画，您应该使用类似于 

Snap.load("image.svg", function (f) {
  g = f.select("g");
  s.append(g);
});

我在http://www.developerdrive.com/2014/01/introducing-snap-svg/上找到了这段代码

于 2014-03-15T22:53:44.160 回答