За отсутствием фантазии, выдернем кейс из реального проекта. Дано: послайдовый сайт и бактерия, которую должно уничтожить лекарство. На первом слайде бактерия появляется из фейда. На втором - она просто находится на виду. На третьем сбоку из точки начинает расти спираль/завиток (как бы лекарство) и, как ластик, стирает бактерию со слайда. При этом на протяжении всей анимации на каждом слайде бактерия болтает ногами.
Для наглядности я подготовил демо-страничку, но не стал воспроизводить послайдовую систему, а для простоты повесил все этапы анимации на обычные кнопки. Демо работает только в Chrome и Firefox, т.к. я не транспилировал ES6. Вверху страницы расположены 2 ряда кнопок: в нижнем ряду находятся кнопки воспроизведения, в верхнем - дополнительные кнопки управления анимацией. Пока что нас интересует только нижний ряд. Кнопка "Полностью [0, 240]" запускает анимацию целиком от начала до конца. Остальные кнопки запускают отрезки анимации, соответствующие слайдам из реального проекта: отрезок 1 - первый слайд, отрезок 2 - второй слайд, отрезки 3 и 4 - третий слайд.
Перед началом нового проекта, необходимо продумать логику/механику анимации. Отталкиваться нужно от того, как мы хотим управлять анимацией с помощью js. Для этого надо знать на что способен Lottie. Lottie умеет воспроизводить и останавливать анимацию с любого временного отрезка или фрейма. Также любой отрезок анимации можно ускорить или замедлить в n раз.
Общая идея состоит в том, чтобы разбить нашу анимацию на логические отрезки, которые мы будем запускать или останавливать, когда нам будет это нужно. Опытным путем я пришел к тому, что длительность каждого отрезка должна быть равна 1-ой секунде. А количество кадров в секунде должно быть круглым, например, 60. Таким образом, наш базовый отрезок будет равен 60 кадрам/с., что значительно упростит нам работу как в AE, так и в js. При этом, учитывая возможности Lottie, мы без проблем сможем ускорять или замедлять отрезки во столько раз, во сколько будет нужно.
Итак, в нашей анимации выделим следующие отрезки:
- бактерия появляется из фейда
- бактерия какое-то время на виду
- спираль начинает расти из точки в сторону бактерии и стирает ее
- спираль, продолжая расти, уходит в фейд
При этом бактерия должна болтать ногами непрерывно на протяжении первых трех отрезков.
Таким образом, мы должны получить анимацию общей длительностью 4 секунды, внутри которой будут 4 односекундных логических отрезка.