javascript - 如何使用 JS 库为我的 SVG 文件制作动画 - Bonsai 是理想选择吗？

Question

我想找到并学习一个 js 库，它允许我对在 Illustrator 中创建的 SVG 文件进行动画处理。我在 After Effects 和动态图形方面拥有丰富的背景，因此我正在寻找一个能够为我提供大量动画功能的 JS 库。

我现在正在查看 BonsaiJS，我想知道是否有人可以建议我 Bondsai 是否允许我对 SVG 文件进行动画处理，如果允许，请告诉我如何开始执行此操作。

现在，我在整个网站的图像标签中嵌入了 SVG。我很快编写了一些示例代码来说明我对如何使用 Bonsai 对 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