dui

Анимации в интерфейсах

Я обожаю интерфейсную анимацию. Залипаю при создании, как интерфейсной так и обычной анимации с иллюстрациями.

В своей статье, автор рассказывает о всех аспектах анимации в интерфейсах. Ссылка на статью в конце сообщения. В статье много гифок и видео, мой комп немного закипел при открытии.

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

- Оптимальная скорость для интерфейсной анимации — от 200 до 500 мс.

- Размер мобильных устройств определяет продолжительность анимации. Но это не значит, что чем больше экран, тем продолжительней анимация.

- Анимация в вебе должна быть короче в два раза, учитывая быструю скорость загрузки сайта. Иначе пользователь будет думать, что его комп тормозит. Важно! Этот совет не применяется для декоративной анимации.

- Продолжительность анимации должна изменяться в зависимости от того, какое расстояние преодолевает объект на экране и какие у него размеры.

- Bounce effect - стоит применять лишь когда нужно привлечь внимание.

- Забудьте Motion Blur для интерфейсов. Его сложно повторить на устройствах. Движения должны быть чёткими.

- Однотипный контент, карточки, список писем должен появляться с короткой задержкой от 20 до 25 мс.

- Linear стоит применять если объект не меняет своё положение. Например при смене цвета и прозрачности.

- Ease In. Медленное появление и быстрое завершение анимации. Это могут быть системные уведомления или просто карточки интерфейса. Но стоит отметить, что такой тип кривой нужно использовать, когда объекты покидают экран навсегда, и мы не можем их повторно вернуть или вызвать назад.

- Ease Out. Элементы быстро вылетают и медленно завершают движение. Можно применять для разных карточек или объектов, которые возникают из-за пределов экрана.

- Ease-in-out. Рекомендуется применять для элементов, которые можно скрыть или вызвать по нажатию контролов. Например, боковое меню. - Применяй Ease-In-Out во всех случаях, если незнаешь какой тип кривой выбрать.

- Онлайн инструменты для работы с кривыми. easings.net и cubic-bezier.com

Ссылка на перевод статьи - https://is.gd/9q69tz