Question

大家好我试图找出如何使用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并且知道如何使用它们制作动画，那么你可以帮助我吗？非常感谢任何帮助。

Answer 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/

上找到了此代码

Snap SVG动画

1 个答案: