Svg анимация с помощью Lottie
Самый нужный инструмент для переноса анимации из After Effect в интернет и мобильные приложения. Плагин Lottie for Web от компании AirBnb.
Это универсальный проигрыватель анимации из файла JSON. Файл JSON содержит все объекты и всю анимацию, а плагин Lottie for web связывает этот файл с плеером, написанным на JavaScript. В итоге за секунды получаем легкую масштабируемую векторную анимацию на веб странице, созданную в привычном видео-редакторе.
- Про установку плагина читайте.
- Живой пример использования плагина.
- Пошаговая инструкция использования.
- Страница проекта Lottie.
Существует специальный ресурс в интернете, где можно посмотреть preview вашей анимации. Для просмотра анимации откройте этот ресурс и перетащите на него ваш JSON файл экспортированный из Adobe After Effects.
Растущий конкурент для Lottie – Rive (онлайн векторная анимация + визуальное программирование событий)
Ссылка на редактор Rive.app
Плагин для анимации в Figma – Aninix
Страница плагина здесь. Встраивает в figma timeline.
Очищаем SVG от лишней информации. Делаем все стили инлайн-атрибутами.
Иногда требуется внедрить SVG код прямо на страницу. Проблема возникает, когда таких файлов нужно внедрить на страницу больше одного. Дело в том, что каждый SVG содержит свое описание стилей, но название стилей часто одинаковое. Получается, тот объект, который на странице находится ниже (или позже загрузился), переписывает стили того объекта, который находится выше.
Чтобы это решить есть инструмент SVGOMG, который поможет быстро избавится от стилей (Переключатель Style to Attributes). Вместо стилей SVG будет использовать атрибуты (свойства). Также, этот инструмент удалит много лишней информации из SVG (опционально). Для большинства SVG рисунков можно без ущерба для графики уменьшить точность (precision) до 1.
Эффекты
Создание простого анимированного эффекта для векторного изображения
Анимация персонажей в After Effects
Супер инструмент (платный). Инструмент с интуитивно понятным интерфейсом для риггинга персонажей. Здесь примеры того, что можно с ним делать.
Идеи
Большое количество идей для анимации – на этом сайте. Сам проект закрыт, но остался интересный архив анимированной графики. Возможно кого-то вдохновит.
Еще один сайт с большим количеством абстрактной анимации для вдохновения. Для некоторых проектов выложены исходники. Т.е. можно скачать и посмотреть как это сделано!
Еще больше про 2д-анимацию – здесь. Почитать/посмотреть про 3д-анимацию – здесь.
