Biblioteca de JavaScript para crear animaciones CSS basadas en la física-Dynamics. js

Vista prévia

Descripción

Dynamics. js es una biblioteca de JavaScript simple pero robusta para crear animaciones CSS basadas en la física para propiedades CSS, elementos SVG y objetos JavaScript. Construido con CoffeeScript.

Animation types included:

• Primavera
• Rebote
• forceWithGravedad
• Gravedad
• Bezier
• easeInOut
• easeIn
• easeOut
• Lineal

Funcionamiento

Cargue la biblioteca de JavaScript de Dynamics. js en el documento.

<script src="lib/dynamics.js"></script>

Uso básico:

/* Animates an element to the properties with the animation options.

 el is a DOM element, a JavaScript object or an Array of elements

 properties is an object of the properties/values you want to animate.

 options is an object representing the animation


 -- type is the animation type: dynamics.spring, dynamics.easeInOut,... (default: dynamics.easeInOut)


 -- frequency, friction, bounciness,... are specific to the animation type you are using


 -- duration is in milliseconds (default: 1000)


 -- delay is in milliseconds (default: 0)


 -- complete (optional) is the completion callback


 -- change (optional) is called at every change
*/
dynamics.animate(el, properties, options)

/* Stops the animation applied on the element */
dynamics.stop(el)

/* This is applying the CSS properties to your element with the correct browser prefixes. */
dynamics.css(el, properties)

/* Dynamics.js has its own setTimeout.


The reason is that requestAnimationFrame and setTimeout have different behaviors.


In most browsers, requestAnimationFrame will not run in a background tab while setTimeout will.


This can cause a lot of problems while using setTimeout along your animations.


I suggest you use Dynamics's setTimeout and clearTimeout to handle these scenarios.
*/
dynamics.setTimeout(fn, delay)

// Clears a timeout that was defined earlier
dynamics.clearTimeout(id)

/* Toggle a debug mode to slow down every animations and timeouts.


This is useful for development mode to tweak your animation.


This can be activated using Shift-Control-D in the browser.
*/
dynamics.toggleSlow()

Registro de cambios

08/28/2016

• v1.1.5