0

我想找到并学习一个 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() {

},

});
4

2 回答 2

3

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来适应它。

于 2013-04-22T06:17:53.397 回答
0

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

于 2013-05-02T00:31:15.177 回答