mo.js: JavaScript Framework for Complex Animations

mo.js: marco de JavaScript para animaciones complejas

Los conceptos básicos para animaciones exigentes dentro del navegador se establecen gracias a CSS3 y JavaScript. Pero las características de CSS y los métodos de JavaScript solo permiten un movimiento general. El marco mo.js, sin embargo, permite animaciones mucho más complejas utilizando funciones de aceleración únicas pero rápidas de configurar.

Entrada fácil, pero sin documentación todavía

Como mo.js funciona sin jQuery u otras bibliotecas, todo lo que necesita hacer es implementar el archivo JavaScript del marco. En el paquete de descarga, hay un documento HTML de demostración en el que ya están configurados el archivo JavaScript y un elemento „

“. Eso significa que puede iniciar instantáneamente y echar un vistazo a todas las opciones de mo.js. Puede encontrar varios tutoriales en el sitio web, que explican qué hace mo.js y cómo usarlo con la ayuda de ejemplos de código y una demostración. Desafortunadamente, hasta ahora solo hay tutoriales para las opciones de aceleración. No hay tutoriales disponibles para los diferentes módulos y funciones de interpolación. También falta una documentación. Pero mo.js ya no es una herramienta de animación fascinante por su forma única de crear funciones complejas de aceleración.

mojs_tutorialesPágina de tutoriales

Sintaxis fácil para animaciones fáciles

Usar mo.js es muy sencillo. Puede crear nuevas animaciones y asignarlas a cualquier elemento deseado a través de „mojs.Tween()“. La cantidad de repeticiones y la duración de las animaciones se establecerán mediante parámetros. Un controlador de eventos le permite controlar la animación real.

new mojs.Tween({
  repeat: 2,
  duration: 3000,
  delay: 1000,
  onUpdate: function (progress) {
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * progress + "px)";
 }
}).run();

En el ejemplo, se crea una animación de tres segundos que comienza después de un segundo y se repite dos veces. A través de «onUpdate()», se accede a una función que es responsable de la animación real. El progreso de la animación se entrega a través de «progreso». Es un valor que cuenta de 0 a 1 durante la animación. En el ejemplo, el valor se utiliza para calcular la animación. Para hacerlo, el «progreso» se multiplica por el valor objetivo de la animación: 200 en el ejemplo. El elemento „

“ sube 200 píxeles en el eje y a través de „translateY()“.

Creación de aceleraciones con rutas

Se ingresaron varias funciones de aceleración para animaciones usando CSS3. En total, solo hay cinco opciones diferentes y simples disponibles: «lineal», «ease», «ease-in», «ease-out» y «ease-in-out». „cubic-bezier()“ también le permite crear una aceleración individual con una curva bezier.

mojs_easingLos caminos sientan las bases para las flexibilizaciones

También puede desarrollar una aceleración completamente personalizada con muchas aceleraciones y frenos usando mo.js. Estos están definidos por una ruta basada en el elemento SVG „“. Por ejemplo, dibuja una ruta en Illustrator y la guarda en formato SVG. Los valores de las rutas marcadas en los atributos „d“ se utilizarán como base para su aceleración.

var bouncyEasing = mojs.easing.path("M0,100 C6.50461245,96.8525391 …");

En el ejemplo, una ruta SVG se entrega como una ruta de aceleración usando „mojs.easing.path()“; una función que convierte la aceleración de un elemento con el atributo CSS «transformar».

new mojs.Tween({
  onUpdate: function (progress) {
    var bounceProgress = bouncyEasing(progress);
    document.getElementsByTagName("div")[0].style.transform = "translateY(" + 200 * bounceProgress + "px)";
  }
}).run();

En este ejemplo, un elemento „

“ con una aceleración personalizada en el eje y se anima gracias a „translateY()“. En lugar de un movimiento lineal, como se ve en el primer ejemplo, ahora puedes integrar tantos frenos y aceleraciones como quieras. De esta manera, también puede revertir la dirección del movimiento con una ruta dibujada en consecuencia. Una animación hecha con las características clásicas de aceleración de CSS3 solo funciona en una dirección. Con mo.js, no solo puede mover un elemento, sino también cambiar su forma. Se puede usar „scaleX()“ o „scaleY()“ para hacer que un elemento cambie su tamaño mientras está animado.

Amplias opciones de animación

Algunos ejemplos en el sitio web de mo.js muestran las amplias opciones de animación de mo.js. Solo podemos esperar que la documentación se publique pronto y que se publiquen más tutoriales. Actualmente, la usabilidad de mo.js está restringida. Si lo desea, también puede familiarizarse con el marco por su cuenta, utilizando los ejemplos.mojs_beispielAnimaciones complejas usando mo.js

Aunque no todas las características están documentadas, mo.js vale la pena echarle un ojo. El marco está disponible para uso privado y comercial bajo la licencia liberal MIT.

(dpe)

#mojs #marco #JavaScript #para #animaciones #complejas

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *