Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

Popmotion el motor de animaciones de JavaScript

Popmotion el motor de animaciones de JavaScript 30.NOV.15

Alvaro José Rios Ch
Fundador WebBizarro

Generalmente no creamos interfaces de usuario desde cero pero hay momentos en que lo que encontramos en el mercado no es suficiente y tenemos que hacer algo por nuestra cuenta. Muchas veces estas interfaces de usuario necesitan animaciones, detección de entradas o incluso agregar algunos efectos de movimiento para eso Popmotion es una solución que nos facilita mucho el trabajo con un API poderoso y fácil de usar.

Popmotion centra su trabajo en tres partes fundamentales, la primera son las animaciones que por lo general es lo más usado al crear interfaces de usuario, la librería nos permite crear animaciones Tween que pueden ir desde lo más simple como cambiar el tamaño o el color a un objeto svg como crear animaciones para botones para que al hacer clic sobre ellos muestren una onda, algo así.

La segunda parte es la física, que nos permite crear movimientos similares a los del mundo real usando easing y variando la velocidad sobre el tiempo. Esta parte nos permite añadir, velocidad, aceleración, fricción, restringir los movimientos, agregar rebotes con perdida de velocidad y una propiedad de resorte que te permite crear interfaces mucho más divertidas.

Finalmente podemos encontrar el traking que nos permite detectar el comportamiento del usuario y reaccionar a el, como cuando hacemos clic, soltamos y desplazamos el ratón por la pantalla, esto nos permite crear elementos como barras de desplazamiento sin mucho código.

Como pueden ver es una librería muy simple de usar y además muy poderosa, con una gran distribución ya que puedes usarla con Bower, Meteor o simplemente importando el archivo y con muchas características que harán tu vida más fácil, así que si tienes que hacer cosas muy complejas comienza a usar Popmotion.