Кодинг
★ Рубрика: Кодинг
★ Тема: SVG

Пример svg-анимации - работа механизма

Здесь приведен пример анимации планетарного механизма, реализованный с помощью svg-графики. Ни скрипты, ни дополнительные библиотеки для реализации этого примера не использовались. Только чистый svg-код.
svg-анимация механизма пример интерактивной анимации Старт Стоп
Для запуска механизма нажмите кнопку "Старт", а для остановки - кнопку "Стоп". Такую анимацию, например, можно использовать для демонстрации на учебном сайте по механике. Здесь применена базовая декларативная анимация (SMIL), которая скорее всего не будет работать в Internet Explorer. Да и это уже не важно, поскольку скорее всего этот браузер сойдет с дистанции в ближайшее время. На сегодняшний день существует уже не один способ создавать SVG анимацию. Есть большое число специальных библиотек, например, Snap.svg или SVG.js упрощающих работу с анимацией. Но и в чистом виде, можно довольно быстро и эффективно реализовывать вполне сложные задачи анимации, вплоть до создания игр. Для тех, кого заинтересовала возможность нарисовать что-то подобное, приведем ниже код, созданной здесь движущейся картинки. Исходник кода найден где-то на просторах интернета, а первоисточник, кажется находится здесь. Но, увы, анимация не во всех браузерах работает так как хотелось бы. Например в старых Операх залипают и не работают кнопки старта и остановки.
 Похожие публикации: SVG
Комментариев 1
  1. avatar Я рад, что вам понравился мой пример анимации планетарного механизма, который был написан мною в 2014 году.
    Прошу вас указать источник, откуда взят пример - https://svg-art.ru • Ответил: Alexandr   • 08.06.2016 в 19:33 Спам

Войдите, чтобы добавить Ваш ответ. [ Регистрация | Вход ]