Alpha blending slider napisany w JavaScript

Stronę tą wyświetlono już: 114 razy

Prosty skrypt JavaScript tworzący slider trzech zdjęć mojego autorstwa poprzez zastosowanie techniki alpha blending. Slider co 5000 milisekund wykonuje efekt przejścia pomiędzy dwiema bitmapami. Przejście jest wykonywane przez około 2000 milisekund. Rezultat działania widoczny jest poniżej.

Rys. 1
Animacja wykonana przy użyciu JavaScript wykorzystująca technikę alpha blending

Zasada działania jest prosta dla każdej klatki przejścia należy obliczyć pewien współczynnik k w zależności od liczby ramek animacji nrOfFrames i bieżącego numeru ramki currentFrame:

wzór na współczynnik przejścia dla danej ramki efektu alpha blending [1]

Zapis wyrażenia w formacie TeX-a:

k=\frac{currentFrame}{nrOfFrames}

Po wyliczeniu powyższego współczynnika wystarczy dla każdej wartości tablicy kolorów opisujących bitmapę wykonać następujące przeliczenie:

wzór na przeliczenie wartości składowej koloru przejścia dla danej ramki efektu alpha blending [2]

Zapis wyrażenia w formacie TeX-a:

currentImage[i]=(secondImage[i] - firstImage[i]) \cdot k + firstImage[i]

gdzie:

  • currentImage[i] - i-ta składowa tablicy kolorów bitmapy docelowej;
  • firstImage[i] - i-ta składowa tablicy kolorów pierwszej bitmapy źródłowej;
  • secondImage[i] - i-ta składowa tablicy kolorów drugiej bitmapy źródłowej.

Komentarze