10.1 Animaciones combinadas
Las animaciones complejas pueden mejorar significativamente la interfaz de usuario, haciéndola más interactiva y atractiva. Para crear tales animaciones a menudo se utiliza una combinación de CSS y JavaScript. Vamos a ver técnicas avanzadas de animación, que incluyen escenarios más complejos e interactividad.
Combinar varias animaciones utilizando CSS permite crear efectos complejos. Veamos un ejemplo, donde un elemento cambia de tamaño, gira y se mueve al mismo tiempo.
Ejemplo: Animaciones combinadas
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combinación de animaciones</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 style="min-height: 250px; padding: 20px 0;">
<div class="box"></div>
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Combinación de animaciones</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>
Explicación del código:
.box: el elemento al que se aplica la animación combinada@keyframes combined: define la animación que cambia el tamaño, rotación y posición del elemento
10.2 Animaciones con JavaScript
La función requestAnimationFrame permite crear animaciones suaves con alto rendimiento. Sincroniza la animación con la frecuencia de actualización de la pantalla, lo que la hace más fluida.
Ejemplo: Animación de movimiento usando requestAnimationFrame
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación con requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div style="min-height: 60px; padding: 20px 0;">
<div class="ball"></div>
</div>
<script>
const ball = document.querySelector('.ball');
let start = null;
function animate(time) {
if (!start) start = time;
let progress = time - start;
ball.style.left = Math.min(progress / 10, 200) + 'px';
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animación con requestAnimationFrame</title>
<style>
.ball {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div class="ball"></div>
<script>
// Seleccionamos el elemento con clase "ball" y lo guardamos en la variable ball
const ball = document.querySelector('.ball');
// Variable para almacenar el tiempo de inicio de la animación
let start = null;
// Función de animación
function animate(time) {
// Si la animación se inicia por primera vez, guardamos el tiempo actual
if (!start) start = time;
// Calculamos el tiempo transcurrido desde el inicio de la animación
let progress = time - start;
// Establecemos la posición de la bola en función del tiempo transcurrido
// Limitamos el desplazamiento máximo a 200 píxeles
ball.style.left = Math.min(progress / 10, 200) + 'px';
// Si ha pasado menos de 2000 milisegundos, continuamos la animación
if (progress < 2000) {
requestAnimationFrame(animate);
}
}
// Iniciamos la animación
requestAnimationFrame(animate);
</script>
</body>
</html>
Explicación del código:
requestAnimationFrame: función que llama aanimatepara ejecutar cuadros de animaciónanimate: función que mueve el elemento.ball200 píxeles a la derecha en 2 segundos
10.3 Controlar animaciones CSS con JavaScript
JavaScript puede usarse para controlar las animaciones CSS, cambiando clases o estilos de elementos.
Ejemplo: Iniciar animación CSS al hacer clic en un botón
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciar animación al hacer clic en un botón</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 style="padding: 30px 0">
<div class="box" id="box"></div>
</div>
<button id="startButton">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iniciar animación al hacer clic en un botón</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">Start Animation</button>
<script>
document.getElementById('startButton').addEventListener('click', function() {
document.getElementById('box').classList.toggle('animate');
});
</script>
</body>
</html>
Explicación del código:
.box.animate: clase que agrega la animación moveAndRotate al elemento.box- JavaScript: el evento
clicken el botón#startButtonagrega o quita la claseanimateal elemento#box, iniciando la animación
10.4 Interacción con animaciones mediante eventos
Los eventos de animación, como animationstart, animationend y animationiteration, permiten seguir y controlar animaciones.
Ejemplo: Seguimiento de eventos de animación
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seguimiento de eventos de animación</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('Animación iniciada');
});
box.addEventListener('animationend', () => {
console.log('Animación terminada');
});
box.addEventListener('animationiteration', () => {
console.log('Iteración de animación');
});
</script>
</body>
</html>
Explicación del código:
animationstart: evento que se activa al inicio de la animaciónanimationend: evento que se activa al final de la animaciónanimationiteration: evento que se activa cada vez que se repite la animación
GO TO FULL VERSION