📖 Принципы создания анимаций

Принципы

Основные тезисы:
  • Привлечение внимания к важным элементам.
  • Обучение взаимодействию и работе с элементами.
  • Создание эмоциональной связи.
  • Подчёркивание стиля бренда.
  • Давать фидбэк.

Выписав эти тезисы, я постарался выделить два принципа, которые можно в них увидеть:
  • Информативность.
  • Выразительность.

Информативность
Анимация должна рассказывать пользователю о работе и взаимосвязях элементов. Сообщать об обратной связи. Обучать его взаимодействиям и фокусировать его внимание на важных и новых объектах. 

Выразительность
Анимация должна приносить пользователю эмоциональную связь и подчёркивать стиль бренда.

Способы применения

Рассказать о новом
Для привлечения внимания к объектам в виде иконки можно использовать эффект Trim Path. К примеру, у нас появилась новая функция в приложении, и чтобы привлечь внимание, к ней применяется эффект Trim Path.
Показать смену состояния
Смена состояний объекта происходит через взаимодействие с объектом, в тоглах мы нажимаем и видим, как он был включён, или как при выборе чекбокса в нём рисуется галочка. Так же в анимации иконок: чтобы показать переход одного состояния в другое, можно использовать морфинг объекта. Когда значок трансформируется из одного состояния в другое. 

Базовые свойства

Продолжительность анимации

Small
Применяется для анимаций иконок, переключателей, чекбоксов.
Общая длительность: 120–240 ms.

Medium
Элементы с большими переходами, но не полный экран. К примеру, открытие Actions Sheet.
Общая длительность: 240–320 ms.
При скрытии объекта с экрана уменьшайте длительность на 40 ms.

Large
Анимации, которые занимают большую часть экрана или фулскрин.
Общая длительность: 320–560 ms
При скрытии объекта с экрана уменьшайте длительность на 40ms.

Easing процессе)

Функция плавности, определяет скорость движения анимации, делая её более реалистичной. Рекомендуется всегда применять одну из функций в своих анимациях, иначе анимация будет с одной скоростью, а это выглядит неестественно. Любой объект в нашем мире не может двигаться с линейной скоростью. Есть простое правило: если не знаете какую функцию использовать, применяйте ease-in-out.

Ease In
Медленный старт и быстрое завершение.

Ease Out
Быстрый старт и медленное завершение.
cubic-bezier(0.32, 0.72, 0, 1)
cubic-bezier(0.3, 0.7, 0, 1)