# Animacje na stronach internetowych Kamil Breguła --- ## Jak działa przeglądarka?  1. Javascript dokonuje jakiś zmian w arkuszu styli 2. Wyliczane są nowe wartości stylów dla elementow 3. **Gdy jest potrzeba** to wyliczane są nowe wymiary i położenie elementów 4. **Gdy jest potrzeba** to rysowany jest od nowa element 5. Kompozycja - łącznie warstw --- ## Transformacje CSS obsługuje transformacje podczas kompozycji. ````css transform: rotate(45deg); transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg) translateX(230px) transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px) ```` --- ## Kilka mechanizmów * Przejścia CSS (transition) * Animacje CSS (animation) * Animacje JS * Funkcje niskopoziomowe * Biblioteki * Animacje SVG --- ## Przejścia Bardzo proste. Wystarczają w większości wypadków. Nie wymagają bibliotek. W większości wypadków wydajne. Nie mogą się animować z wartości `auto` na konkretną. Trudne zarządzanie wieluelementów (Nie da się zrobić [akordeonu](http://getbootstrap.com/javascript/#collapse-accordion)) Demo: https://codepen.io/mik-laj/pen/xdGNrd --- ### Składnia ```css transition-property: background: transition-duration: 0.5s transition-timing-function: linear transition-delay: 3s; ``` Skrót: ```css transition: <property> <duration> <timing-function> <delay>; ``` Funkcje wygładzające: http://easings.net/pl --- ## Animacje CSS * Natywnie obsługiwane przez przeglądarkę * Trudno synchronizować wiele elementów * Brak możliwości określania właściwości przez czas. * +Wszystkie ograniczenia przejść Demo: https://codepen.io/mik-laj/pen/MmwdZj --- ## Składnia ````css animation-delay: 5s animation-direction: reversed animation-duration: 5s animation-iteration-count: infinite animation-name: bounce animation-play-state: paused animation-timing-function: linear animation-fill-mode: forwards animation: <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state> <name> ```` --- ## Animacje JS * Funkcje niskopoziomowe * Biblioteki --- ### Funkcje niskopoziomowe **SetTimeout/SetInterval** Demo: https://codepen.io/mik-laj/pen/MmwMrO **RequestAnimationFrame** Demo: https://jsfiddle.net/XQpzU/4358/ --- # Składnia ```javascript var i = 1; var frame = function() { i++; }; setInterval(frame, 1000 / 60); ``` --- ```javascript var start_time; var frame = function frame (time) { if (!start_time){ start_time = time; } var i = ( start_time - time ) / 1000; // Do something awesome window.requestAnimationFrame(frame); }; window.requestAnimationFrame(frame); ``` --- ## Biblioteki Polecane do złożonych animacji. ### GSAP Obsługuje morfing pomiędzy obiektami o różnej ilości punktów. http://codepen.io/mik-laj/pen/NjGyeQ http://codepen.io/GreenSock/pen/rOjeRq ### Velocity --- # Animacja SVG