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;
// Встановлюємо позицію м'яча по горизонтальній осі залежно від часу
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Продовжуємо анімацію, якщо пройшло менше 2 секунд
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('Анімація почалась');
});
box.addEventListener('animationend', () => {
console.log('Анімація завершилась');
});
box.addEventListener('animationiteration', () => {
console.log('Ітерація анімації');
});
</script>
</body>
</html>
Пояснення коду:
animationstart: подія, яка спрацьовує на початку анімаціїanimationend: подія, яка спрацьовує в кінці анімаціїanimationiteration: подія, яка спрацьовує кожного разу при повторенні анімації
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ