10.1 Kombinowane animacje
Złożone animacje mogą znacznie poprawić interfejs użytkownika, czyniąc go bardziej interaktywnym i atrakcyjnym. Do tworzenia takich animacji często używa się kombinacji CSS i JavaScript. Przyjrzymy się zaawansowanym technikom animacji, które obejmują bardziej skomplikowane scenariusze i interaktywność.
Kombinowanie kilku animacji za pomocą CSS pozwala tworzyć skomplikowane efekty. Spójrzmy na przykład, w którym element jednocześnie zmienia rozmiar, obraca się i przesuwa.
Przykład: Kombinowane animacje
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinowane animacje</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>Kombinowane animacje</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>
Wyjaśnienie kodu:
.box: element, na który aplikowana jest kombinowana animacja@keyframes combined: definiuje animację zmieniającą skalę, rotację i pozycję elementu
10.2 Animacje JavaScript
Funkcja requestAnimationFrame pozwala tworzyć płynne animacje z wysoką wydajnością.
Synchronizuje animację z częstotliwością odświeżania ekranu, co czyni ją bardziej płynną.
Przykład: Animacja ruchu przy użyciu requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animacja z 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>Animacja z requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Wybieramy element z klasą "ball" i zapisujemy go w zmiennej ball
const ball = document.querySelector('.ball');
// Zmienna do przechowywania czasu początkowego animacji
let start = null;
// Funkcja animacji
function animate(time) {
// Jeśli animacja uruchamia się po raz pierwszy, zapisujemy aktualny czas
if (!start) start = time;
// Obliczamy czas, który minął od początku animacji
let progress = time - start;
// Ustawiamy pozycję piłki wzdłuż osi lewo-prawo w zależności od upływu czasu
// Ograniczamy maksymalne przesunięcie do 200 pikseli
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Jeśli minęło mniej niż 2000 milisekund, kontynuujemy animację
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Uruchamiamy animację
requestAnimationFrame(animate);
</script>
</body>
</html>
Wyjaśnienie kodu:
requestAnimationFrame: funkcja, która wywołujeanimatedo wykonania klatek animacjianimate: funkcja, która przesuwa element.ballo 200 pikseli w prawo w 2 sekundy
10.3 Zarządzanie animacjami CSS za pomocą JavaScript
JavaScript może być używany do zarządzania animacjami CSS, zmieniając klasy lub style elementów.
Przykład: Uruchamianie animacji CSS po naciśnięciu przycisku
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uruchamianie animacji po naciśnięciu przycisku</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>Uruchamianie animacji po naciśnięciu przycisku</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>
Wyjaśnienie kodu:
.box.animate: klasa dodająca animację moveAndRotate do elementu.box-
JavaScript: zdarzenie
clickna przycisku#startButtondodaje lub usuwa klasęanimatez elementu#box, uruchamiając animację
10.4 Interakcja z animacjami poprzez zdarzenia
Zdarzenia animacji, takie jak animationstart, animationend i animationiteration, pozwalają śledzić i zarządzać animacjami.
Przykład: Śledzenie zdarzeń animacji
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Śledzenie zdarzeń animacji</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('Animacja rozpoczęta');
});
box.addEventListener('animationend', () => {
console.log('Animacja zakończona');
});
box.addEventListener('animationiteration', () => {
console.log('Powtórzenie animacji');
});
</script>
</body>
</html>
Wyjaśnienie kodu:
animationstart: zdarzenie uruchamiane na początku animacjianimationend: zdarzenie uruchamiane na końcu animacjianimationiteration: zdarzenie uruchamiane każdorazowo przy powtórzeniu animacji
GO TO FULL VERSION