10.1 Kombinierte Animationen
Komplexe Animationen können die Benutzeroberfläche erheblich verbessern, indem sie sie interaktiver und attraktiver machen. Zur Erstellung solcher Animationen wird oft eine Kombination aus CSS und JavaScript verwendet. Schauen wir uns fortgeschrittene Animationstechniken an, die komplexere Szenarien und Interaktivität beinhalten.
Kombinieren mehrerer Animationen mithilfe von CSS ermöglicht die Erstellung komplexer Effekte. Schauen wir uns ein Beispiel an, bei dem ein Element gleichzeitig die Größe ändert, sich dreht und bewegt.
Beispiel: Kombinierte Animationen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kombinierte Animationen</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>Kombinierte Animationen</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>
Erklärung des Codes:
.box: Element, auf das die kombinierte Animation angewendet wird@keyframes combined: definiert die Animation, die die Skalierung, Drehung und Position des Elements ändert
10.2 JavaScript-Animationen
Die Funktion requestAnimationFrame ermöglicht die Erstellung reibungsloser Animationen mit hoher Leistung. Sie synchronisiert die Animation mit der Bildschirmaktualisierungsrate, was sie flüssiger macht.
Beispiel: Bewegungsanimation mit requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation mit 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>Animation mit requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Wählen wir das Element mit der Klasse "ball" und speichern es in der Variablen ball
const ball = document.querySelector('.ball');
// Variable zur Speicherung der Startzeit der Animation
let start = null;
// Animationsfunktion
function animate(time) {
// Wenn die Animation zum ersten Mal startet, speichern wir die aktuelle Zeit
if (!start) start = time;
// Berechnen Sie die seit Beginn der Animation vergangene Zeit
let progress = time - start;
// Position des Balls auf der linken Achse abhängig von der vergangenen Zeit setzen
// Maximale Verschiebung auf 200 Pixel begrenzen
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Wenn weniger als 2000 Millisekunden vergangen sind, Animation fortsetzen
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Animation starten
requestAnimationFrame(animate);
</script>
</body>
</html>
Erklärung des Codes:
requestAnimationFrame: Funktion, dieanimateaufruft, um Animationsframes auszuführenanimate: Funktion, die das Element.ballinnerhalb von 2 Sekunden 200 Pixel nach rechts verschiebt
10.3 Steuerung von CSS-Animationen mit JavaScript
JavaScript kann verwendet werden, um CSS-Animationen zu steuern, indem Klassen oder Stile von Elementen geändert werden.
Beispiel: Starten einer CSS-Animation durch Klicken auf einen Button
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation starten durch Klicken auf den Button</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>Animation starten durch Klicken auf den Button</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>
Erklärung des Codes:
.box.animate: Klasse, die die Animation moveAndRotate zum Element.boxhinzufügt- JavaScript: Das
click-Ereignis auf dem Button#startButtonfügt dem Element#boxden Klasseanimatehin oder entfernt sie, um die Animation zu starten
10.4 Interaktion mit Animationen über Ereignisse
Animationsevents wie animationstart, animationend und animationiteration ermöglichen das Verfolgen und Verwalten von Animationen.
Beispiel: Verfolgen von Animationsevents
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verfolgen von Animationsevents</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 gestartet');
});
box.addEventListener('animationend', () => {
console.log('Animation beendet');
});
box.addEventListener('animationiteration', () => {
console.log('Animation wiederholt');
});
</script>
</body>
</html>
Erklärung des Codes:
animationstart: Event, das beim Start der Animation ausgelöst wirdanimationend: Event, das am Ende der Animation ausgelöst wirdanimationiteration: Event, das bei jedem Wiederholen der Animation ausgelöst wird
GO TO FULL VERSION