Animowana pętla tekstu: krzywe Lissajous

Kiedy użytkownik musi poczekać na zakończenie czasochłonnego procesu (np. pobieranie pliku lub zakończenie obliczeń), zamiast wyświetlać nudny komunikat "proszę czekać" lub kręcące się kółko, co powiesz na animowany świecący tekst?

Oto jak to działa (pełny kod poniżej):

Wiersze [1-6] ustawiają element HTML5 Canvas.
[7] Ustaw rozmycie - to właśnie sprawia, że litery "świecą".
[8] Reset głównego licznika.
[9] Tekst, który chcemy wyświetlić.

[11-25] Główna pętla animacji:
[12] Wyczyść poprzednią klatkę.
[13] Dla każdej litery:
[14] Oblicz pomocniczy licznik
[15-16] Współrzędne x i y litery są obliczane za pomocą wzoru wykorzystującego sinus/cosinus pomocniczego licznika (krzywa Lissajous wokół środka canvasa).
Spróbuj pobawić się różnymi wartościami, do tych doszedłem metodą prób i błędów.
[17] Kolor RGB litery:
Składowa czerwona zależy od współrzędnej x.
Składowa zielona jest zawsze zerowa.
Składowa niebieska zależy od współrzędnej y.
To daje następującą mapę kolorów:

[18-19] zastosuj kolor do litery i cienia (rozmycia).
[20] Rozmiar litery (font) zależy od współrzędnej x.
[21] Narysuj literę.
[23] Zwiększ główny licznik.
[24] Zażądaj następnej klatki.
[26] Start!

<html>

let canvas = document.getElementById("myCanvas");

let context = canvas.getContext("2d");

context.shadowBlur = 20;

let counter = 0;

let text = ' Ładowanie........';

function animate() {

context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < text.length; i++) {

let counter2 = counter / 10 + i;

let x = canvas.width / 2 + 200 * Math.sin(counter2 / (Math.PI * 1.2));

let y = canvas.height / 2 + 160 * Math.cos(counter2 / (Math.PI * 8));

let color = `rgb(${Math.floor(x / 2)}, 0, ${Math.floor(y)})`;

context.fillStyle = color;

context.shadowColor = color;

context.font = 'bold ' + x / 10 + 'px sans-serif';

context.fillText(text.charAt(i), x, y);

}

counter++;

window.requestAnimationFrame(animate);

}

animate();

</script>

</body>

</html>

Więcej samouczków JS

Gra "Wieża" - 84 linie JavaScript

Fraktale - 25 linii

Sinus scroll - 30 linii

Gra "Angry Chickens"

Animowane krzywe kwadratowe - 40 linii

Animowane konstelacje cząsteczek - 42 linie

Eksperyment z enginem fizyki