Решила записать небольшой кусочек процесса из недавнего проекта. На видео 1 час 22 минуты моей работы над Lottie-анимацией ускорены до 30 секунд.
Заодно расскажу, что такое Lottie-анимация и почему её так любят разработчики.
Lottie — это JSON-файл с анимацией. Его главный плюс для заказчика — очень маленький вес. По сравнению с видео или GIF он практически не влияет на скорость загрузки сайта. А ещё такая анимация полностью векторная, поэтому выглядит идеально чётко на любых экранах и легко запускается по клику, наведению или во время скролла.
Но есть и обратная сторона. Lottie не поддерживает эффекты After Effects. Если в обычной видеоанимации многие задачи решаются парой кликов, то здесь их приходится делать вручную.
Например, в этом проекте был анимированный счётчик. Для видео я бы просто использовала эффект и экспрешн. Но для Lottie пришлось анимировать каждую цифру вручную с помощью ключевых кадров.
И далеко не все задумки можно реализовать. Чем проще анимация, тем лучше. Сложные эффекты, градиенты, блики и многие другие вещи Lottie просто не поддерживает.
Так что для анимации интерфейсов, иконок и несложных элементов сайта Lottie практически идеальный вариант. А вот если нужна сложная визуальная магия, то лучше использовать видео.
П.с.: мне понравилась идея показывать работу через скринкаст. Завтра буду делать новый ролик для московского метро ко дню строителя. И анимацию для Ростикс. Записать?