Оригинал: designbetter.co/animation-handbook
Анимации заполняют пробелы между действием и результатом. Они соединяют части интерфейса в единое целое и помогают быстрее в нём освоиться.
Лучше показывать, чем рассказывать — визуально объяснять причины и последствия действий.
Основные элементы интерфейса всегда должны быть на виду, тогда как второстепенные можно убрать на второй план и указать на них с помощью анимации.
Проектируя анимацию, полезно представлять, как то, что мы анимируем, повело бы себя в реальном мире.
Стейджинг — это анимация, которая предшествует основной. Её задача — привлечь внимание пользователя и подготовить его к изменениям.
Стейджинг
Follow-through — это пружинящая анимация. Объект слегка перескакивает точку, на которой он должен остановиться, а потом возвращается обратно. Такой эффект помогает оживить анимации.
В Android есть OvershootInterpolator, который помогает добиться эффекта follow-through, но анимация получается слишком резкой. Лучше закодить его вручную с помощью пары дополнительных анимаций или написать кастомный Inerpolator.
Follow-through
Второстепенная анимация поддерживает основную анимацию и делает её более человечной. Такую анимацию можно использовать, когда мы тащим элемент по экрану так далеко, что основное действие заменяется другим (например, отмена голосового сообщения в Telegram).
Анимируется не только элемент списка, но и иконки под ним
Параллельное действие — это анимация, которая происходит параллельно с основной, но с небольшой задержкой. Такую анимации иногда можно видеть в списках, когда каждый элемент подтягивается за остальными. Они обозначают связь между элементами и делают общую картину менее нагруженной. С такими анимациями важно не переборщить — они всё ещё должны восприниматься, как одно движение и быть почти незаметными.
Задержка каждого элемента должна быть меньше, чем у предыдущего, как будто они догоняют друг друга. У последнего элемента анимацию можно сделать чуть более долгой и выраженной, чтобы усилить эффект от картины в целом.
