# Animacje na stronach internetowych
Kamil Breguła
---
## Jak działa przeglądarka?
![](https://developers.google.com/web/fundamentals/performance/rendering/images/intro/frame-full.jpg =800x120)
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
{"metaMigratedAt":"2023-06-14T12:44:10.113Z","metaMigratedFrom":"Content","title":"Animacje na stronach internetowych","breaks":"true","contributors":"[]"}