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

Принципы

Основные тезисы:

Привлечение внимания к важным элементам.

Обучение взаимодействию и работе с элементами.

Создание эмоциональной связи.

Подчёркивание стиля бренда.

Давать фидбэк.

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

Информативность.

Выразительность.

Информативность

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

Выразительность

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

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

Рассказать о новом

Для привлечения внимания к объектам в виде иконки можно использовать эффект 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)

​​Принципы

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

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

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

​​Easing (в процессе)

Принципы

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

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

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

Easing (в процессе)