10.1 Комбинированные анимации
Сложные анимации могут значительно улучшить пользовательский интерфейс, делая его более интерактивным и привлекательным. Для создания таких анимаций часто используется комбинация CSS и JavaScript. Рассмотрим продвинутые техники анимации, включающие более сложные сценарии и интерактивность.
Комбинирование нескольких анимаций с использованием CSS позволяет создавать сложные эффекты. Рассмотрим пример, где элемент одновременно изменяет размер, поворачивается и перемещается.
Пример: Комбинированные анимации
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Комбинированные анимации</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Комбинированные анимации</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation: combined 4s infinite alternate;
}
@keyframes combined {
0% {
transform: scale(1) rotate(0deg) translateX(0);
}
50% {
transform: scale(1.5) rotate(45deg) translateX(100px);
}
100% {
transform: scale(1) rotate(0deg) translateX(0);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Объяснение кода:
.box: элемент, на который применяется комбинированная анимация@keyframes combined: определяет анимацию, изменяющую масштаб, поворот и положение элемента
10.2 JavaScript-анимации
Функция requestAnimationFrame позволяет создавать плавные анимации с высокой производительностью. Она синхронизирует анимацию с частотой обновления экрана, что делает ее более плавной.
Пример: Анимация движения с использованием requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимация с requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div style="min-height: 60px; padding: 20px 0;">
<div class="ball"></div>
</div>
<script>
const ball = document.querySelector('.ball');
let start = null;
function animate(time) {
if (!start) start = time;
let progress = time - start;
ball.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Анимация с requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Выбираем элемент с классом "ball" и сохраняем его в переменной ball
const ball = document.querySelector('.ball');
// Переменная для хранения начального времени анимации
let start = null;
// Функция анимации
function animate(time) {
// Если анимация запускается впервые, сохраняем текущее время
if (!start) start = time;
// Вычисляем время, прошедшее с начала анимации
let progress = time - start;
// Устанавливаем позицию мяча по левой оси в зависимости от прошедшего времени
// Ограничиваем максимальное смещение до 200 пикселей
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Если прошло меньше 2000 миллисекунд, продолжаем анимацию
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Запускаем анимацию
requestAnimationFrame(animate);
</script>
</body>
</html>
Объяснение кода:
requestAnimationFrame: функция, которая вызываетanimateдля выполнения кадров анимацииanimate: функция, которая перемещает элемент.ballна 200 пикселей вправо за 2 секунды
10.3 Управление CSS-анимациями с помощью JavaScript
JavaScript может использоваться для управления CSS-анимациями, изменяя классы или стили элементов.
Пример: Запуск CSS-анимации по нажатию кнопки
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Запуск анимации по нажатию кнопки</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div style="padding: 30px 0">
<div class="box" id="box"></div>
</div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Запуск анимации по нажатию кнопки</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
position: relative;
}
.box.animate {
animation: moveAndRotate 3s forwards;
}
@keyframes moveAndRotate {
0% {
transform: translateX(0) rotate(0deg);
}
100% {
transform: translateX(200px) rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
Объяснение кода:
.box.animate: класс, который добавляет анимацию moveAndRotate к элементу.box- JavaScript: событие
clickна кнопке#startButtonдобавляет или удаляет классanimateу элемента#box, запуская анимацию
10.4 Взаимодействие с анимациями через события
События анимации, такие как animationstart, animationend и animationiteration, позволяют отслеживать и управлять анимациями.
Пример: Отслеживание событий анимации
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Отслеживание событий анимации</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
animation: scaleUp 2s infinite;
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<script>
const box = document.getElementById('box');
box.addEventListener('animationstart', () => {
console.log('Animation started');
});
box.addEventListener('animationend', () => {
console.log('Animation ended');
});
box.addEventListener('animationiteration', () => {
console.log('Animation iteration');
});
</script>
</body>
</html>
Объяснение кода:
animationstart: событие, которое срабатывает в начале анимацииanimationend: событие, которое срабатывает в конце анимацииanimationiteration: событие, которое срабатывает каждый раз при повторении анимации
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ