Dynamický CSS: transformace objektů

Animace prvků stránky může fungovat jako samostatný proces, nebo může být provedena pro vizualizaci akcí návštěvníků. V každém případě transformace elementu CSS neovlivňuje celkový tok a provádí se bez ohledu na obsah stránky jako celku.

Při používání pravidel a vývoji logiky pro změnu prvků je velmi důležité použití správných hodnot vlastností a pravidel. Transformace CSS neposkytuje vývojářovi možnosti správy. Všechny transformace jsou prováděny podle daných funkcí a jejich hodnot.

Obecná pravidla transformace

Logika realizovaná v myšlence transformační funkce je zkreslení prvku. Prvky stránky jsou obdélníkové oblasti, i když je zobrazena hladkou grafikou uvnitř.

Změnou rozměrů stran plochy nebo jejich posunutí (posunutí) může být:

• vzniká dynamika;
• perspektiva vzniká;
• hlasitost je splněna.

V každém případě se všechny transformace vyskytují v rovině, ale výsledek je možný jak při 2D, tak 3D mapování.

Následující příklad ukazuje čtyři oblasti, z nichž každá má transformaci CSS.

Horní řádek obrázků je původní, dolní řádek je výsledkem použití funkcí. Chcete-li demonstrovat hlavní funkce používané následující popis CSS a zobrazí vložení do HTML stránky.

V tomto příkladu transformace nastane, když umístíte kurzor myši na prvek a přidělíte ho přes pseudotřídní vznášedlo.

Pokud jde o vlastnost transformace při použití funkce překládat, je třeba poznamenat, že transformace CSS může být nahrazena levým a horním vlastnostem. Pokud jde o zkreslení od funkce zkosení - výsledek nemusí být předvídatelný.

Předpokládá se, že zkosení je zřídka využíváno, ale se správnou a složitou aplikací CSS animace se zkosením dovolí budovat dynamiku v trojrozměrném prostoru, když se prvek pohybuje. Například "kosmická sonda na oběžné dráze" v kontextu webové stránky může být pohybem zboží skrze prodejnu v obchodním prostoru.

Perspektiva v transformaci

Transformace textu v CSS může mít zvláštní efekt při aplikaci perspektivy. Příklad ukazuje, jak lze normální reprezentaci textu převést na pseudo-3D text.

Možná to má smysl v některých problémech, ale praktičnost obráceného nápadu je zřejmá: můžete dát informace v perspektivě, a když se nad nimi pohybujete, myš se přemění na normální zobrazení. Je kompaktní a efektivní.

Tyto příklady transformace jsou popsány v CSS následujícím způsobem:

Použití vlastností původu transformace umožňuje určení bodu, ve kterém bude transformace probíhat. Přesunutím tohoto bodu můžete ovládat střed, ve vztahu k němuž se provádí transformace CSS.

Funkce rotace má dvě možnosti - rotateX a rotateY - ale bez "X" a "Y" má jeden parametr.

Ve všech případech by měla být transformace prvků laděna na jednoduchých příkladech, aby se předešlo neočekávanému výsledku. Je lepší nejprve správně vytvořit pravidlo a popsat vlastnost jednoduchým prvkem, než okamžitě zahrnout do spektra požadovaných transformací. Správná formulace pravidel a vlastností v CSS je klíčem k úspěchu a efektivním výsledkům.

Použití vlastnosti animace

CSS animace prostřednictvím animace a @keyframes doplňuje možnosti transformace, což umožňuje transformaci na skutečnou reprezentaci prostřednictvím řízeného pohybu prvku nebo řízené transformace jeho formy.

Horní čára prvků je jejich normální stav. První sloupec se přesune, druhý sloupec se otáčí a třetí sloupec se stupní. Zobrazeno několik snímků. Pro implementaci této funkce se používá následující kód:

Dynamiku a trvání procesu lze nastavit v animacích a @keyframech. K dispozici je postupná a postupná změna procesu. Můžete použít jednotnou změnu a pohyb při akceleraci.

Vlastnosti animace

Animační vlastnost je obvykle napsána v jednom řádku. Obsahuje osm parametrů:

• animation-name - název animace;
• trvání animace - trvání animace (sekundy "s", milisekundy "ms");
• animace - časování - typ animace (jednoduchost, lineární, lehkost, snadnost, lehkost, kubický bezier);
• animace - počet iterací - počet opakování animace nebo nekonečný;
• směr animace - směr pohybu (normální, zpětný, střídavý, střídavý);
• animace - přehrávání - stahování animace (běží, pozastaveno);
• animační zpoždění - zpoždění animace před začátkem přehrávání (sekundy "s", milisekundy "ms");
• Animation-fill-mode - přehrávání animace mimo stanovenou dobu přehrávání (
• žádný, dopředu, zpět, oba);

Když vytvoříte animaci podle animace, transformační vlastnosti jsou zadány v pravidle @keyframes, který definuje postupnost transformace prvku v krocích.

Důležité možnosti animace

Každá animace má jméno, trvání a typ. Název definuje požadovaný popis @keyframes, délka určuje čas procesu a typ určuje variantu pohybu.

Je-li požadován jednotný proces (pohyb a / nebo transformace), použije se lineární hodnota. Pokud chcete mít na začátku zrychlení - uvolnění, pokud na konci - lehkost. Jednoduché ovládání je posuvné a snadné ovládání je jeho hladší.

Hodnota cubic-bezier vám umožňuje formulovat komplexní verzi pohybu a vytvořit originálnější verzi animace.

Na webové stránce výrobce můžete zvolit libovolnou standardní možnost provozu a navrhnout vlastní. Když klepnete na tlačítko GO, dva čtverečky se budou pohybovat paralelně a můžete porovnat rozdíly a vizuálně vytvořit požadované chování prvku.

Vytváření animačních rámců

Vlastnost @keyframes je "determinant" rámců (viz výše uvedený příklad), kterým se element transformuje. Myšlenka nemovitosti je velmi jednoduchá, ale nabízí obrovské příležitosti.

Proces začíná na 0% a končí na 100% celkového času přiděleného animaci. Můžete použít pouze koncové body od a do nebo 0% a 100%. Větší efekt lze dosáhnout rozdělením celého animačního / transformačního procesu na části. Krok stránky může být libovolný.

Obvykle jsou přijímána několik možností: 0%, 25%, 50%, 75% a 100%. Někdy jsou k dispozici pouze tři snímky: 0%, 50% a 100%. Jak jednat v každém případě závisí na úkolu a vývojáři.

Při konstrukci jakékoliv verze transformace je třeba dodržovat jedno důležité pravidlo. jаvascript není vždy možné používat, zejména pro programovou změnu vlastností prvků, například změnu hodnoty vlastnosti pozadí.

HTML, CSS a jаvascript jsou perfektně kombinovány, ale ve všech případech musíte vzít v úvahu skutečné funkce každé z těchto komponent. V ideálním případě, když pracují v jasné kombinaci a neinterferují se navzájem.