Как сделать анимацию хвоста в Lottie

Для анимации хвоста, состоящего из одной линии с двумя обводками, расположенными друг под другом, отлично подходит скрипт Create Nulls From Path.
Скрипт автоматически создаёт null-объекты в каждой точке контура (path) и связывает их с ним. В результате вы управляете формой линии не напрямую через path, а через отдельные управляющие точки.

Это позволяет анимировать каждую точку линии независимо друг от друга:
– создавать изгиб перемещения точек,
– делать движение более живым и естественным,
– создавать запаздывание движения между частями формы,
– добавлять вторичное движение без ручной прорисовки
– и просто работать быстрее и удобнее

Такого эффекта невозможно добиться при обычной анимации path вручную.

После завершения анимации не забудьте запечь анимацию, чтобы Bodymovin корректно её отрендерил.
Запекание превращает движение null-объектов в ключи самого path – буквально создавая ключ на каждом кадре. Это необходимо, потому что Bodymovin не поддерживает выражения.
Чтобы снизить размер файла и количество ключей, рекомендуется перед запеканием уменьшить fps композиции

Таким способом можно создавать любые хвосты, верёвки, цепи и тп.
Метод идеально подходит для линий с небольшим количеством точек.
Например, я использовал этот способ для анимации лески в этом подарке 🍀

А чтобы вы могли наглядно увидеть процесс создания хвоста, я записал для вас небольшой видео-гайд.
Видео я опубликую в нашей группе Класс Идей, где мы общаемся на темы анимации и Lottie.

Группа открыта для всех – присоединяйтесь, задавайте вопросы и прокачивайтесь в анимации! 🙌

📁Файл проекта и скрипт уже лежат в комментариях!