Question

我想找到并学习一个js库，它允许我为我在Illustrator中创建的SVG文件制作动画。我在After Effects和动画中有很大的背景，所以我正在寻找一个能给我很多动画功能的JS库。

我现在正在查看BonsaiJS，我想知道是否有人可以告诉我Bondsai是否允许我为SVG文件制作动画，如果有，请告诉我如何开始这样做。

现在，我的网站中的图像标签中嵌入了SVG。我已经快速写了一些示例代码来说明我如何使用盆景动画我的SVG。但是，处理现有的SVG文件而不是形状有什么特殊要求吗？很抱歉听起来模糊的SVG格式和JS动画库对我来说都是新的。简单地指向我使用js库动画SVG的教程将是一个巨大的帮助。

<img src="graphic.svg" id="graphic">

bonsai.run(document.getElementById('graphic'), {
code: function() {

},

});

Answer 1

Bonsai为两者公开API，嵌入图像并为其设置动画。

bonsai.run(document.body, {
  width: 300,
  height: 300,
  code: function() {
    // url that points to the image
    var url = 'https://upload.wikimedia.org/wikipedia/commons/7/72/Variable_Resistor.svg';
    new Bitmap(url).on('load', function() {
      // adjust size
      this.attr('width', 200);
      // add it to the stage
      this.addTo(stage);
      // animate arbitrary attributes
      this.animate('3s', {
        x: 200
      });
    });
  }
});

我建议您在http://orbit.bonsaijs.org上使用您的资源和Bonsai的动画API来熟悉它。

工作示例：http://jsbin.com/icuqon/2/edit
动画文档：http://docs.bonsaijs.org/overview/Animation.html

Answer 2

我建议你先从Raphael而不是Bonsai开始使用SVG。它更受欢迎，你会发现更多的人可以回答你的问题。另外，与盆景一起使用的调试JS非常困难。

如何使用JS库为SVG文件设置动画 - 盆景是否适用于此？

2 个答案: