Web-design, инструменты для анимации

Svg анимация

Lottie

Самый нужный инструмент для анимации в интернет (а также в iOS и Android). Плагин Lottie for Web от компании AirBnb – это универсальный проигрыватель анимации из файла JSON. Плагин работает на основе другого инструмента – Boddymoving (конвертера анимации из After Effects в JSON, автор – Эрнан Торриси). Файл JSON содержит все объекты и всю анимацию, а плагин Lottie for web связывает этот файл с плеером, написанным на JavaScript. В итоге за секунды (!) получаем легкую масштабируемую векторную анимацию на веб странице, созданную в привычном видео-редакторе. Про установку плагина читайте здесь. Живой пример использования плагина – здесь. Пошаговая инструкция использования плагина и экспорт анимации здесь.

Существует специальный ресурс в интернете, где можно посмотреть preview вашей анимации. Для просмотра анимации откройте этот ресурс и перетащите на него ваш JSON файл экспортированный из Adobe After Effects. 

SVGOMG

Иногда требуется внедрить SVG код прямо на страницу. Проблема возникает, когда таких файлов нужно внедрить на страницу больше одного. Дело в том, что каждый SVG содержит свое описание стилей, но название стилей часто одинаковое. Получается, тот объект, который на странице находится ниже (или позже загрузился), переписывает стили того объекта, который находится выше.

Чтобы это решить есть инструмент, который поможет быстро избавится от стилей (Переключатель Style to Attributes). Вместо стилей SVG будет использовать атрибуты (свойства).

Также, этот инструмент удалит много лишней информации из SVG (опционально). Для большинства SVG рисунков можно без ущерба для графики уменьшить точность до 1 (Precision to 1).

Shapeshifter.design

При проектировании интерфейсов, часто бывает важно сохранить независимость от внешних плагинов и библиотек, а также, по-возможности, сохранить минимальный размер (вес) графики. Данный инструмент подойдет для не очень сложной анимации SVG. Зато размер выходной анимации будет небольшим и для ее проигрывания не потребуется никаких плагинов. Подробная статья о принципах работы с анимацией в SVG. На этих принципах строится работа данного инструмента.

Статья, как создавалась анимация Пина с помощью выше названного инструмента.

Анимация персонажей в After Effects

Rubberhouse

Супер инструмент (правда платный). Инструмент с интуитивно понятным интерфейсом для риггинга персонажей. Здесь примеры того, что можно с ним делать.

Идеи

Большое количество идей для анимации – на этом сайте. Сам проект закрыт, но остался интересный архив анимированной графики. Возможно кого-то вдохновит.

MotionCorpse

Еще один сайт с большим количеством абстрактной анимации для вдохновения. Для некоторых проектов выложены исходники. Т.е. можно скачать и посмотреть как это сделано!

Еще больше про 2д-анимацию – здесь. Почитать/посмотреть про 3д-анимацию – здесь.

Интересная подборка советов для тех, кто занимается анимацией UI.