Motor de animación de JavaScript eficiente-diferencial. js

Vista prévia

Descripción

Un motor de animación de JavaScript/HTML ligero y ultrarrápido que hace posible animar cualquier cosa dentro del documento.

Funcionamiento

Instalar/descargar e importar el JavaScript compilado ' diferencial. js ' en el documento.

<script src='dist/differential.js'></script>

Cree un contenedor donde desee mostrar las animaciones.

<div id='demo'>

</div>

Cree un contenedor donde desee mostrar las animaciones.

var el = document.getElementById('test');
el.style.backgroundColor = 'blue';
el.style.width = '100px';
el.style.height = '100px';

function an() {


el.D([{






backgroundColor: 'red',






border: '20px solid rgb(255,255,0)',






width: '-=30px',






height: '-=30px'




},




{






backgroundColor: 'green',






border: '5px solid rgb(255,0,0)',






width: '+=30px',






height: '+=30px'




},




{






backgroundColor: 'blue',






borderColor: 'rgb(0,255,0)'




},




{






backgroundColor: 'rgb(255,0,255)',






border: '20px solid blue'




},




{






backgroundColor: 'rgb(0,255,255)',






border: '5px solid rgb(255,0,255)'




},




{






backgroundColor: 'rgb(255,255,0)',






borderColor: 'rgb(255,0,255)',




}


], 1000, 'swing', an);
}
an();

Cree un contenedor donde desee mostrar las animaciones.

easing: 'swing',
done: function () {},
queue: true,
specialEasing: null
step: null
progress: null
start: function () {},
duration: 400

API methods.

// Adds an easing effect.
D.addEase(name, easing);

// Pauses the animation
D.stop();

// Starts the animation
D.start();

// Clear
D.clear();

Registro de cambios

10/21/2018

• Actualización de JS