JavaScript - Animation
Vous pouvez utiliser JavaScript pour créer une animation complexe ayant, mais sans s'y limiter, les éléments suivants -
- Fireworks
- Effet de fondu
- Roll-in ou roll-out
- Page-in ou Page-out
- Mouvements d'objets
Vous pourriez être intéressé par la bibliothèque d'animation JavaScript existante: Script.Aculo.us .
Ce didacticiel explique comment utiliser JavaScript pour créer une animation.
JavaScript peut être utilisé pour déplacer un certain nombre d'éléments DOM (<img />, <div> ou tout autre élément HTML) autour de la page selon une sorte de modèle déterminé par une équation logique ou une fonction.
JavaScript fournit les deux fonctions suivantes à utiliser fréquemment dans les programmes d'animation.
setTimeout( function, duration) - Cette fonction appelle function après duration millisecondes à partir de maintenant.
setInterval(function, duration) - Cette fonction appelle function après chaque duration millisecondes.
clearTimeout(setTimeout_variable) - Cette fonction appelle efface toute minuterie définie par les fonctions setTimeout ().
JavaScript peut également définir un certain nombre d'attributs d'un objet DOM, y compris sa position à l'écran. Vous pouvez définir l' attribut supérieur et gauche d'un objet pour le positionner n'importe où sur l'écran. Voici sa syntaxe.
// Set distance from left edge of the screen.
object.style.left = distance in pixels or points;
or
// Set distance from top edge of the screen.
object.style.top = distance in pixels or points;Animation manuelle
Implémentons donc une animation simple en utilisant les propriétés d'objet DOM et les fonctions JavaScript comme suit. La liste suivante contient différentes méthodes DOM.
Nous utilisons la fonction JavaScript getElementById() pour obtenir un objet DOM puis l'assigner à une variable globale imgObj.
Nous avons défini une fonction d'initialisation init() pour initialiser imgObj où nous avons mis son position et left les attributs.
Nous appelons la fonction d'initialisation au moment du chargement de la fenêtre.
Enfin, nous appelons moveRight()fonction pour augmenter la distance gauche de 10 pixels. Vous pouvez également le définir sur une valeur négative pour le déplacer vers la gauche.
Exemple
Essayez l'exemple suivant.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</form>
</body>
</html>Production
Animation automatisée
Dans l'exemple ci-dessus, nous avons vu comment une image se déplace vers la droite à chaque clic. Nous pouvons automatiser ce processus en utilisant la fonction JavaScriptsetTimeout() comme suit -
Ici, nous avons ajouté plus de méthodes. Voyons donc ce qu'il y a de nouveau ici -
le moveRight() la fonction appelle setTimeout()fonction pour définir la position de imgObj .
Nous avons ajouté une nouvelle fonction stop() pour effacer la minuterie réglée par setTimeout() fonction et pour mettre l'objet à sa position initiale.
Exemple
Essayez l'exemple de code suivant.
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
<!--
var imgObj = null;
var animate ;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
animate = setTimeout(moveRight,20); // call moveRight in 20msec
}
function stop() {
clearTimeout(animate);
imgObj.style.left = '0px';
}
window.onload = init;
//-->
</script>
</head>
<body>
<form>
<img id = "myImage" src = "/images/html.gif" />
<p>Click the buttons below to handle animation</p>
<input type = "button" value = "Start" onclick = "moveRight();" />
<input type = "button" value = "Stop" onclick = "stop();" />
</form>
</body>
</html>Survol avec un événement de souris
Voici un exemple simple montrant un survol d'image avec un événement de souris.
Voyons ce que nous utilisons dans l'exemple suivant -
Au moment du chargement de cette page, l'instruction 'if' vérifie l'existence de l'objet image. Si l'objet image n'est pas disponible, ce bloc ne sera pas exécuté.
le Image() constructeur crée et précharge un nouvel objet image appelé image1.
La propriété src reçoit le nom du fichier image externe appelé /images/html.gif.
De même, nous avons créé image2 objet et attribué /images/http.gif dans cet objet.
Le # (marque dièse) désactive le lien afin que le navigateur n'essaye pas d'accéder à une URL lorsqu'il clique dessus. Ce lien est une image.
le onMouseOver le gestionnaire d'événements est déclenché lorsque la souris de l'utilisateur se déplace sur le lien, et le onMouseOut Le gestionnaire d'événements est déclenché lorsque la souris de l'utilisateur s'éloigne du lien (image).
Lorsque la souris se déplace sur l'image, l'image HTTP passe de la première image à la seconde. Lorsque la souris est éloignée de l'image, l'image d'origine s'affiche.
Lorsque la souris est éloignée du lien, l'image initiale html.gif réapparaîtra à l'écran.
<html>
<head>
<title>Rollover with a Mouse Events</title>
<script type = "text/javascript">
<!--
if(document.images) {
var image1 = new Image(); // Preload an image
image1.src = "/images/html.gif";
var image2 = new Image(); // Preload second image
image2.src = "/images/http.gif";
}
//-->
</script>
</head>
<body>
<p>Move your mouse over the image to see the result</p>
<a href = "#" onMouseOver = "document.myImage.src = image2.src;"
onMouseOut = "document.myImage.src = image1.src;">
<img name = "myImage" src = "/images/html.gif" />
</a>
</body>
</html>