Alpha blending slider napisany w JavaScript

Autor podstrony: Krzysztof Zajączkowski

Stronę tą wyświetlono już: 2039 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:

Propozycje książek
tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera  autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych autor: Laurence Lars Svekis, Maaike van Putten, Rob Percival

Tytuł:

JavaScript od pierwszej linii kodu. Błyskawiczna nauka pisania gier, stron WWW i aplikacji internetowych

Autor:

Laurence Lars Svekis, Maaike van Putten, Rob Percival

tytuł: JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript autor: Kyle Simpson

Tytuł:

JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript

Autor:

Kyle Simpson

tytuł: JavaScript dla dzieci dla bystrzaków autor: Chris Minnick, Eva Holland

Tytuł:

JavaScript dla dzieci dla bystrzaków

Autor:

Chris Minnick, Eva Holland

tytuł: Modularny JavaScript dla zaawansowanych autor: Nicolas Bevacqua

Tytuł:

Modularny JavaScript dla zaawansowanych

Autor:

Nicolas Bevacqua

tytuł: JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi autor: Lynn Beighley

Tytuł:

JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi

Autor:

Lynn Beighley

tytuł: Matematyka dla programistów JavaScript autor: Jacek Piechota

Tytuł:

Matematyka dla programistów JavaScript

Autor:

Jacek Piechota

tytuł: JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera autor: Jon Duckett

Tytuł:

JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera

Autor:

Jon Duckett

tytuł: ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript autor: Nicholas C. Zakas

Tytuł:

ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript

Autor:

Nicholas C. Zakas

tytuł: JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II autor: Simon Timms

Tytuł:

JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II

Autor:

Simon Timms

W związku z tym, że firma Helion nie wywiązuje się z swoich zobowiązań naliczania prowizji za każdą zakupioną książkę a kontakt z ową frmą jest nie możliwy autor strony zmuszony został do zablokowania linkowania książek. Za wszelkie niedogodności z tym związane z góry przepraszam i obiecuję włączenie linkowania gdy tylko sprawa zostanie wyjaśniona