CoDeR2006
@CoDeR2006
TypeScript

Как реализована анимация SVG элементов (персонажей) в web app?

Меня заинтересовала реализация анимации в Web Applications (веб сайтах). Увидел анимацию персонажей в duolingo, думал это gif, посмотрел код, а там рил перемещаются svg элементы. Так же прикреплю на скриншоте svg анимацию ракеты которая взлетает в верх пролетая много svg элементов.
И так, суть вопроса - какая библиотека используется для такой анимации как в duolingo. Могу предположить что что-то на подобии gsap (пол секунды погуглил), у кого есть опыт работы с веб анимацией, поделитесь, пожалуйста.
666f060545e2d776328118.png
666f0623a1eef127883632.png

p.s Я пишу на NextJS желательно что бы библиотека хорошо работала с ним.
  • Вопрос задан
  • 1302 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy Куратор тега JavaScript
Creative frontend developer
Могу предположить что что-то на подобии gsap

Если рассматривать эту задачу в целом, без привязки к конкретному сайту, то это задача по созданию мультиков, в больших количествах, на потоке, в рамках сформированной дизайнерской системы. Делать это за счет фронтендеров - такая себе идея. Сложно всех синхронизировать, очень много накладных расходов. Это будет реально дорогая разработка. И разработчики нужны очень прошаренные по части анимаций, чтобы они были со всей командой дизайнеров на одной волне. Таких днем с огнем не найдешь. Более простой и дешевый подход состоит в том, чтобы этим всем занимались моушен-дизайнеры в рамках экосистемы Lottie. А со стороны разработки мы только интегрировали готовые сценки в сайт или приложение. В последние годы обычно все так и делают. Наш стек здесь не имеет значения, равно как и умения разработчиков.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ImagineTables
Если анимацию должен создать непрограммист-аниматор на основе векторной графики (может, ещё и нарисовать векторную графику самому), то у него и надо спрашивать, каким инструментом он пользуется и во что вебообразное он может экспортировать свою анимацию.

Насколько я знаю, сейчас упомянутый выше Lottie это как раз один из стандартов для описания анимации.

Если подходить к анимированию со стороны кода, то сам я прописываю анимации тупо в CSS.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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