Canvas: Efekt przejścia - manipulowanie kanałem alpha

Poniżej przedstawiam kod takiego efektu:

HTML:

<canvas id="canvas" width="640" height="480"></canvas>

JavaScript:

    let start;
    const effectTime = 3000;
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    const draw = (timestamp) => {
        if (start === undefined) {
            start = timestamp;
        }
        const elapsed = timestamp - start;

        if (elapsed > effectTime) {
            start = timestamp; // restart animacji, zaczynamy od nowa
        }
				
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const w = imageData.width;
        const h = imageData.height;
        for (let y = h - 1; y >= 0; y--) {
            for (let x = 0; x < w; x++) {
                let index = (y * w + x) * 4;
                imageData.data[index + 3] = parseInt(255 * (elapsed / effectTime));
            }
        }

        ctx.putImageData(imageData, 0, 0);

        requestAnimationFrame(draw);
    }

    draw();

Do stworzenia tego efektu korzystam z techniki manipulowania pikselami.

Zmienna effectTime przechowuje czas w milisekundach, ile ma zająć cała animacja.

Za sam efekt przejścia odpowiada ta linijka:

imageData.data[index + 3] = parseInt(255 * (elapsed / effectTime));

Na samym początku animacji będziemy mieć pełną przeźroczystość (wartość równa zero lub bliska zeru). Wraz z upływem czasu przeźroczystość będzie maleć.

Jeśli chcemy uzyskać efekt odwrotny: czyli najpierw brak przeźroczystości, a na końcu pełna wystarczy napisać:

imageData.data[index + 3] = 255 - parseInt(255 * (elapsed / effectTime));