JavaScript: implementare i metodi fadeIn() e fadeOut() senza jQuery

Implementare i metodi fadeIn() e fadeOut() in JavaScript senza usare jQuery richiede una certa conoscenza del concetto di frame. I frame sono i mattoni che costituiscono l'ossatura delle animazioni e che ci permettono di modificare l'opacità di un elemento portandola da 100% a 0 e viceversa. Ogni frame corrisponde ad un valore numerico compreso tra i due valori di riferimento.

Useremo un oggetto con i seguenti membri:

• Un oggetto di easing dove definiremo i nostri algoritmi di easing.
• Un metodo di animazione che eseguirà l'animazione.
• I metodi fadeIn() e fadeOut().

Ecco il nostro oggetto:

(function() {
    var FX = {
        easing: {
            linear: function(progress) {
                return progress;
            },
            quadratic: function(progress) {
                return Math.pow(progress, 2);
            },
            swing: function(progress) {
                return 0.5 - Math.cos(progress * Math.PI) / 2;
            },
            circ: function(progress) {
                return 1 - Math.sin(Math.acos(progress));
            },
            back: function(progress, x) {
                return Math.pow(progress, 2) * ((x + 1) * progress - x);
            },
            bounce: function(progress) {
                for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
                    if (progress >= (7 - 4 * a) / 11) {
                        return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
                    }
                }
            },
            elastic: function(progress, x) {
                return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * x / 3 * progress);
            }
        },
        animate: function(options) {
            var start = new Date;
            var id = setInterval(function() {
                var timePassed = new Date - start;
                var progress = timePassed / options.duration;
                if (progress > 1) {
                    progress = 1;
                }
                options.progress = progress;
                var delta = options.delta(progress);
                options.step(delta);
                if (progress == 1) {
                    clearInterval(id);
                    options.complete();
                }
            }, options.delay || 10);
        },
        fadeOut: function(element, options) {
            var to = 1;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to - delta;
                }
            });
        },
        fadeIn: function(element, options) {
            var to = 0;
            this.animate({
                duration: options.duration,
                delta: function(progress) {
                    progress = this.progress;
                    return FX.easing.swing(progress);
                },
                complete: options.complete,
                step: function(delta) {
                    element.style.opacity = to + delta;
                }
            });
        }
    };
    window.FX = FX;
})()

Ciascun frame viene definito dalla variabile progress. Il suo valore si ottiene dividendo il tempo trascorso dall'inizio dell'animazione e la durata dell'animazione stessa. Useremo questo valore anche nei metodi di easing. Il metodo animate() andrà semplicemente a modificare il valore di destinazione (to) nei metodi fadeIn() (da 0 a 1) e fadeOut() (da 1 a 0).

Il metodo step() viene usato per modificare il valore di opacità su ogni frame. Quando un elemento viene mostrato, questo metodo sommerà il parametro delta al valore corrente di opacità. Quando un elemento viene nascosto si effettuerà l'operazione inversa.

Esempio:

document.getElementById('in').addEventListener('click', function() {
    FX.fadeIn(document.getElementById('test'), {
        duration: 2000,
        complete: function() {
            alert('Complete');
        }
    });
}, false);


document.getElementById('out').addEventListener('click', function() {
    FX.fadeOut(document.getElementById('test'), {
        duration: 2000,
        complete: function() {
            alert('Complete');
        }
    });
}, false);​