Анимация

Анимация оживляет интерфейс, дополнительно акцентируя внимания на компонентах или событиях в сценарии.

Компоненты CDS уже включают в себя анимацию, однако взаимодействие компонентов друг с другом, а так же анимация в компонентах на уровне приложений определяется продуктовой командой.

Стиль

Basic анимация

Обозначает отклик на действия пользователя, при этом не отвлекает его от выполнения основного сценария.

Пример использования:
  • Наведение на кнопку
  • Переключатели

Accent анимация

Привлекает внимание пользователя к событию или элементу интерфейса.

Пример использования:
  • Системные предупреждения и ошибки
  • Появление уведомлений

Плавность движения

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

ease-in-out

Взаимодействие с элементом, видимым от начала и до конца анимации.

Пример использования:
  • Переключение контент свитчера
  • Сортировка в таблице
Стиль Параметр CSS
basic ease-in-out, basic cubic-bezier(0.37, 0, 0.63, 1)
accent ease-in-out, accent cubic-bezier(0.45, 0, 0.55, 1)

ease-in

Элемент быстро появляется и замедляется до полной остановки.

Пример использования:
  • Добавление элементов
  • Появление модального или всплывающего окна
Стиль Параметр CSS
basic ease-in, basic cubic-bezier(0.12, 0, 0.39, 0)
accent ease-in, accent cubic-bezier(0.11, 0, 0.5, 0)

ease-out

Элемент ускоряется при исчезновении.

Пример использования:
  • Удаление элементов
  • Закрытие модальных и всплывающих окон

Исключениями являются случаи, когда элемент исчезает с поля зрения пользователя, но остается в интерфейсе, готовый к повторному вызову. В таких случаях используйте ease-in-out.

Например боковая панель — перед тем, как покинуть поле зрения анимация панели замедляется, намекая пользователю, что она в свернутом состоянии и готова к повторному вызову.

Стиль Параметр CSS
basic ease-out, basic cubic-bezier(0.61, 1, 0.88, 1)
accent ease-out, accent cubic-bezier(0.5, 1, 0.89, 1)

Длительность

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

Если отклик элемента более секунды, у пользователя будет ощущение медленной работы интерфейса. При задержке более секунды, сообщите пользователю о работе над проблемой, например курсором загрузки.

Примеры использования Токен Значение, (мс)
Микровзаимодействия с кнопками и переключателями $cds-duration-instant 50
Закрытие выпадающих списков, исчезновение объектов $cds-duration-very-fast 100
Раскрытие маленьких элементов, перемещения на короткие расстояния $cds-duration-fast 200
Раскрытие средних элементов, системные сообщения, всплывающие элементы $cds-duration-normal 300
Раскрытие большого элемента, важные системные уведомления $cds-duration-slow 400
Затемнение фона $cds-duration-very-slow 500

Реализация

@import '../mixins/scss/motion';

// Используется по умолчанию.

.example-animation {
    @include cds-animation-motion($cds-duration-fast-short, 'ease-in-out', 'basic');
}

// Используется когда нужно анимировать определенные css-свойства более гибко.

.example-animation-v2 {
    transition: transform ($cds-duration-fast-long + ms) getMotion('ease-in-out', 'basic');
}
Новое мажорное обновление!
Мы активно разрабатываем дизайн систему CDS 3.0 на Vue 3