Animacija za front-end programere - tečaj 31 380 RUB. iz HTML Akademije, trening, Datum: 28.11.2023.

Naš je cilj pretvoriti svakog pridošlicu u punopravnog i traženog stručnjaka, spremnog za rad u web industriji.

Godine 2013. Sasha i Lesha pokrenuli su HTML akademiju. Od samog početka odlučili smo podučavati kako raditi sa živim kodom, rješavajući probleme koji su bliski stvarnim. Pružamo priliku za stjecanje ne samo znanja, već i vještina. U procesu učenja, učenika suočavamo s testovima, čiji je princip “podudaranje kako je prikazano u modelu”. Ovo je princip po kojem radi većina dizajnera izgleda.

Smatramo da je raspored vrlo korisna vještina za bilo koju IT specijalnost. Stoga nastojimo naše simulatore učiniti što zanimljivijim, zaraznijim, interaktivnijim, neobičnijim i donekle nalik igri.

Pripremili smo simulatore koji pokrivaju različite aspekte rada layout dizajnera. Ovo je dovoljno da se temeljito upoznate s izgledom. A za one koji žele izrasti u profesionalce, pripremili smo šest online tečajeva. Ovi jedinstveni obrazovni programi omogućuju vam da pripremite stručnjake s vještinama potrebnim za web industriju. I mentori nam pomažu u tome. Sada s nama radi više od tri stotine mentora.

Ako vam simulatori i tečajevi nisu dovoljni, onda možete pogledati policu s knjigama, gdje postupno prikupljamo knjige o web razvoju. Ili posjetite naš forum i raspravite o problemu koji vas brine.

odjeljak 1Osnove animacije.

U prvom dijelu ćemo pogledati povijest animacije. Kako stvoriti iluziju kretanja, glavne razlike između klasične i računalne animacije. Koje apstrakcije postoje za konstruiranje računalne animacije? Koja je razlika između linearne animacije i animacije okvir po kadar? Također ćemo pogledati 12 principa ekspresivne animacije. Nakon ovoga izradit ćemo jednostavne animirane prijelaze u CSS-u.

• Cjevovod za izvršavanje koda u pregledniku.
• CSS prijelaz i animacija: razlike.
• Funkcije vremena: ugradbeni, kubični bezier.

odjeljak 4 Stop-motion animacija. JavaScript i Canvas.

U ovom poglavlju prijeći ćemo na uvođenje apstrakcije niže razine: animacija kadar po kadar. Proučimo što je FPS i standardne FPS vrijednosti: 24, 30, 60. Što je plutajući FPS. Pogledajmo primjere animacije okvir po kadar:

• animacija stanja likova u igrama - metoda na webu Sprite Sheets - pripremljene animacije, 360 model (npr. auto).
• računalna animacija, dizajn pokreta - metoda u webu JS Tween i JS Morph - animacija korištenjem biblioteka, na primjer, CreateJS, AnimateJS, GSAP.
• igre koje prate akcije igrača u stvarnom vremenu - utrke, Tetris - metoda stvaranja modela s interakcijskim sučeljem - u web interaktivnim elementima i igrama.

Također ćemo nastaviti detaljno proučavati principe ekspresivne animacije: prisutnost na pozornici, atraktivnost, profesionalni crtež - razvojna pažnja posvećena detaljima, kvaliteta konačne slike.

U praktičnom dijelu naučit ćemo koristiti:

• window.requestAnimationFrame.
• Platno i njegovi parametri i metode.
• Ciklus crtanja animacije jednostavnog elementa. Transformacije. Crtanje slike. Maskiranje. Klasa apstraktnog objekta je riga. Proširenje razreda. Parametarska specifikacija putanje. Primjeri: elipsa, spirala, parabola, sinusni val, prigušeni sinusni val itd.
• Manipulacije s putanjama: zbrajanje, množenje, paralelni prijenos, sinusoidni fazni pomak.
• Metode Update() i render().

odjeljak 5 WebGL. Shaderi.

U ovom poglavlju nastavit ćemo raditi s animacijom kadar po kadar. Naučimo što su WebGL i OpenGL. Pogledajmo razliku između rada u kontekstu 2D i webgla. Istražimo što su rasterski efekti:

• filteri u boji
• OpenGL
• maske – Lumination, Alpha
• preljevi boja – stapanje
• šumovi
• kompenzacije
• zamutiti

Proučavat ćemo i animaciju rasterskih efekata: stalno kretanje i mijenjanje parametara.

U praksi, pogledajmo:

• Što su vertex i fragment shaderi.
• Kako koristiti WebGL 3d za 2D efekte.
• Što je geometrija.
• Cjevovod WebGL.
• Interakcija između JS i WebGL.
• Vrste podataka u WebGL-u.
• Pisanje GLSL-a - osnove.

odjeljak 6 Three.js 1. dio: 3D u pregledniku.

U ovom poglavlju ponovno ćemo govoriti o koordinatnim sustavima, točkama i vektorima. Proučimo 3D transformacijske matrice, kvaternione i Eulerove kutove, množenje matrica.

Razmotrimo 2 opcije za izradu modela s korisničkim kontrolnim sučeljem:

• Izravno postavljanje parametara: brzina ili ubrzanje (kretanje ili rotacija).
• Postavljanje cilja - vrijednost kojoj se morate postupno približavati: element privlači kursor.
• Proučimo radni ciklus motora, metode invalidate(), update() i render() te značajke rada s plutajućim FPS-om. Naučimo kako raditi izračune unutar update().

U praktičnom dijelu počet ćemo raditi s Three.js bibliotekom. Idemo učiti:

• Načini opisivanja objekata: položaj, geometrija i materijali.
• Geometrija: parametarski ugrađena, proizvoljno učitava. Geometrijski međuspremnik.
• Koji materijali postoje, vrste materijala, načini renderiranja, prilagođeni materijali.
• Oznake za ažuriranje.
• Petlja renderiranja.
• Animacije položaja. Metoda Morph animacije.
• Pozornica + kamera. Dodavanje objekata na scenu. Grupiranje.
• Svjetlo. Vrste izvora svjetlosti. Matcap materijal.

odjeljak 7 Three.js dio 2: Rad s kamerom.

U ovom ćemo dijelu pogledati što je kamera u WebGL-u, a posebno u Three-u. JS:

• Kontrola kamere.
• Osnovni pokreti kamere.
• Oprema kamera.
• Različiti dizajni opreme za različite vrste kontrole.

U praktičnom dijelu:

• Pogledajmo koje vrste kamera postoje u Three. JS, parametri kamere, promjena veličine pri prelasku na mobilnu verziju.
• Istražimo pristupe animaciji kamerom. Pogledajmo reakciju na radnje korisnika – glatka promjena perspektive. Upravljanje pomoću opreme: ciklus renderiranja opreme kamere. Izrada animacije leta.
• Oprema kamera.
• Razmotrimo prebacivanje između kamera - uređivanje. Pravila instalacije.

odjeljak 8 Budućnost animacije u pregledniku.

U završnom dijelu tečaja osvrnut ćemo se na one API-je koji još nisu spremni za upotrebu u proizvodnji, ali vrijedi ih početi proučavati sada kako biste poboljšali učinkovitost svog rada u budućnosti.

• Pogledajmo kako se API za web animaciju razlikuje od obične CSS animacije i koje dodatne mogućnosti pruža.
• Naučimo osnove Houdini API-ja.
• Razgovarajmo o bibliotekama koje će vam pomoći pojednostaviti rad s animacijama, vremenskim trakama, SVG-om, platnom, WebGL-om.
• Razmotrimo programe za rad s animacijom i grafikom za web: Google Web Designer, Adobe Animate, Adobe After Effects, programe za 3D grafiku: Cinema 4d, Blender.
• Uzmimo kratki pregled pristupa stvaranju dinamički generirane animacije i grafike. Pogledajmo koji se alati mogu koristiti za izradu višeplatformskog softvera s 3D.
• Razgovarajmo o tome kako se možete dalje razvijati u stvaranju animacije.