JavaScript: creare animazioni senza usare una libreria

Con JavaScript possiamo creare le nostre animazioni senza utilizzare una libreria.

Possiamo implementare la seguente soluzione:

// Funzione helper

var extend = function( target, source ) {
    var a = Object.create( target );
    Object.keys( source ).map(function ( prop ) {
        prop in a && ( a[prop] = source[prop] );
    });
    return a;
};

// Animazione

var animate = function( opts ) {

	var defaults = {
		delay: 10, // Ritardo
		duration: 1000, // Durata complessiva
		easing: function( p ) { // Funzione di easing
			return p; // Easing lineare predefinito
		},
		step: function( d ) {} // Ad ogni iterazione la modifica della proprietà CSS
	};

	opts = extend( defaults, opts );


	var start = new Date(); // Tempo iniziale

	var id = setInterval(function() {
		var timePassed = new Date() - start; // Tempo trascorso
		var progress = timePassed / opts.duration; // Avanzamento: da 0 a 1

		if( progress > 1 ) {
			progress = 1;
		}
		var delta = opts.easing( progress ); // Valore di easing
		opts.step( delta ); // Modifica del valore della proprietà CSS

		if( progress == 1 ) {
			clearInterval( id );
		}

	}, opts.delay || 10);
};

Demo

JavaScript: self-made animation