La animación fotograma a fotograma es una técnica en la que se muestra un conjunto de imágenes, una por una en un orden particular, manteniendo intervalos de tiempo fijos entre dos imágenes consecutivas, para crear una ilusión de movimiento para los ojos. Ahora, de una manera más técnica, podemos decir que la animación fotograma a fotograma es una técnica en la que aparecen diferentes fotogramas, uno tras otro, manteniendo intervalos de tiempo fijos en diferentes fotogramas para crear la ilusión de movimiento.
Podemos usar el método JavaScript setInterval() para crear una animación cuadro por cuadro. El método setInterval() se usa para repetir una función particular en cada intervalo de tiempo dado, por lo que se puede usar en la animación cuadro por cuadro en el conjunto de cuadros para que parezcan tener intervalos de tiempo fijos entre ellos.
Sintaxis:
setInterval(function, milliseconds);
Parámetros:
- función: La función que tiene que ser ejecutada.
- milisegundos: Indica la duración del intervalo de tiempo en milisegundos entre cada fotograma.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
img {
height: 250px;
width: 250px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
height: 250px;
border: 3px solid #73AD21;
padding: 2px;
}
</style>
</head>
<body>
<script>
var images = new Array()
images = [
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG",
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215014/frame2-200x190.PNG",
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215021/frame3-200x182.PNG"
];
setInterval("Animate()", 400);
var x = 0;
function Animate() {
document.getElementById("img").src = images[x]
x++;
if (images.length == x) {
x = 0;
}
}
</script>
<div class="center">
<img id="img" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210721215006/frame1.PNG">
<h3>Frame by Frame Animation</h3>
</div>
</body>
</html>
Producción:
Animación de fotogramas
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA