Разберём этот эффект на примере удара сердца!

Уровень 1

Начнем с анимации параметра Scale у сердца.
Важно понимать, что для придания движению реалистичности, у основного действия (в данном случае удара) есть ещё две фазы:
подготовка и последствие. Обе стоит учитывать, чтобы анимация выглядела живой и естественной.

Уровень 2

Добавляем анимацию ↔️Position для большей динамики.
Плюс — анимируем ↔️Path у сердца, чтобы передать его эластичность.
Тут важно учитывать характер элемента: в некоторых случаях такая деформация может быть неуместной.

Уровень 3

Можно было остановиться на втором уровне, но хочется добавить красочности и выразительности.

🎨Добавляем резкую смену цвета в ключевой момент удара.
Чтобы белое сердце не выглядело одиноко в пиковом моменте — добавим уходящую белую обводку.
Для этого используем анимацию ↔️Path (увеличиваем форму) и 🖍Stroke Width (для плавного исчезновения).
И в завершение — разлетающиеся сердечки, поворот которых реализован простым изменением ↔️Path.

❤️ Наш эффект удара сердца готов!

📁 Проект с эффектом — в комментариях