10.1 Animations combinées
Des animations complexes peuvent considérablement améliorer l'interface utilisateur, la rendant plus interactive et attrayante. Pour créer de telles animations, on utilise souvent une combinaison de CSS et JavaScript. Explorons les techniques avancées d'animation, incluant des scénarios plus complexes et de l'interactivité.
Combiner plusieurs animations en utilisant CSS permet de créer des effets complexes. Voyons un exemple, où un élément change de taille, tourne et se déplace simultanément.
Exemple : Animations combinées
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animaciones combinées</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>
Explication du code :
.box: l'élément auquel l'animation combinée est appliquée@keyframes combined: définit l'animation qui modifie l'échelle, la rotation et la position de l'élément
10.2 Animations JavaScript
La fonction requestAnimationFrame permet de créer des animations fluides avec de hautes performances.
Elle synchronise l'animation avec le taux de rafraîchissement de l'écran, ce qui la rend plus fluide.
Exemple : Animation de mouvement en utilisant requestAnimationFrame
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation avec requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Sélection de l'élément avec la classe "ball" et sauvegarde dans la variable ball
const ball = document.querySelector('.ball');
// Variable pour stocker le temps de départ de l'animation
let start = null;
// Fonction d'animation
function animate(time) {
// Si l'animation démarre pour la première fois, on enregistre le temps actuel
if (!start) start = time;
// Calcul du temps écoulé depuis le début de l'animation
let progress = time - start;
// Définition de la position de la balle sur l'axe gauche en fonction du temps écoulé
// Limitation du déplacement maximal à 200 pixels
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Si moins de 2000 millisecondes se sont écoulées, continuez l'animation
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Démarrage de l'animation
requestAnimationFrame(animate);
</script>
</body>
</html>
Explication du code :
requestAnimationFrame: une fonction qui appelleanimatepour exécuter les frames de l'animationanimate: une fonction qui déplace l'élément.ballde 200 pixels vers la droite en 2 secondes
10.3 Contrôler les animations CSS avec JavaScript
JavaScript peut être utilisé pour contrôler les animations CSS en modifiant les classes ou les styles des éléments.
Exemple : Déclencher une animation CSS au clic d'un bouton
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Déclencher l'animation au clic du bouton</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">Démarrer l'Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
Explication du code :
.box.animate: une classe qui ajoute l'animation moveAndRotate à l'élément.box-
JavaScript: l'événement
clicksur le bouton#startButtonajoute ou enlève la classeanimateà l'élément#box, déclenchant l'animation
10.4 Interagir avec les animations via des événements
Les événements d'animation tels que animationstart, animationend et animationiteration permettent de suivre et de gérer les animations.
Exemple : Suivi des événements d'animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des événements d'animation</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 commencée');
});
box.addEventListener('animationend', () => {
console.log('Animation terminée');
});
box.addEventListener('animationiteration', () => {
console.log('Itération de l'animation');
});
</script>
</body>
</html>
Explication du code :
animationstart: événement qui se déclenche au début de l'animationanimationend: événement qui se déclenche à la fin de l'animationanimationiteration: événement qui se déclenche à chaque répétition de l'animation
GO TO FULL VERSION