Видео подготовлено для телеграм канала о продуктовом дизайне dui — https://t.me/duiux

Показал, как можно сделать анимацию твиттерского лайка в АЕ с учетом экспорта для Lottie.

Содержание:
0:00 — О чем видео
0:25 – Смотрим референс
0:57 – Шаг 1 - Появление сердца
1:46 – Шаг 2 - Появление круга
2:50 – Шаг 3 - Добавляем вырез в круге
3:06 – Про ограничения возможностей Lottie
3:22 – Шаг 3.1 - Делаем вырез в круге с помощью маски
3:56 – Важное примечание
4:30 – Шаг 3.2 - Продолжаем делать вырез
5:16 – Шаг 4 - появление второго сердца
6:32 – Шаг 4.1 - динамичная смена цвета круга
7:24 – Шаг 5 - текст +1 на сердце
7:42 – Шаг 5.1 - про якорную точку
8:26 – Шаг 5.2 - продолжаем анимацию появления текста
9:02 – Шаг 6 - добавляем баунс эффект для сердца
10:56 – Шаг 7 - Доделываем анимацию текста
11:13 – Шаг 8 - вылет частиц плюсов у сердца
12:33 – Шаг 8.1 - про родительские слои
14:53 – Итог. Смотрим полученный результат
15:08 – Прощаюсь

Ссылки:
Таблица поддержки свойств Lottie — https://lottiefiles.com/supported-features…