Comment utiliser JavaScript pour les animations et les transitions?
19/03/2024
•
5
min
Les animations et transitions en JavaScript peuvent être réalisées de diverses manières. L'une des manières les plus simples consiste à utiliser la propriété CSS transition. Cela permet à un élément HTML de changer progressivement d'un style à un autre.
Voici un exemple HTML de la façon dont cela peut être réalisé:
<!DOCTYPE html>
<html>
<body>
<h1>Exemple d'animation JavaScript</h1>
<div id="animatedDiv" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<button onclick="moveAnimation()">Cliquez pour me déplacer</button>
<script>
function moveAnimation() {
var elem = document.getElementById("animatedDiv");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>
Explication:
Ask your specific question in Mate AI
In Mate you can connect your project, ask questions about your repository, and use AI Agent to solve programming tasks
Cela crée un div carré et le déplace en diagonale le long de la page web 1 unité à la fois jusqu'à pos == 350.
setInterval(frame, 5): cette functionframeest prête à s'exécuter toutes les 5 millisecondes.frame: cette function modifie les positions du haut et de la gauche du div. Sipos == 350, elle efface également l'intervalle défini parsetInterval(frame, 5)de manière à ce que la function cesse de s'exécuter.moveAnimation(): Cette function est appelée lorsque le bouton est cliqué. Elle définit l'intervalle et déplace le div.
Pour des animations plus complexes, vous utiliseriez généralement une bibliothèque d'animation/de transition (ou écrieriez la vôtre) pour gérer la plupart des problèmes liés aux animations, comme les animations de clés, l'arrêt, le démarrage, l'inversion, la boucle, la pause des animations, et même la synchronisation de plusieurs animations.
Des exemples de telles bibliothèques incluent :
GSAP (Greensock)anime.jsmo.jsVelocity.jsPopmotion
N'oubliez jamais d'optimiser pour les performances car les animations peuvent charger lourdement le navigateur, ce qui affecte les performances de votre site web. Utilisez requestAnimationFrame chaque fois que vous pouvez, à la place de setTimeout ou setInterval.
Note: Tous les styles n peuvent pas être animés. Seuls les styles avec des valeurs numériques peuvent être animés, par exemple, vous ne pouvez pas animer la propriété 'display' ou 'background-image' d'un élément. Pour une référence complète de ce qui peut et ne peut pas être animé, consultez cet article MDN: mdn.io/animate#animatable-css
Il est également important de noter que les animations JavaScript ne sont pas toujours le bon outil pour le travail. Dans certains cas, les animations CSS peuvent fournir des animations plus fluides et moins gourmandes en processeur.
AI agent for developers
Boost your productivity with Mate:
easily connect your project, generate code, and debug smarter - all powered by AI.
Do you want to solve problems like this faster? Download now for free.