Animace pro front-end vývojáře - kurz 31 380 RUB. z HTML Academy, školení, Datum: 28. listopadu 2023.

Naším cílem je proměnit každého nováčka v plnohodnotného a vyhledávaného specialistu, připraveného pracovat ve webovém průmyslu.

V roce 2013 spustili Sasha a Lesha HTML Academy. Od samého začátku jsme se rozhodli naučit pracovat s živým kódem a řešit problémy, které se blíží těm skutečným. Poskytujeme příležitost získat nejen znalosti, ale i dovednosti. V procesu učení konfrontujeme studenta s testy, jejichž principem je „shoda, jak je ukázáno v modelu“. To je princip, na kterém pracuje většina návrhářů rozvržení.

Rozvržení považujeme za velmi užitečnou dovednost pro jakoukoli IT specializaci. Proto se snažíme, aby naše simulátory byly co nejzajímavější, návykové, interaktivní, neobvyklé a do jisté míry herní.

Připravili jsme simulátory, které pokrývají různé aspekty práce designéra layoutu. To stačí k důkladnému seznámení s rozložením. A pro ty, kteří chtějí vyrůst v profesionála, jsme připravili šest online kurzů. Tyto jedinečné vzdělávací programy vám umožní připravit specialisty s dovednostmi nezbytnými pro webový průmysl. A s tím nám pomáhají mentoři. Nyní s námi spolupracuje více než tři sta mentorů.

Pokud by vám nestačily simulátory a kurzy, pak se můžete podívat do regálu, kde postupně sbíráme knihy o vývoji webu. Nebo navštivte naše fórum a diskutujte o problému, který se vás týká.

Sekce 1Základy animace.

V první části se podíváme na historii animace. Jak vytvořit iluzi pohybu, hlavní rozdíly mezi klasickou a počítačovou animací. Jaké abstrakce existují pro konstrukci počítačové animace? Jaký je rozdíl mezi lineární animací a animací snímek po snímku? Podíváme se také na 12 principů expresivní animace. Poté vytvoříme jednoduché animované přechody v CSS.

• Potrubí pro provádění kódu v prohlížeči.
• Přechod a animace CSS: rozdíly.
• Časové funkce: vestavěný, krychlový-bezier.

Oddíl 4 Stop-motion animace. JavaScript a Canvas.

V této kapitole přejdeme k představení abstrakce nižší úrovně: animace snímek po snímku. Pojďme si prostudovat, co je FPS a standardní hodnoty FPS: 24, 30, 60. Co je plovoucí FPS. Podívejme se na příklady animace snímek po snímku:

• animace stavu postav ve hrách - metoda na webu Sprite Sheets - připravené animace, 360 model (například auto).
• počítačová animace, motion design - metoda na webu JS Tween a JS Morph - animace pomocí knihoven, např. CreateJS, AnimateJS, GSAP.
• hry, které sledují akce hráčů v reálném čase – závodění, Tetris – metoda vytváření modelů s interakčním rozhraním – ve webových interaktivních prvcích a hrách.

Budeme také nadále do hloubky studovat principy expresivní animace: jevištní přítomnost, atraktivita, profesionální kresba - pozornost vývojáře k detailu, kvalita výsledného obrazu.

V praktické části se naučíme používat:

• window.requestAnimationFrame.
• Plátno a jeho parametry a metody.
• Cyklus kreslení animace jednoduchého prvku. Proměny. Kreslení obrázku. Maskování. Abstraktní třída objektů je riga. Rozšíření třídy. Specifikace parametrické trajektorie. Příklady: elipsa, spirála, parabola, sinusovka, tlumená sinusovka atd.
• Manipulace s trajektoriemi: sčítání, násobení, paralelní přenos, sinusový fázový posun.
• Metody Update() a render().

Sekce 5 WebGL. Shadery.

V této kapitole budeme pokračovat v práci s animací snímek po snímku. Pojďme se naučit, co je WebGL a OpenGL. Podívejme se na rozdíl mezi prací v kontextu 2D a webgl. Pojďme prozkoumat, co jsou rastrové efekty:

• barevné filtry
• OpenGL
• masky – Lumination, Alpha
• barevné překryvy - prolnutí
• zvuky
• ofsety
• rozmazat

Budeme také studovat animaci rastrových efektů: neustálý pohyb a měnící se parametry.

V praxi se podívejme na:

• Co jsou vertexové a fragmentové shadery.
• Jak používat WebGL 3d pro 2D efekty.
• Co je geometrie.
• Pipeline WebGL.
• Interakce mezi JS a WebGL.
• Datové typy ve WebGL.
• Psaní GLSL – základy.

Oddíl 6 Three.js část 1: 3D v prohlížeči.

V této kapitole budeme opět hovořit o souřadnicových systémech, bodech a vektorech. Pojďme studovat 3D transformační matice, kvaterniony a Eulerovy úhly, násobení matic.

Zvažme 2 možnosti vytváření modelů s uživatelským ovládacím rozhraním:

• Přímé nastavení parametrů: rychlost nebo zrychlení (pohyb nebo rotace).
• Nastavení cíle – hodnota, ke které se musíte postupně přibližovat: prvek je přitahován ke kurzoru.
• Pojďme si prostudovat pracovní cyklus enginu, metody invalidate(), update() a render() a vlastnosti práce s plovoucí FPS. Pojďme se naučit, jak provádět výpočty uvnitř update().

V praktické části začneme pracovat s knihovnou Three.js. Pojďme se učit:

• Způsoby popisu objektů: poloha, geometrie a materiály.
• Geometrie: parametrická vestavěná, libovolně zatížitelná. Vyrovnávací paměť geometrie.
• Jaké materiály existují, typy materiálů, režimy vykreslování, vlastní materiály.
• Příznaky pro aktualizaci.
• Renderovací smyčka.
• Umístění animací. Morph animace metoda.
• Jeviště + kamera. Přidávání objektů na scénu. Seskupování.
• Světlo. Typy světelných zdrojů. Materiál Matcap.

Oddíl 7 Three.js část 2: Práce s kamerou.

V tomto díle se podíváme na to, co je kamera ve WebGL a konkrétně ve Three. JS:

• Ovládání kamery.
• Základní pohyby fotoaparátu.
• Soupravy fotoaparátů.
• Různé konstrukce návazců pro různé typy ovládání.

V praktické části:

• Podívejme se, jaké typy kamer jsou ve Three. JS, parametry fotoaparátu, změna velikosti při přechodu na mobilní verzi.
• Pojďme prozkoumat přístupy k animaci kamery. Podívejme se na reakci na akce uživatele – plynulou změnu perspektivy. Ovládání pomocí soupravy: cyklus renderování kamery. Vytvoření animace letu.
• Soupravy fotoaparátů.
• Zvažme přepínání mezi kamerami – střih. Pravidla instalace.

Oddíl 8 Budoucnost animace v prohlížeči.

V závěrečné části kurzu se podíváme na ta API, která ještě nejsou připravena k použití ve výrobě, ale stojí za to začít studovat již nyní, aby se v budoucnu zlepšila efektivita vaší práce.

• Podívejme se, jak se API Web Animation liší od běžné CSS animace a jaké další možnosti poskytuje.
• Pojďme se naučit základy Houdini API.
• Pojďme se bavit o knihovnách, které pomohou zjednodušit práci s animacemi, časovými osami, SVG, canvas, WebGL.
• Uvažujme programy pro práci s animací a grafikou pro web: Google Web Designer, Adobe Animate, Adobe After Effects, 3D grafické programy: Cinema 4d, Blender.
• Pojďme si udělat krátký přehled přístupů k vytváření dynamicky generované animace a grafiky. Podívejme se, jaké nástroje lze použít k vytvoření multiplatformního softwaru s 3D.
• Pojďme si říct, jak se můžete dále rozvíjet ve vytváření animace.