Animacje CSS3 oraz interfejsy "przystosowujące się"

Egzamin zbliża się wielkimi krokami, a mi zostały jeszcze do opanowania (i omówienia na niniejszym blogu) trzy zagadnienia! W związku z tym w dzisiejszym dowiemy się czym są animacje CSS3 przy użyciu “tranzycji”; przyjrzymy się dwu- i trój- wymiarowymi transformacjami; zapoznamy się z “media queries” służącymi do uzależniania wyglądu aplikacji w zależności od rodzaju “medium”, na którym wyświetlana jest strona; dowiemy się także, jak za pomocą CSS3 pokazywać i ukrywać elementy dokumentu HTML. Zapraszam do lektury!

Animacje CSS3 za pomocą “tranzycji”

W ramach mojego cyklu przygotowującego do egzaminu 70-480, pisałem już na temat transformacji za pomocą CSS3. Opisałem tam w jaki sposób, za pomocą właściwości ‘translate’ (i jej odmian w różnych przeglądarkach), można zmieniać rozmiar, pochylać, przesuwać elementy HTML. Te oraz inne możliwości CSS3 mogą być jednak dodatkowo animowane przy użyciu tylko odpowiednich ustawień styli! Bez użycia choćby jednej linijki JavaScript!

Przykład użycia “tranzycji”

Sama “tranzycja” jest to definicja stylu informująca, że element ma się zmieniać wybrane ustawienie stylu z jednej wartości w drugą (zmiana zwykle następuje po najechaniu na element). Tranzycję definiuje się za pomocą właściwości ‘transition’ (a w zasadzie obecnie jej odmian w różnych przeglądarkach: “-ms-“, “-webkit-“, “-moz-“ oraz “-o-“). Spójrzmy na prosty przykład:

div {
    width: 100px;
    height: 70px;

    background: red;

    -ms-transition: width 1s;
    -webkit-transition: width 1s;
    -moz-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
}

W powyższym przykładzie widzimy definicję elementu blokowego <div>. Ustawiamy jej początkowe wartości szerokości i wysokości oraz kolor tła na czerwony. To co nas interesuje to definicja tranzycji w liniach od siódmej do jedenastej. Tutaj akurat definiujemy, że zmieniać będziemy wartość właściwości ‘width’ oraz że zmiana ta będzie trwała jedną sekundę.

Teraz wystarczy tylko zdefiniować jaka ma być wartość właściwości ‘width’ po zmianie:

div:hover {
    width: 200px;
}

Widać tutaj, że zmiana ma nastąpić w momencie najechania na element blokowy <div> oraz że element zmienia swą szerokość do 200 pikseli (wcześniej miał szerokość 100 pikseli co wynika z wcześniejszego przykładu). Przykład ten możecie przetestować na jsfiddle.net.

Tyle jeśli chodzi o podstawy, czas zagłębić się w możliwe ustawienia właściwości ‘transition’. Jak wspomniałem wcześniej, jako pierwszy parametr podajemy właściwość, której zmiana ma być animowana. W zasadzie może to być dowolna właściwość CSS, w tym ‘transform’ (tak jak wspomniałem na początku tego paragrafu; dzięki temu możemy na przykład dokonać animacji rotacji elementu o podaną ilość stopni). Możemy też w tym miejscu podać wartość ‘all’, co oznacza, że wszystkie właściwości elementu mogą zostać zmienione oraz wartość ‘none’ (myślę, że nie trzeba wyjaśniać jej znaczenia).

Kolejna wartość to czas przejścia z jednego ustawienia do drugiego - podajemy go w sekundach (s) lub milisekundach (ms). Jeśli wartość ta nie zostanie w ogóle podana, zmiana nie nastąpi ponieważ domyślnie wartość ta ustawiana jest na 0.

Funkcje wykonujące animacje

Tyle jeśli chodzi o wartości wymagane aby animacje CSS3 działały prawidłowo. Oprócz tego można podać jeszcze wartości dodatkowe. Pierwsza z nich to funkcja jaka ma zostać użyta do wykonania animacji w podanym czasie. Mamy tutaj kilka możliwości:

linear - ta sama prędkość przemiany od startu do końca animacji
ease - powolny start, potem szybko, a na końcu znów powoli (odpowiednik ‘cubic-bezier(0.25,0.1,0.25,1)’
ease-in - powolny start, później szybko aż do końca (odpowiednik ‘cubic-bezier(0.42,0,1,1)’
ease-out - najpierw szybko, a na końcu spowolnienie (odpowiednik ‘cubic-bezier(0,0,0.58,1)’
ease-in-out - podobie jak ‘ease’ tylko inne wartości dla odpowiednika - ‘cubic-bezier(0.42,0,0.58,1)’
cubic-bezier(n,n,n,n) - pozwala na zdefiniowania własnych zmiennych krzywej Beziera - wartości od 0 do 1

Ostatnim dostępnym ustawieniem jest opóźnienie - pozwala nam zdefiniować o ile sekund lub milisekund później ma się rozpocząć animacja. Tutaj również domyślną wartością jest 0.

Jeśli chcielibyśmy zdefiniować różne ustawienia animacji dla różnych właściwości CSS, robimy to oddzielając poszczególne grupy ustawień przecinkiem, tak jak w przykładzie poniżej:

transition: width 1s linear 2s, transform 3s ease;

Powyżej ustawiamy zmianę dla szerokości na 1 sekundę, sposób zmiany to ‘linear’, a opóźnienie 2 sekundy. Natomiast dla właściwości ‘transform’ animacja ma trwać 3 sekundy, a funkcja użyta do animacji to ‘ease’.

Uwaga! Opisywana właściwość ‘transition’ to wersja skrócona! Zamiast tego, użyć można konkretnych właściwości, odpowiednio: ‘transition-property’, ‘transition-duration’, ‘transition-timing-function’ oraz ‘transition-delay’.

Transformacje 2D oraz 3D

Tutaj ponownie, w sprawie transformacji 2D muszę odesłać Was do odpowiedniego wpisu, gdzie problem ten już dość dokładnie opisałem. W paragrafie tym, zajmiemy się więc transformacjami 3D.

Przykład transformacji 3D

CSS3 dostarcza szeregu funkcji pozwalających na różnego rodzaju transformacje 3D. Aby to pokazać, wykorzystajmy opisaną w poprzednim paragrafie możliwość animacji:

div {
    width: 100px;
    height: 70px;

    background: red;
    color: white;

    -ms-transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    transition: transform 1s;
}

div:hover{
     -ms-transform: rotateY(180deg);
     -moz-transform: rotateY(180deg);
     -webkit-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
     transform: rotateY(180deg);
}

Widać tutaj, że animujemy tutaj właściwość ‘transform’. Jednak jako wartość tej właściwości podajemy funkcję ‘rotateY()’ w celu obrotu o 180 stopni. Jak łatwo się domyślić, obrót następuje wokół osi Y (biegnącej przez środek elementu <div>) w odróżnieniu od funkcji rotate() gdzie obrót następował wokół środka elementu w jego płaszczyźnie. Zachęcam do przetestowania tego na jsfiddle.net, aby zrozumieć o jaką “trójwymiarowość” tutaj chodzi ;)

Pozostałe funkcje transformacji 3D

Funkcji dostępnych dla transformacji 3D jest dość dużo, dlatego ograniczę się tylko do powyższego przykładu. Natomiast poniżej zamieszczam wykaz pozostałych funkcji transformacji 3D wraz z krótkim opisem:

rotateX(angle) - obrót wokół osi X; podajemy kąt obrotu
rotateY(angle) - obrót wokół osi Y; podajemy kąt obrotu
rotateZ(angle) - obrót wokół osi Z; podajemy kąt obrotu
rotate3d(x,y,z,angle) - obrót wokół wektora określonego przez trzy pierwsze parametry; podajemy też kąt obrotu
scaleX(x) - skalowanie wzdłuż osi X; podajemy mnożnik skali
scaleY(y) - skalowanie wzdłuż osi Y; podajemy mnożnik skali
scaleZ(z) - skalowanie wzdłuż osi Z; podajemy mnożnik skali
scale3d(x,y,z) - skalowanie wzdłuż wektora podanego za pomocą trzech parametrów wywołania
translateX(x) - przesunięcie wzdłuż osi X; podajemy odległość przesunięcia
translateY(y) - przesunięcie wzdłuż osi Y; podajemy odległość przesunięcia
translateZ(z) - przesunięcie wzdłuż osi Z; podajemy odległość przesunięcia
translate3d(x,y,z) - przesunięcie wzdłuż wektora określonego za pomocą trzech parametrów wywołania
perspective(n) - pozwala na zdefiniowanie perspektywy
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - najbardziej specjalistyczna wartość; pozwala na zdefiniowanie tranformacji 3D za pomocą matrycy

Oprócz powyższych funkcji, CSS3 definiuje kilka dodatkowych właściwości “wspierających” transformacji 3D. Ich opis poniżej:

transform-origin - powala ustalić przesunięcie “środka/osi transformacji”; domyślnie ustawiony na wartość “50% 50% 0” gdzie poszczególne wartości oznaczają odpowiednio osie X, Y, oraz Z
transform-style - określa jak obiekty wewnętrzne są renderowane w przestrzeni 3D; dostępne wartości to ‘flat’ oraz ‘preserve-3d’
perspective - pozwala ustalić perspektywę, tzn. ile pikseli od płaszczyzny widoku znajduje się element; ustawienie odnosi się do elementów “dzieci”
perspective-orign - używane wspólnie z ‘perspective’, określa przesunięcie perspektywy względem osi X oraz Y
backface-visibility - określa, czy przy transformacji ma być widoczny “tył” elementu (na przykład przy rotacji o ponad 90 stopni); dostępne wartości to ‘visible’ oraz ‘hidden’.

Atrybut “media”

Opisywany atrybut (elementu <link>), pozwala uzależnić użycie wskazanego zasobu od tego w jakim rodzaju “medium” jest wyświetlany. Najczęściej jest on stosowany przy deklaracji arkuszy styli, do definiowania różnych styli w zależności od tego czy strona wyświetlana jest na ekranie komputera, w podglądzie wydruku czy na przykład na projektorze. Użycie styli można również uzależnić od udostępnianej przestrzeni na ekranie. Spójrzmy na prosty przykład użycia:

<link rel="stylesheet" type="text/css" href="site.css" media="screen">
<link rel="stylesheet" type="text/css" href="print_preview.css" media="print">

Widzimy użycie atrybutu media podczas ładowania arkuszy styli.

HTML5 pozwala również na dużo bardziej rozbudowane ograniczanie ładowania zasobów. Jako wartość atrybutu “media” można podać warunki logiczne - poniżej lista operatorów logicznych, których można użyć:

AND - operator “i”
NOT - zaprzeczenie
, - operator “lub”

Typy mediów

Podstawowymi typami mediów, które można podać jako wartość atrybutu “media” są:

all - wszystkie typy mediów
aural - syntezatory mowy
braile - “czytniki” pisma Braila
handheld - urządzenia mobilne typu “handheld”
projection - projektory
print - strony podglądu wydruku lub strony możliwe do wydrukowania
screen - ekran zwykłego komputera
tty - ograniczone możliwości wyświetlania, na przykład stare terminale, potrafiące wyświetlać tylko tekst
tv - telwizory (mała rozdzielczość, słaba możliwość “scrollowania”)

Parametry urządzenia docelowego

Oprócz tych podstawowych typów mediów, ładowanie zasobów można także ograniczyć w zależności od różnego rodzaju parametrów urządzenia docelowego. Oto lista tych parametrów:

width - określa szerokość udostępnianą do wyświetlania na urządzeniu (na przykład okno przeglądarki zmniejszone do połowy ekranu); możliwe jest użycie przedrostków “min-“ oraz “max-“; przykład: media=”screen and (max-width: 750px)”
height - podobnie jak dla ‘width’ tylko dotyczy wysokości
device-width - określa szerokość dostępną na docelowym urządzeniu (nie ma znaczenia czy okno przeglądarki zostało zmniejszone itp.); możliwe użycie przedrostków “min-“ oraz “max-“; przykład: media=”screen and (device-width: 630px)”
device-height - podobnie jak dla “device-width” tylko dotyczy wysokość
orientation - określa orientację docelowego ekranu/papieru; dostępne wartości to “portrait” oraz “landscape”; przykład: media=”print and (orientation: landscape)”
aspect-ratio - określa proporcje wyświetlania udostępnianą na urządzeniu docelowym; możliwe jest użycie przedrostka “min-“ oraz “max-“; przykład: media=”screen and (aspect-ratio: 16/9)”
device-aspect-ratio - określa proporcje wyświetlania urządzenia docelowego; “min-“ oraz “max-“ dopuszczalne; przykład: media=”screent and (min-device-ascpect-ratio: 4/3)”
color - określa ilość bitów na kolor ekranu urządzenia docelowego; “min-“ oraz “max-“ dopuszczalne; przykład: media=”screen and (color: 3)”
color-index - określa ilość dostępnych kolorów na ekranie urządzenia docelowego; “min-“ oraz “max-“ dopuszczalne; przykład: media=”screen and (color-index: 256)”
monochrome - określa ilość bitów na pixel dla ekranów monochromatycznych; “min-“ oraz “max-“ dostępne; przykład: media=”screen and (monochrome: 2)”
resolution - określa rozdzielczość (w dpi lub dpcm) docelowego ekranu/papieru; “min-“ oraz “max-“ możliwe do użycia; przykład: media=”print and (resolution:400dpi)”
scan - określa sposób wyświetlania obrazu; dostępne wartości to “progressive” oraz “interlace”; przykład: media=”tv and (scan:interlace)”
grid - określa czy na wyjściu urządzenia jest siatka czy bitmapa; dostępne wartości to 1 jeśli siatka lub 0 jeśli nie; przykład: media=”handheld and (grid:1)”

Definiowanie “media” w arkuszu

Oprócz definiowania tych ograniczeń jako wartości atrybutu “media”, możliwe jest również zdefiniowanie ich wewnątrz samego arkusza stylu. Robi się to w sposób następujący:

@media screen and (min-width: 768px) {
      body {
          width: 75%;
      }
}

@media print and (landscape: portrait) {
      body {
          width: 90%;
      }
}

Myślę więc, że rozwiązanie to jest dość elastyczne ;)

Manipulacja widocznością elementów

Ten paragraf będzie krótki, ponieważ nie ma tutaj za wiele opcji ;) W zasadzie to są dwie… Pierwsza to właściwość ‘visibility’ - przypisanie jej wartości ‘hidden’, powoduje ukrycie danego elementu jednak nadal wpływa on na interfejs, tzn. nadal zajmuje on tę samą przestrzeń, którą zajmowałby będąc widocznym. Domyślną wartością tej właściwości jest ‘visible’ i myślę, że tutaj nie ma co wyjaśniać ;) Jest jeszcze jedna dostępna dla ‘visibility’ wartość, a mianowicie ‘collapse’ - ma ona zastosowanie tylko dla tabel, jej użycie powoduje, że wiersz lub kolumna znika nie zajmując miejsca, w przeciwieństwie do wartości ‘hidden’. Warto sobie to przetestować na stronach w3schools: wartość ‘hidden’ oraz wartość ‘collapse’.

Drugą możliwość ukrycia elementu daje właściwość ‘display’. Wystarczy ustawić jej wartość na ‘none’, a element znika nie wpływając w żaden sposób na interfejs użytkownika (nie zajmując miejsca). Oczywiście właściwości ‘display’ ma jeszcze kilka innych dostępnych wartości, ale nie są one tematem dzisiejszego wpisu (nie dotyczą widoczności elementu).

Podsumowanie

Widać, że CSS3 daje wiele ciekawych możliwości na uatrakcyjnienie interfejsu użytkownika (animacje CSS3) oraz na dostosowanie go warunków zastanych na urządzeniach klienckich. Może to pozwolić na zmniejszenie niepotrzebnego JavaScript’u na stronach oraz na lepsze dostosowanie interfejsów użytkownika do dzisiejszych standardów.

Do końca tego “kursu” pozostały już tylko dwa wpisy! Zapraszam ;)