Как я могу анимировать мои файлы SVG с помощью библиотеки JS - Идеально ли для этого бонсай?

Я хотел бы найти и изучить библиотеку js, которая позволит мне анимировать файлы SVG, которые я создал в Illustrator. У меня большой опыт работы с After Effects и анимацией, поэтому я ищу библиотеку JS, которая даст мне много возможностей для анимации.

Я проверяю BonsaiJS прямо сейчас, и мне интересно, может ли кто-нибудь посоветовать мне, позволит ли Bondsai мне анимировать SVG-файлы, и если да, то покажите мне, как начать делать это.

Прямо сейчас у меня есть SVG, встроенные в графические теги на моем сайте. Я быстро написал пример кода, чтобы проиллюстрировать свои мысли о том, как анимировать мои SVG с помощью Bonsai. Но есть ли какие-то особые требования для работы с существующими файлами SVG, а не с фигурами? Извините за смутное звучание, формат SVG и библиотеки анимации JS являются новыми для меня. Простое указание мне на учебник по анимации SVG с библиотекой js было бы огромной помощью.

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

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

},

});
Источник

2 ответа

Решение

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
      });
    });
  }
});

Я бы посоветовал поиграть с вашими активами и API-интерфейсом Bonsai Animation на http://orbit.bonsaijs.org/ чтобы привыкнуть к нему.

Источник

Я бы порекомендовал вам начать с Рафаэля, а не с Бонсая, чтобы начать работать с SVG. Это более популярно, и вы найдете больше людей, которые могут ответить на ваши вопросы. Кроме того, отладка JS, которую вы используете с Bonsai, очень сложна.

Источник
Другие вопросы по тегам