@svgishe
Разработчик, дизайнер, SEO.

Как лучше анимировать svg?

Как лучше анимировать svg и почему ?
Совсем не давно начал делать сайты на с svg, знаю что есть куча способов анимировать svg но не знаю что лучше выбрать.
1. Js
2. js + библиотека
3. Использовать стандартную анимацию svg.
4. с помощью css3
Может еще какие-то способы есть ?
А вы как анимируете svg ?

canvas не из этой темы, может чуть позже научусь совмещать)

Спасибо!
  • Вопрос задан
  • 4440 просмотров
Решения вопроса 4
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Зависит от того, что именно вы хотите анимировать в svg. Кому то трансформаций хватит, а кому-то нужны сложные анимации для path со всякими кастомными приблудами.
Универсальные варианты - GSAP и D3. Гсап чисто заточен под анимации, и там имеется большое количество готовых решений/плагинов для свг. Если вам необходимо сделать крутую и комплексную анимацию, то это наверное самый оптимальный вариант. D3 тоже хорош, но он больше рассчитан на работу с данными, и для всяких красивяшек-анимашек не особо подойдет.
Есть еще velocityJS и подобные либы, но они все по сути дела являются лайт-версиями Гсапа (при том что у самого гсапа есть более легкие его версии).
CSS умеет многое, с ним можно даже анимировать отрисовку path и подобные штуки, но он вообще не дружит ни с какими ИЕ, когда дело касается работы с path (+ в ФФ имеются проблемы с transform-origin). Примеры баловства с svg лоадерами на чистом css:
codepen.io/suez/pen/myvgdg
codepen.io/suez/pen/ogmMOM
codepen.io/suez/pen/MwJdRy

Если вам необходимо сделать что-то совсем уж кастомное и крутое, и при этом вы совершенно не уверены что либы в этом вам помогут (либо нет такого функционала, либо пока научитесь его юзать - сойдете с ума), то придется писать велосипеды на js. requestAnimationFrame и в бой. Вот два велосипеда для примера - codepen.io/suez/pen/oXLroX и codepen.io/suez/pen/emjwvP

Ах да, еще есть SMIL анимации (которые прямо внутри SVG описываются) и они умеют очень многое (во многом даже удобнее js получаются, без потери в функциональности), но от них уже медленно отказываются современные браузеры (да и к тому же они никогда не поддерживались в IE). Так что их можете обходить стороной.
Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com
Конечно же на D3.js. Очень мощная библиотека для работы с SVG. Супер упрощает всю связанную с ней анимацию.
Если нужно что-то другое, то можно посмотреть еще на:
greensock.com/tweenmax
paperjs.org

P.S. Почему не вручную? Все равно придется написать какую-то перекрученную функцию для работы с path.
Ответ написан
@GreatRash
Вообще есть мнение, что для SVG круче SMIL нет ничего.
Ответ написан
@Sashjkeee
f-e
Ну все же зависит от задач.
Вообще, как мне в свое время сказали, анимации делай на css, если ее нельзя сделать на css, тогда уже в бой идет js
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы