JavaScript Engine Popmotion: animaciones interactivas en un instante
Los sitios web estáticos sin animaciones son cada vez menos comunes o menos comunes, según el punto de vista. CSS3 y JavaScript proporcionan muchos efectos para transiciones animadas y animaciones más complejas. Incluso las animaciones interactivas ya no plantean ningún problema general para el desarrollo web. Sin embargo, los movimientos especialmente complejos en combinación con elementos interactivos requieren un cierto esfuerzo de programación. El motor de JavaScript Popmotion proporciona una amplia gama de herramientas que lo ayudan a crear diversas animaciones interactivas e interfaces de usuario animadas.
Clear Division: Popmotion utiliza actores y preadolescentes
La base para un movimiento pop la animación es el llamado Actor. Los actores son elementos HTML que se mueven mediante una acción como una interpolación o una simulación.
var ball = new ui.Actor("#ball");
En el ejemplo, convertimos el elemento HTML con el ID «bola» en un Actor a través de «ui.Actor()». El aspecto de un elemento se establece utilizando CSS como de costumbre. Posteriormente, definimos una acción que describe la forma de la animación.
Tween es recomendable para una animación clásica. Aquí, elegimos cómo debe verse la animación del actor.
var move = new ui.Tween({
values: {
y: 100
}
});
En el ejemplo, se crea un movimiento simple a través de „ui.Tween()“. Un objeto literal le permite agregar más propiedades a la interpolación. Aquí, el valor «y» se establece en 100. Eso significa que el actor se moverá hacia abajo 100 píxeles siguiendo el eje y.
Las características de Popmotion
En el último paso, Actor y tween deben unirse.
ball.start(move);
Los lectores cuidadosos probablemente ya lo hayan notado. Hasta ahora, la interpolación no es diferente de las animaciones CSS3 nativas. Sin embargo, Popmotion proporciona un montón de parámetros adicionales. Por ejemplo, hay multitud de flexibilizaciones que superan lo que ofrece CSS3.
ball.start(move.extend({
duration: 5000,
ease: "backOut"
}));
A través de «extender()», puede agregar parámetros adicionales a la animación. Además de la «duración» para la duración de la animación, puede ingresar una función de aceleración con «facilidad». La palabra clave „backOut“, por ejemplo, hace que la animación exceda el objetivo definido al principio y luego retroceda como un material elástico.
Popmotion avanzado: simulación física a través de simulaciones
Existen los llamados simulados como alternativa a los interpolados clásicos. Estos son diferentes de los preadolescentes en la forma en que funcionan. Al reemplazar «ui.Tween()» con «ui.Simulate()» en el ejemplo, la animación cambia su comportamiento.
var move = new ui.Simulate({
values: {
y: 100
}
});
Ahora, el Actor no se mueve 100 píxeles hacia abajo, sino infinitamente. El valor „y“ ahora determina el movimiento por segundo. Eso significa que el actor se mueve hacia abajo 100 píxeles por segundo.
Además, las simulaciones proporcionan parámetros específicos que permiten la simulación de animaciones físicas. Existe el parámetro „aceleración“ que define la aceleración de la animación. Se debe ingresar un valor que represente la aceleración en unidades por segundo.
ball.start(move.extend({
acceleration: 500
}));
En el ejemplo, el Actor acelera a 500 píxeles por segundo. Como alternativa a la aceleración, se puede introducir un valor para la fricción mediante „fricción“. Aquí se debe introducir un valor entre 0 y 1. 1 es equivalente a la fricción máxima. Una animación se desacelera rápida o lentamente dependiendo del valor.
ball.start(move.extend({
friction: 0.1
}));
Controlador de eventos para interacciones
Para asegurarse de que las animaciones se puedan usar de forma interactiva, Popmotion proporciona un par de controladores de eventos que pueden permitir el acceso a una función en cualquier punto de la animación: al principio, al final y en cualquier cuadro.
var ball = new ui.Actor({
element: "#ball",
onComplete: function() {
alert("Finished.");
}
});
En el ejemplo, agregamos el controlador de eventos «onComplete» y la ID del elemento al actor. Todo está etiquetado como un objeto literal, por lo que la identificación debe depositarse como un valor de «elemento».
Una vez que se ha mostrado la animación, se reproduce una alerta simple en el ejemplo.
Seguimiento con Popmotion: uso de entradas de usuario para movimientos
Otro aspecto interesante y útil es el llamado seguimiento. Permite al usuario mover un elemento en un área limitada usando el mouse.
var tracking = new ui.Track({
values: {
x: {
min: 0,
max: 100
}
}
});
En el ejemplo, se define un área entre 0 y 100 píxeles para el eje x. A través de un evento, ahora puede usar el seguimiento en el Actor.
document.getElementById("ball").addEventListener("mousedown",function(e) {
e.preventDefault();
e.stopPropagation();
ballActor.start(tracking, e);
}, false);
El usuario ahora puede mover el elemento con la «bola» de ID entre 0 y 100 píxeles en el eje x manteniendo presionado el botón del mouse. Gracias al seguimiento, puede definir fácilmente las barras de progreso.
Conclusión, Costos y Licencia
Las opciones presentadas son solo una pequeña parte de lo que el motor de JavaScript es capaz de hacer. Vale la pena echar un vistazo a las guías a medida que obtiene una impresión detallada de Popmotion. También hay una extensa documentación.
Las guías muestran lo que Popmotion puede hacer
La biblioteca no tiene ni 50 kilobytes de tamaño y funciona sin dependencias. No se necesitan jQuery u otros marcos para usar Popmotion. El motor utiliza JavaScript contemporáneo como «requestAnimationFrame» para mostrar animaciones de forma eficaz.
Popmotion es de uso gratuito para proyectos no comerciales. El uso comercial cuesta alrededor de USD 10 por mes y proyecto.
(dpe)
#JavaScript #Engine #Popmotion #animaciones #interactivas #instante