Lottie-анимация звёзд для интерфейса на основе SVG и видео-референса

Описание

Клиенту требовалось создать Lottie-анимацию в формате JSON на основе приложенного видео-референса, но с использованием геометрии и композиции из SVG-макета. Основная задача заключалась в том, чтобы точно перенести расположение звёзд из исходного SVG, сохранить чистоту и лёгкость анимации, а также адаптировать её под формат, удобный для интеграции в цифровой интерфейс.

Позже в проект были внесены уточнения по прозрачности: при уменьшении каждой звезды opacity должно снижаться до 0,7, а при увеличении возвращаться к 1.

Решение

Я проанализировал видео-референс, чтобы понять характер движения, темп, пульсацию и общую динамику анимации. После этого перенёс композицию из SVG в Lottie-формат, сохранив исходное расположение звёзд и адаптировав их под векторную JSON-анимацию.

Далее я настроил анимацию так, чтобы каждая звезда работала как отдельный элемент с собственной фазой движения. Это позволило сделать общую композицию более живой и естественной. Для звёзд был задан белый цвет, а также проработана связка между масштабом и прозрачностью: при уменьшении элемента прозрачность плавно снижалась до 0,7, а при увеличении восстанавливалась до 1. Такой подход помог сделать анимацию более деликатной и визуально приятной.

Результат

В итоге получилась аккуратная и лёгкая Lottie-анимация, полностью готовая к использованию в интерфейсе. Все звёзды расположены в соответствии с SVG-исходником, визуально соответствуют референсу и корректно анимируются в JSON-формате.

Презентация проекта