10.1 Animazioni combinate
Le animazioni complesse possono migliorare notevolmente l'interfaccia utente, rendendola più interattiva e attraente. Per creare tali animazioni viene spesso utilizzata una combinazione di CSS e JavaScript. Vediamo delle tecniche avanzate di animazione, che includono scenari più complessi e interattività.
Combinare diverse animazioni usando CSS permette di creare effetti complessi. Consideriamo un esempio in cui un elemento cambia dimensione, ruota e si sposta allo stesso tempo.
Esempio: Animazioni combinate
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazioni combinate</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>Animazioni combinate</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>
Spiegazione del codice:
.box: l'elemento su cui viene applicata l'animazione combinata@keyframes combined: definisce l'animazione che cambia scala, rotazione e posizione dell'elemento
10.2 Animazioni JavaScript
La funzione requestAnimationFrame permette di creare animazioni fluide con alte prestazioni.
Sincronizza l'animazione con la frequenza di aggiornamento dello schermo, rendendola più fluida.
Esempio: Animazione di movimento con requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazione con 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>Animazione con requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Seleziona l'elemento con classe "ball" e lo salva nella variabile ball
const ball = document.querySelector('.ball');
// Variabile per memorizzare il tempo d'inizio dell'animazione
let start = null;
// Funzione di animazione
function animate(time) {
// Se l'animazione viene avviata per la prima volta, memorizza il tempo corrente
if (!start) start = time;
// Calcola il tempo trascorso dall'inizio dell'animazione
let progress = time - start;
// Imposta la posizione della palla sull'asse sinistra in base al tempo trascorso
// Limita lo spostamento massimo a 200 pixel
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Se sono trascorsi meno di 2000 millisecondi, continua l'animazione
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Avvia l'animazione
requestAnimationFrame(animate);
</script>
</body>
</html>
Spiegazione del codice:
requestAnimationFrame: funzione che chiamaanimateper eseguire i fotogrammi dell'animazioneanimate: funzione che sposta l'elemento.balldi 200 pixel a destra in 2 secondi
10.3 Controllo delle animazioni CSS con JavaScript
JavaScript può essere usato per controllare le animazioni CSS, cambiando classi o stili degli elementi.
Esempio: Inizio animazione CSS al clic di un pulsante
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inizio animazione al clic del pulsante</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>Inizio animazione al clic del pulsante</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>
Spiegazione del codice:
.box.animate: classe che aggiunge l'animazione moveAndRotate all'elemento.box-
JavaScript: l'evento
clicksul pulsante#startButtonaggiunge o rimuove la classeanimateall'elemento#box, avviando l'animazione
10.4 Interazione con le animazioni tramite eventi
Gli eventi di animazione come animationstart, animationend e animationiteration permettono di monitorare e gestire le animazioni.
Esempio: Monitoraggio degli eventi di animazione
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Monitoraggio degli eventi di animazione</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('Animazione iniziata');
});
box.addEventListener('animationend', () => {
console.log('Animazione terminata');
});
box.addEventListener('animationiteration', () => {
console.log('Iterazione dell\'animazione');
});
</script>
</body>
</html>
Spiegazione del codice:
animationstart: evento che viene attivato all'inizio dell'animazioneanimationend: evento che viene attivato alla fine dell'animazioneanimationiteration: evento che viene attivato ogni volta che l'animazione si ripete
GO TO FULL VERSION