39. animation-timing-function и кривые Безье

CSS: animation-timing-function и кривые Безье

Иллюстрация к уроку В этом уроке мы познакомимся с тем, как управлять скоростью анимации в CSS с помощью animation-timing-function и кривых Безье. Это позволит нам создавать более плавные и интересные анимации.

Что такое animation-timing-function?

Свойство animation-timing-function определяет, как изменяется скорость анимации в течение ее длительности. По умолчанию анимация происходит с постоянной скоростью (linear), но мы можем использовать другие значения, чтобы сделать ее более динамичной.

Существуют предопределенные значения:

linear: анимация с постоянной скоростью.
ease: анимация начинается медленно, затем ускоряется и заканчивается медленно (значение по умолчанию).
ease-in: анимация начинается медленно.
ease-out: анимация заканчивается медленно.
ease-in-out: анимация начинается и заканчивается медленно.

.element {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: ease-in-out; /* Начинается и заканчивается медленно */
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Кривые Безье и `cubic-bezier()`

Для более точного контроля над скоростью анимации можно использовать функцию cubic-bezier(). Она принимает четыре числовых значения, которые определяют координаты двух контрольных точек кривой Безье. Эти точки влияют на ускорение и замедление анимации.

Общий формат: cubic-bezier(x1, y1, x2, y2)

x1, y1: координаты первой контрольной точки (от 0 до 1).
x2, y2: координаты второй контрольной точки (от 0 до 1).

.element {
  animation-name: move;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Пользовательская кривая Безье */
}

@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Небольшое пояснение: значения x1 и x2 влияют на время, а y1 и y2 на изменение значения анимируемого свойства. Значения y1 и y2 могут быть меньше 0 и больше 1, что создает эффект “перехлеста” (overshoot).

Практический пример

Давайте создадим анимацию, которая имитирует прыжок мячика:

<!DOCTYPE html>
<html>
<head>
<title>Animation Example</title>
<style>
.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
  50% {
    transform: translateY(-100px);
    animation-timing-function: ease-out;
  }
}
</style>
</head>
<body>
<div class="ball"></div>
</body>
</html>

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

Жизненный пример

Кривые Безье широко используются в веб-разработке. Например:

Material UI (React): Этот популярный UI-фреймворк использует кривые Безье для создания плавных переходов и анимаций элементов.
Веб-сайты с параллакс-эффектом: Кривые Безье могут быть использованы для управления скоростью прокрутки различных элементов, создавая эффект глубины.
Анимации в мобильных приложениях: Почти все мобильные приложения используют кривые Безье для анимации переходов между экранами, всплывающих уведомлений и других UI-элементов.

Ключевые моменты

animation-timing-function определяет скорость анимации.
Предопределенные значения (linear, ease, ease-in, ease-out, ease-in-out) предоставляют базовые варианты.
cubic-bezier() позволяет создавать пользовательские кривые Безье для более точного контроля.
Кривые Безье широко используются в веб- и мобильной разработке для создания плавных и интересных анимаций.