Zaokrąglanie narożników

Biblioteka mintAjax umożliwia zaokrąglanie narożników dowolnych elementów wraz z obramowaniem oraz wyborem promienia zaokrąglenia. Do zaokrąglania narożników służy funkcja mint.fx.Round przyjmująca jeden parametr wymagany oraz cztery opcjonalne, są to kolejno: identyfikator lub element, narożniki, promień oraz określenie zachowania wysokości. Wybór narożników odbywa się poprzez przekazanie identyfikatorów narożników oddzielonych spacjami, dostępne identyfikatory to: all (wszystkie narożniki), top (górne narożniki), bottom (dolne narożniki), tl (górny-lewy narożnik), tr (górny-prawy narożnik), bl (dolny-lewy narożnik) oraz br (dolny-prawy narożnik). Przykładowo jeśli chcemy zaokrąglić tylko narożniki po prawej stronie, łańcuch przyjmie postać "tr br" (domyślnie zaokrąglane są wszystkie narożniki). Kolejnym parametrem jest promień zaokrąglenia, który również przekazujemy w postaci łańcucha i może on przyjąć jedną z trzech wartości: "small" (mały promień - 4px, domyślnie ustawiony), "medium" (średni promień - 7px) oraz "large" (największy promień - 11px). Ostatni parametr określa czy zachowana ma być wysokość elementu - domyślnie wysokość zaokrąglonego elementu jest dostosowywana do jego zawartości.

Przykład

function Round() {
    mint.fx.Round("box1");
    mint.fx.Round("box2", "top", null, 80);
    mint.fx.Round("box3", "all", "large");
    mint.fx.Round("box4", "tl br", "small", true);
}

<a onclick="Round()">Zaokrąglij elementy</a>
<div id="box1" class="box">Box #1</div>
<div id="box2" class="box">Box #2</div>
<div id="box3" class="box">Box #3</div>
<div id="box4" class="box">Box #4</div>

Cechy wspólne animacji

W bibliotece mintAjax znajduje się szereg funkcji służących do tworzenia animowanych efektów na elementach. Wszystkie efekty posiadają kilka cech wspólnych, a są nimi: czas animacji, ilość kroków, funkcje zdarzeniowe oraz funkcje do kontrolowania animacji.

Należy pamiętać, że im więcej kroków tym płynniejsza animacja, lecz również większe obciążenie procesora. Ilość kroków powinno się dobierać odpowiednio do czasu trwania animacji oraz jej rozmiaru. Przykładowo jeśli zamierzamy przesunąć element z jednego końca strony na drugi w ciągu dwóch sekund, to będziemy musieli ustawić więcej kroków dla uzyskania płynnej animacji niż gdyby element miał pokonać kilkukrotnie krótszą odległość.

Wszystkie animacje podczas swojego trwania wywołują dwie funkcje zdarzeniowe: pierwszą z nich przy każdym kroku animacji, natomiast drugą po zakończeniu animacji. Ponadto dostępne są trzy funkcje służące do kontrolowania animacji, są to kolejno: mint.fx.Stop (zatrzymuje daną animację), mint.fx.IsRunning (sprawdza czy dana animacja jest aktualnie wykonywana) oraz mint.fx.GetElapsedTime (zwraca czas, który upłynął od rozpoczęcia danej animacji).

W przypadku ustawienia efektu dla elementu, na którym wykonywany jest już efekt tego samego typu, aktualna animacja zostaje przerwana i rozpoczynana jest nowa. Wszystkie nazwy styli przekazujemy do funkcji w postaci JS tj. bez myślników.

Zmiana dowolnego stylu

Pierwszą funkcją do animacji jaką się zajmiemy jest mint.fx.Style służąca do animowanej zmiany dowolnego stylu numerycznego (oprócz kolorów, do animacji których służy opisana dalej funkcja mint.fx.Color). Funkcja mint.fx.Style przyjmuje sześć parametrów wymaganych oraz dwa parametry opcjonalne. Są to kolejno: identyfikator lub element, nazwa stylu, wartość początkowa stylu (w przypadku braku tego parametru pobierana jest aktualna wartość stylu), wartość końcowa, ilość kroków, czas animacji oraz dwie funkcje zdarzeniowe.

Przykład

function StartFX() {
    mint.fx.Style("box", "fontSize", null, 36, 40, 1000);
    mint.fx.Style("box", "marginLeft", null, 250, 40, 1000);
    mint.fx.Style("box", "width", null, 500, 40, 1000);
}

<button onclick="StartFX()">Rozpocznij animacje</button>
<div id="box">Lorem Ipsum</div>

Zmiana kolorów

Kolejna funkcja to mint.fx.Color , który służy do animowanej zmiany kolorów danego stylu. Funkcja ta przyjmuje sześć parametrów wymaganych oraz dwa opcjonalne, są to kolejno: identyfikator lub element, nazwa stylu, wartość początkowa koloru (w przypadku przekazania wartości null pobrany zostanie aktualnie ustawiony kolor dla danego stylu), wartość końcowa, ilość kroków, czas animacji oraz dwie funkcje zdarzeniowe. Kolory przekazywane są w postaci HEX.

Przykład

function ColorIn() {
   mint.fx.Color("box", "backgroundColor", null, "B22222", 20, 500);
   mint.fx.Color("box", "borderColor", null, "000000", 20, 500);
}

function ColorOut() {
   mint.fx.Color("box", "backgroundColor", null, "B7C059", 20, 500);
   mint.fx.Color("box", "borderColor", null, "8F9D11", 20, 500);
}

Najedź kursorem na element, aby zmienić jego kolor.

Zmiana położenia

Do animowanej zmiany położenia elementu służy funkcja mint.fx.Move przyjmująca pięć parametrów wymaganych (identyfikator lub element, pozycja końcowa w osi X, pozycja końcowa w osi Y, ilość kroków i czas trwania animacji) oraz dwa opcjonalne (funkcje zdarzeniowe).

Przykład

function Move() {
mint.fx.Move("box", 400, 50, 20, 500);
}

Kliknij na element, aby zmienić jego położenie.

Zmiana rozmiarów

Następną funkcją jest mint.fx.Size , służąca do animowanej zmiany rozmiarów elementu. Przyjmuja ona pięć parametrów wymaganych (identyfikator lub element, końcowa szerokość, końcowa wysokość, ilość kroków i czas trwania animacji) oraz dwie opcjonalne funkcje zdarzeniowe.

Przykład

function Size() {
mint.fx.Size("box", 200, 200, 20, 500);
}

Kliknij na element, aby zmienić jego rozmiar.

Zmiana przezroczystości

Ostatnim efektem jest zmiana przezroczystości, służy do tego funkcja mint.fx.Fade przyjmująca cztery parametry wymagane (identyfikator lub element, końcowa przezroczystość, ilość kroków oraz czas trwania animacji) oraz dwie opcjonalne funkcje zdarzeniowe. Identyczny efekt można uzyskać wywołując funkcję mint.fx.Style dla stylu "opacity", funkcja mint.fx.Fade została ze względu na kompatybilność z poprzednimi wersjami biblioteki.

Przykład

function FadeIn() {
mint.fx.Fade("box", 100, 20, 500);
}

function FadeOut() {
mint.fx.Fade("box", 0, 20, 500);
}

<a onclick="FadeIn()">Pokaż element</a>
<a onclick="FadeOut()">Schowaj element</a>
<div id="box"></div>

Grupowanie animacji

W przypadku animowania wielu styli jednego lub kilku elementów, które trwają tyle samo czasu i wykonywane są w takiej samej ilości kroków, znacznie wydajniejsze jest utworzenie grupy animacji. Do utworzenie grupy animacji służy funkcja mint.fx.Group przyjmująca dwa parametry wymagane (ilość kroków iz czas trwania animacji) oraz trzy parametry opcjonalne (domyślnie animowany styl dla wszystkich elementów w grupie oraz dwie funkcje zdarzeniowe). Funkcja zwraca obiekt typu FxGroup zawierający cztery funkcje składowe: Add (dodaje efekt do grupy), Run (rozpoczyna animacje), Stop (zatrzymuje animacje) oraz Clear (usuwa wszystkie efekty z grupy).

Przykład

function StartAnimation() {
    var group = mint.fx.Group(null, 40, 1000, null, GroupDone);

    group.Add("box", "left", null, 100);
    group.Add("box", "width", null, 200);
    group.Add("box", "opacity", null, 0);

    group.Run();
}

<a onclick="StartAnimation()">Rozpocznij animacje</a>
<div id="box"></div>

Kontrolowanie animacji

Do kontrolowania animacji służą trzy funkcje: IsRunning , GetElapsedTime oraz Stop . Pierwsza z nich sprawdza czy dany styl elementu jest aktualnie animowany, druga funkcja zwraca czas, który upłynął od rozpoczęcia animacji danego stylu, natomiast ostatnia z funkcji zatrzymuje daną animację. Wymienione funkcje przyjmują dwa parametry: identyfikator elementu lub element oraz nazwę stylu, przy czym do funkcji Stop jako nazwę stylu można dodatkowo przekazać wartości: "move", "size" oraz "fade", odpowiedające efektom wywołanym przez funkcje mint.fx.Move, mint.fx.Size oraz mint.fx.Fade.

« poprzedni artykuł		następny artykuł »