Анимировать svg картинку на js, что лучше для этого подходит?

Есть картинка svg take.ms/ueHCf на ней различные объекты, надо что бы некоторые из них были постоянно в движение, некоторые, должны анимироваться при определенных действиях пользователя. по их окончанию должен например открываться попап. Т.е. надо взаимодействие svg уже готового и js. В какую сторону копать, что лучше для этого подойдет, и что бы поддерживалось и мобильными и ие10+?
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега Вёрстка
Creative frontend developer
1. CSS анимации, которые упомянули выше, стоит использовать осторожно - IE имеет проблемы с интеграцией их и SVG. Такой вариант не всегда подойдет.
2. SMIL... Процитирую MDN: "Chrome 45 deprecated SMIL in favor of CSS animations and Web animations". Пока все работает. Что будет дальше - кто его знает.
3. На VanillaJS делать хитрые анимации с SVG достаточно сложно. Вариант с генерацией CSS анимации из JS имеет те же проблемы, что и использование CSS анимаций в чистом виде.
4. Почему-то у нас народ любит хвалить GSAP. Но есть и другие инструменты, например Anime.js - меньше пафоса, свою задачу решает. Я бы отдал предпочтение второму варианту, но тут уж на вкус и цвет...
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HamSter007
@HamSter007
HTML/CSS верстальщик
1. Одним лишь css можно анимировать svg пример, codepen пример
2. smil анимация пример
3. обычный jacascript/jquery codepen пример
4. плагин использовать codepen пример 1, codepen пример 2, codepen пример 3, codepen пример 4
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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