Основы анимации в WEB
Анимации — один из важнейших ингредиентов, который делает современные веб-сайты живыми и интересными. Они улучшают пользовательский опыт, привлекают внимание к важным элементам и превращают статичные интерфейсы в динамичные и захватывающие.
В этом подразделе мы разберемся, как создавать анимации с помощью JavaScript, изучим основные методы и посмотрим на примеры их использования.
Основные подходы к анимациям
В JavaScript существуют три основных способа создания анимаций:
- CSS-анимации с управлением через JavaScript.
- Использование JavaScript для изменения CSS-свойств напрямую.
- Использование встроенного метода requestAnimationFrame для создания плавных анимаций.
1. CSS-анимации, управляемые через JavaScript
Один из самых популярных способов создания анимаций — это использование CSS-анимаций (или переходов) в сочетании с JavaScript.
Анимации описываются в CSS, а JavaScript лишь запускает их. Это делает код более структурированным и понятным.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
overflow: hidden;
}
#moon {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease, transform 0.3s ease;
}
#moon.animate {
transform: translateX(550px) translateY(-50%) scale(1.5);
}
.btn {
position: relative;
padding: 12px 20px;
border-radius: 30px;
border: 0;
background-color: black;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="moon"></div>
<button class="btn btn--black btn--medium animateBtn">Запустить анимацию</button>
<script>
const moon = document.getElementById('moon');
const button = document.querySelector('.animateBtn');
button.addEventListener('click', () => {
moon.classList.toggle('animate');
});
</script>
</body>
</html>Объяснение:
- В данном примере блок с id="box» анимируется, когда ему добавляется класс animate.
- JavaScript просто переключает этот класс по клику на кнопку. Все параметры анимации описаны в CSS.
2. Анимации через изменение CSS-свойств в JavaScript
Второй подход — это прямое изменение стилей элементов через JavaScript. Это дает больше гибкости, так как можно динамически изменять значения в зависимости от пользовательского ввода или других данных.
Пример:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#moon {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div id="moon"></div>
<script>
const moon = document.getElementById('moon');
let time = 0;
const moonSize = moon.offsetHeight;
const windowWidth = window.innerWidth;
requestAnimationFrame(animate);
function animate() {
time += 0.009;
// Получаем новую позицию
const currentX = time * 100;
if (currentX <= windowWidth - moonSize) {
moon.style.left = `${currentX}px`;
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate); // Запускаем анимацию
</script>
</body>
</html>Объяснение:
- В данном примере мы анимируем круг, который перемещается по горизонтали.
- Мы изменяем свойство left для элемента через JavaScript.
- Для плавной анимации используется метод requestAnimationFrame, который позволяет синхронизировать анимации с частотой обновления экрана, делая движение плавным и экономя ресурсы.
3. Использование requestAnimationFrame для плавных анимаций
requestAnimationFrame — это встроенный метод браузера, специально предназначенный для создания плавных анимаций. Он более эффективен по сравнению с таймерами (setInterval или setTimeout), так как запускается синхронно с обновлением экрана.
Пример плавной анимации:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#moon {
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
overflow: hidden;
}
</style>
</head>
<body>
<div id="moon"></div>
<script>
const moon = document.getElementById('moon');
let time = 0;
const moonSize = moon.offsetHeight;
const amplitude = -moonSize;
const windowWidth = window.innerWidth;
const windowHeightHalf = window.innerHeight / 2;
const centeredY = window.innerHeight / 2 - moonSize / 2
requestAnimationFrame(animate);
function animate() {
time += 0.009;
// Получаем новую позицию
const currentX = time * 100;
const currentY = Math.sin(time) * amplitude + centeredY;
if (currentX <= windowWidth - moonSize) {
moon.style.transform = `translate3d(${currentX}px, ${currentY}px, 0)`; // Устанавливаем новое значение
requestAnimationFrame(animate); // Запускаем снова, пока не достигнем цели
}
}
requestAnimationFrame(animate); // Запускаем анимацию
</script>
</body>
</html>
Объяснение:
- Функция animate вызывается каждый раз, когда браузер готов обновить экран.
- Перемещение происходит плавно, так как каждое обновление связано с текущим временем (timestamp), что позволяет сделать анимацию более предсказуемой и плавной.
Сравнение подходов
Заключение
Анимации в JavaScript — мощный инструмент для создания динамичных пользовательских интерфейсов. Независимо от того, используете ли вы простые CSS-анимации или сложные анимации с использованием requestAnimationFrame, важно помнить, что они должны улучшать взаимодействие пользователя с сайтом, а не отвлекать от его основной функциональности.