Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Python týden

Lekce 10 - Průběhy animací elementů

V předchozí lekci, Animace efektů při interakci s elementy (tooltip), jsme si ukázali, jak se dají měnit elementy, když je uživatel například překryje kurzorem myši.

Vítejte u další lekce ohledně animací v CSS3, ve které si ukážeme průběhy animací.

V této lekci se naučíme následující průběhy animací:

Průběhy animací
localhost

Typy průběhu funkce

V této lekci pro nás bude důležitá znalost matematiky, a to konkrétně průběh funkcí. Jak jsme si již ukázali v předchozích lekcích, změny a animace elementů na stránce mohou mít určité průběhy. Buď se provedou okamžitě, nebo s nějakým časovým průběhem. Teď se podíváme na všechny způsoby nastavení časových průběhů funkcí, které nám CSS3 umožňuje:

  • linear - Animace probíhá stejně rychle v každém časovém okamžiku.
  • ease - Animace probíhá na začátku pomalu, poté rychle a na konec znovu pomalu (výchozí nastavená animace).
  • ease-in - Animace probíhá ze začátku pomalu a poté rychle.
  • ease-out - Animace probíhá rychle a ke konci pomalu.
  • ease-in-out - Animace probíhá na začátku i na konci pomalu (je pomalejší než ease).
  • step-start - Animace probíhá skokem, a poté končí na začátku průběhu (stejně jako steps(1, start)).
  • step-end - Animace probíhá skokem a poté končí na konci průběhu (stejně jako steps(1, end)).
  • steps(n, start/end) - Animace probíhá po krocích, a poté končí buď na začátku nebo konci průběhu.
  • cubic-bezier(n, n, n, n) - Animace spojitá v čase s tím, že uživatel definuje vlastní hodnoty pro funkci (mohou být od 0 do 1).
  • initial - Animace se nastaví na výchozí hodnotu (ease).
  • inherit - Animace se nastaví podle hodnoty nadřazeného elementu.

Abychom si je všechny názorně ukázali, vytvoříme si stránku s barevným kruhem:

<div class="title">Průběh animace</div>
<br>
<br>
<div class="kruh"></div>

V CSS nastylujeme popis a vytvoříme kruh pomocí vlastnosti border-radius:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.title {
    text-transform: uppercase;
    font-family: 'Calibri', sans-serif;
    font-weight: bold;
}

.kruh {
    width: 70px;
    height: 70px;
    background-color: blue;
    border-radius: 100%;
}

Máme tedy zatím toto:

Průběh animace
localhost

linear

Jak jsme si již popsali, průběh této funkce je v každém jejím časovém úseku stejně rychlý. Vytvoříme si tedy ještě třídu .animation:

<div class="title">Průběh animace - Linear</div>
<br>
<br>
<div class="kruh animation"></div>

K třídě si vytvoříme ještě keyframes animace. Tu potom přidáme k našemu kruhu:

.animation {
    animation: 5s animace linear infinite;
}

@keyframes animace {
    0%{margin-left: -700px;}
    50%{margin-left: 700px;}
    100%{margin-left: -700px;}
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Ve výsledku máme tento průběh:

Průběh animace - Linear
localhost

ease

Jak už jsme zmínili v tabulce na začátku článku, toto je přednastavený průběh všech animací. Ze začátku se element mění pomalu, poté rychle a na konci opět pomalu. Upravíme naši třídu .animation, a to tak, že jí ve vlastnosti animation nastavíme místo linear hodnotu ease:

.animation {
    animation: 5s animace ease infinite;
}

V HTML pozměníme jen nadpisek animace, jinak bude HTML vždy totožné:

Průběh animace - Ease
localhost

ease-in

Animace s pomalým průběhem na začátku a rychlým průběhem na konci. Opět provedeme nutné úpravy naší třídy .animation:

.animation {
    animation: 5s animace ease-in infinite;
}

HTML je tedy totožné a jako výsledek budeme mít toto:

Průběh animace - Ease-in
localhost

ease-out

Obrácený průběh oproti ease-in, za začátku rychlý průběh a ke konci pomalý:

.animation {
    animation: 5s animace ease-out infinite;
}

Výsledek:

Průběh animace - Ease-out
localhost

ease-in-out

Kombinace průběhů ease-in a ease-out nám dává průběh ease-in-out, neboli animaci s pomalým začátkem a koncem:

.animation {
    animation: 5s animace ease-in-out infinite;
}

Ukázka:

Průběh animace - Ease-in-out
localhost

step-start

Animace s jednokrokovým průběhem na začátku (viz. steps níže):

.animation {
    animation: 5s animace step-start infinite;
}

Ukázka průběhu:

Průběh animace - Step-Start
localhost

step-end

Animace s jednokrokovým průběhem na konci (viz. steps):

.animation {
    animation: 5s animace step-end infinite;
}

Výsledek animace:

Průběh animace - Step-End
localhost

steps

Tato animace se nastavuje pomocí dvou parametrů, a to počtu kroků a hodnoty start nebo end. Pokud se nastaví pouze počet kroků, přednastavená hodnota je end. Počet nastavených kroků musí být větší než 0, jinak se animace neprovede. Hodnota start označuje levou spojitou funkci, takže k prvnímu kroku dojde, když animace začne. Hodnota end naopak označuje pravou spojitou funkci, takže poslední krok se provede jakmile animace skončí. Pro ukázku použijeme steps(10, end):

.animation {
    animation: 5s animace steps(10, end) infinite;
}

Ukázka průběhu steps:

Průběh animace - Steps
localhost

cubic-bezier

Jako poslední průběh si ukážeme cubic-bezier. Toto nastavení průběhu animace je specifické v tom, že uživatel sám definuje parametry. Parametry jsou celkem 4. První a poslední definují počáteční a konečný čas průběhu (nejčastěji tedy 0 pro začátek animace a 1 pro konec animace). Druhý a třetí určují zrychlení změny v první polovině a druhé polovině. Hezky je to vidět na stránkách cubic-bezier.com:

.animation {
    animation: 5s animace cubic-bezier(1, -0.94, 0.09, 1.57) infinite;
}

Jako poslední máme číslo 1.57. Řekli jsme si, že hodnota 1 je konec animace, 1.57 je tedy nadmíru (odejde z bloku):

Průběh animace - Cubic-Bezier
localhost

A to je vše, nyní už umíme u našich animací nastavit jakýkoliv pohyb v čase. Pokud není něco jasné, všechny zobrazené ukázky si můžete stáhnout v příloze této lekce :)

V další lekci, Rotace elementů, si ukážeme, jak lze otáčet elementy ve 2D a 3D prostoru. Využijeme při tom funkce matrix(), rotate() a skew().


 

Stáhnout

Staženo 18x (1.23 kB)

 

Předchozí článek
Animace efektů při interakci s elementy (tooltip)
Všechny články v sekci
CSS3
Článek pro vás napsal Filip Opluštil
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Aktivity (3)

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!