Анимации: requestAnimationFrame, CSS transitions

Почему анимации — это круто? 🎨

Анимации оживляют интерфейсы, делают их интуитивными и приятными. Хотите плавно скроллить страницу, показывать подсказки или создавать мини-игры? Без анимаций никуда!

Сегодня разберём два мощных инструмента:
- CSS transitions — простые анимации «в один клик».
- requestAnimationFrame — полный контроль над каждым кадром.

Готовы? Поехали!

CSS Transitions: магия без JavaScript

CSS transitions позволяют анимировать изменения свойств. Например, плавное изменение цвета кнопки при наведении.

Как это работает?

Достаточно указать:
1. Какое свойство анимировать.
2. Длительность анимации.
3. Функцию плавности (timing function).

.button {
  background-color: blue;
  transition: background-color 0.3s ease-in-out;
}

.button:hover {
  background-color: red;
}

💡 Совет: transition можно применять к любым CSS-свойствам, которые имеют промежуточные значения (например, opacity, transform, width).

Расширенный пример: движение элемента

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.box:hover {
  transform: translateX(200px);
}

Здесь:
- transform — свойство, которое анимируем.
- cubic-bezier — кастомная функция плавности (как у Данилы в видео про креативные анимации).

`requestAnimationFrame`: анимации на стероидах 💪

CSS transitions хороши для простых сценариев, но что если нужно:
- Создать сложную анимацию с логикой?
- Контролировать каждый кадр?
- Останавливать, ускорять или замедлять анимацию?

Тут в игру вступает requestAnimationFrame (rAF).

Как работает rAF?

Это метод, который говорит браузеру: «Вызови мою функцию перед следующей перерисовкой экрана».

Пример: плавное перемещение блока вправо.

const box = document.querySelector('.box');
let position = 0;

function animate() {
  position += 2;
  box.style.transform = `translateX(${position}px)`;

  if (position < 200) {
    requestAnimationFrame(animate); // Рекурсивный вызов
  }
}

animate(); // Запуск анимации

Почему rAF лучше `setTimeout` или `setInterval`?

🚀 Оптимизация под частоту кадров монитора (обычно 60 FPS).
⏸ Автоматическая пауза в неактивной вкладке (экономит ресурсы).
🔧 Интеграция с браузерным рендерингом (меньше лагов).

Сравнение подходов

Характеристика	CSS Transitions	`requestAnimationFrame`
Сложность	🔹 Легко	🔹🔹🔹 Гибко, но сложнее
Производительность	✅ Оптимизировано	✅ Максимальный контроль
Условия анимации	❌ Ограничены CSS	✅ Любая JavaScript-логика
Поддержка	🌍 Все браузеры	🌍 Все браузеры

Пример: плавный скролл через rAF

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

function smoothScrollTo(targetY, duration = 1000) {
  const startY = window.scrollY;
  const distance = targetY - startY;
  let startTime = null;

  function animation(currentTime) {
    if (!startTime) startTime = currentTime;
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    window.scrollTo(0, startY + distance * progress);

    if (progress < 1) {
      requestAnimationFrame(animation);
    }
  }

  requestAnimationFrame(animation);
}

// Прокрутить до 1000px за 1 секунду:
smoothScrollTo(1000);

Итоги

CSS transitions — простые, декларативные анимации. Идеально для hover-эффектов, модалок.
requestAnimationFrame — мощный инструмент для сложных анимаций. Полный контроль над каждым кадром.

Теперь — твоя очередь экспериментировать! 🚀