JavaScript - Animación
Puede usar JavaScript para crear una animación compleja que tenga, entre otros, los siguientes elementos:
- Fireworks
- Efecto de desvanecimiento
- Roll-in o Roll-out
- Page-in o Page-out
- Movimientos de objetos
Puede que le interese la biblioteca de animación basada en JavaScript existente: Script.Aculo.us .
Este tutorial proporciona una comprensión básica de cómo usar JavaScript para crear una animación.
JavaScript se puede utilizar para mover varios elementos DOM (<img />, <div> o cualquier otro elemento HTML) alrededor de la página de acuerdo con algún tipo de patrón determinado por una función o ecuación lógica.
JavaScript proporciona las dos funciones siguientes que se utilizan con frecuencia en programas de animación.
setTimeout( function, duration) - Esta función llama function después duration milisegundos a partir de ahora.
setInterval(function, duration) - Esta función llama function después de cada duration milisegundos.
clearTimeout(setTimeout_variable) - Esta función llama borra cualquier temporizador establecido por las funciones setTimeout ().
JavaScript también puede establecer una serie de atributos de un objeto DOM, incluida su posición en la pantalla. Puede establecer el atributo superior e izquierdo de un objeto para colocarlo en cualquier lugar de la pantalla. Aquí está su sintaxis.
// 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;Animación manual
Así que implementemos una animación simple usando propiedades de objeto DOM y funciones de JavaScript de la siguiente manera. La siguiente lista contiene diferentes métodos DOM.
Estamos usando la función de JavaScript getElementById() para obtener un objeto DOM y luego asignarlo a una variable global imgObj.
Hemos definido una función de inicialización init() para inicializar imgObj donde hemos puesto su position y left atributos.
Estamos llamando a la función de inicialización en el momento de la carga de la ventana.
Finalmente, estamos llamando moveRight()función para aumentar la distancia izquierda en 10 píxeles. También puede establecerlo en un valor negativo para moverlo hacia el lado izquierdo.
Ejemplo
Pruebe el siguiente ejemplo.
<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>Salida
Animación automatizada
En el ejemplo anterior, vimos cómo una imagen se mueve hacia la derecha con cada clic. Podemos automatizar este proceso usando la función de JavaScriptsetTimeout() como sigue -
Aquí hemos agregado más métodos. Veamos qué hay de nuevo aquí.
los moveRight() la función está llamando setTimeout()función para establecer la posición de imgObj .
Hemos agregado una nueva función stop() para borrar el temporizador establecido por setTimeout() función y para colocar el objeto en su posición inicial.
Ejemplo
Pruebe el siguiente código de ejemplo.
<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>Rollover con un evento de mouse
A continuación, se muestra un ejemplo simple que muestra la imagen cambiante con un evento de mouse.
Veamos qué estamos usando en el siguiente ejemplo:
En el momento de cargar esta página, la declaración 'if' comprueba la existencia del objeto de imagen. Si el objeto de imagen no está disponible, este bloque no se ejecutará.
los Image() constructor crea y precarga un nuevo objeto de imagen llamado image1.
A la propiedad src se le asigna el nombre del archivo de imagen externo llamado /images/html.gif.
Del mismo modo, hemos creado image2 objeto y asignado /images/http.gif en este objeto.
El # (marca de almohadilla) desactiva el enlace para que el navegador no intente ir a una URL cuando se hace clic en él. Este enlace es una imagen.
los onMouseOver El controlador de eventos se activa cuando el mouse del usuario se mueve sobre el enlace, y el onMouseOut El controlador de eventos se activa cuando el mouse del usuario se aleja del enlace (imagen).
Cuando el mouse se mueve sobre la imagen, la imagen HTTP cambia de la primera imagen a la segunda. Cuando el mouse se aleja de la imagen, se muestra la imagen original.
Cuando el mouse se aleja del enlace, la imagen inicial html.gif volverá a aparecer en la pantalla.
<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>