Biblioteca JavaScript para animación pequeña Performant-jsAnimator

Vista prévia

Descripción

jsAnimator es una biblioteca de animación de JavaScript ligera y ultrarrápida que se utiliza para manejar animaciones en cualquier elemento usando < a href = "https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target = "_ blank" rel = "noopener" > requestAnimationFrame API.

¿Cómo funciona?

Descargue e importe la biblioteca jsAnimator en el documento.

<script src="./src/jsAnimator.js"></script>

Agregue una nueva animación a un elemento. Este ejemplo muestra cómo es posible utilizar jsAnimator para animar el elemento HTML mediante CSS.

jsAnimator.add({

handle: document.getElementById("example"),

position : {



w: 30,



h: 30,



t: 0,



l: 0

},

/**

 * the div will translate to left each iteration by 5 px and it will increase its width by 2px

 */

fn_update : function(){



this.position.l += 5;



this.position.w += 2;

},

/**

 * animation stop when rectangle position reach 500px to the left

 */

fn_stop : function(){



return (this.position.l >= 500)

},

/**

 * draw the rectangle by setting its style with css

 */

fn_draw : function(){



this.handle.style.left = this.position.l + "px";



this.handle.style.width = this.position.w + "px";



this.handle.style.height = this.position.h + "px"

}
});

Inicie la animación.

jsAnimator.animationStart();

Más API.

jsAnimator.setGlobalOnFrameRenderEnd()

jsAnimator.setGlobalOnFrameRenderStart()

jsAnimator.animationStop()

jsAnimator.animationToggle()

jsAnimator.renderNext

jsAnimator.length

Echa un vistazo a más ejemplos en la cremallera para más usos.