Pobranie najmniejszej lub największej liczby z tablicy jest bardzo prosta.

Mamy tablicę:

const data = [-5, 25, -18, 0, 9, 100, 1.25];

Żeby pobrać minimalną wartość, piszemy:

Math.min(...data); // -18

Maksymalna wartość:

Math.max(...data); // 100

Nowy działa na blogu: Demo

Będą tam znajdować się działające przykłady z kodów źródłowych opisanych we wpisach. Jak narazie znajdują się dwa przykłady.

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));

Pisząc w Canvas w JavaScript do tworzenia animacji zaleca się używanie funkcji: requestAnimationFrame.

I za pomocą niej dowiemy się, ile upłynęło czasu od jej uruchomienia.

Ile upłynęło czasu od startu animacji?

Poniżej przykład:

  let start;
  const render = (timestamp) => {
    if (start === undefined) {
      start = timestamp;
    }
		
    const elapsed = parseInt((timestamp - start) / 1000);

    console.log(`elapsed: ${elapsed}`);
    requestAnimationFrame(render);
  }

  render();

Więc mamy funkcję render. Posiada ona jeden parametr: timestamp. To znacznik czasu, który będzie przekazany poprzez wywołanie funkcji requestAnimationFrame.

Przy pierwszym wywołaniu przypisujemy zmiennej start wartość. Jest to znacznik czasu pierwszego wywołania animacji. A później w zmiennej elapsed zapisujemy, ile czasu upłynęło od startu. Ponieważ znacznik czasu jest podany w milisekundach więc żeby wiedzieć ile to sekund, dzielimy różnicę między znacznikami przez 1000. 1 sekunda = 1000 milisekund.

Restart animacji

Załóżmy, że chcemy, żeby nasza animacji trwała 3 sekundy. Po upływie tego czasu chcemy zacząć wszystko od nowa. Oto przykład:

  let start;
  const animationTime = 3;
  const render = (timestamp) => {

    if (start === undefined) {
      start = timestamp;
    }

    const elapsed = parseInt((timestamp - start) / 1000);

    if (elapsed >= animationTime) {
      start = timestamp;
    }

    console.log(`elapsed: ${elapsed}`);
    requestAnimationFrame(render);
  }

  render();

Została dodana nowa zmienna animationTime, która przechowuje liczbę, mówiącą ile czasu ma trwać animacja. Sprawdzamy warunek: elapsed >= animationTime jeśli jest spełniony, to znaczy, że czas animacji się skończył, więc resetujemy znacznik czasu.

Tak na marginesie: nie tworzymy tutaj żadnej animacji. Ale możemy wykorzystać czas, jaki upłynął do stworzenia ciekawych efektów.