Animacija za front-end razvijalce - tečaj 31.380 RUB. iz HTML Academy, usposabljanje, datum: 28. november 2023.

Naš cilj je vsakega novinca spremeniti v polnopravnega in iskanega strokovnjaka, pripravljenega za delo v spletni industriji.

Leta 2013 sta Sasha in Lesha ustanovila Akademijo HTML. Že na samem začetku smo se odločili, da bomo učili delati s kodo v živo, reševati probleme, ki so blizu resničnim. Omogočamo pridobitev ne le znanja, ampak tudi veščin. V učnem procesu učenca soočimo s testi, katerih princip je »ujemaj, kot je prikazano v modelu«. To je načelo, po katerem deluje večina oblikovalcev postavitev.

Menimo, da je postavitev zelo uporabna veščina za vsako IT specialnost. Zato se trudimo, da bi bili naši simulatorji čim bolj zanimivi, zasvojljivi, interaktivni, nenavadni in nekoliko podobni igricam.

Pripravili smo simulatorje, ki pokrivajo različne vidike dela oblikovalca postavitev. To je dovolj, da se temeljito seznanite s postavitvijo. Za tiste, ki želijo zrasti v profesionalce, smo pripravili šest spletnih tečajev. Ti edinstveni izobraževalni programi vam omogočajo, da pripravite strokovnjake z veščinami, potrebnimi za spletno industrijo. In mentorji nam pri tem pomagajo. Zdaj z nami sodeluje več kot tristo mentorjev.

Če vam simulatorji in tečaji niso dovolj, potem lahko pogledate na knjižno polico, kjer postopoma zbiramo knjige o spletnem razvoju. Ali pa obiščite naš forum in se pogovorite o vprašanju, ki vas skrbi.

Oddelek 1Osnove animacije.

V prvem delu si bomo ogledali zgodovino animacije. Kako ustvariti iluzijo gibanja, glavne razlike med klasično in računalniško animacijo. Katere abstrakcije obstajajo za konstruiranje računalniške animacije? Kakšna je razlika med linearno animacijo in animacijo okvir za okvirjem? Ogledali si bomo tudi 12 principov ekspresivne animacije. Po tem bomo ustvarili preproste animirane prehode v CSS.

• Cevovod za izvajanje kode v brskalniku.
• Prehod in animacija CSS: razlike.
• Časovne funkcije: vgradna, cubic-bezier.

Oddelek 4 Stop-motion animacija. JavaScript in Canvas.

V tem poglavju bomo predstavili abstrakcijo na nižji ravni: animacijo okvir za okvirjem. Preučimo, kaj je FPS in standardne vrednosti FPS: 24, 30, 60. Kaj je plavajoči FPS. Oglejmo si primere animacije okvir za okvirjem:

• animacija stanja likov v igrah - metoda na spletu Sprite Sheets - pripravljene animacije, 360 model (npr. avto).
• računalniška animacija, oblikovanje gibanja - metoda v spletu JS Tween in JS Morph - animacija z uporabo knjižnic, na primer CreateJS, AnimateJS, GSAP.
• igre, ki spremljajo dejanja igralca v realnem času - dirke, Tetris - metoda ustvarjanja modelov z vmesnikom za interakcijo - v spletnih interaktivnih elementih in igrah.

Nadaljevali bomo tudi s poglobljenim preučevanjem principov ekspresivne animacije: odrska prezenca, atraktivnost, profesionalna risba - razvijalčeva pozornost do podrobnosti, kakovost končne slike.

V praktičnem delu se bomo naučili uporabljati:

• window.requestAnimationFrame.
• Platno in njegovi parametri ter metode.
• Cikel risanja animacije preprostega elementa. Preobrazbe. Risanje slike. Maskiranje. Razred abstraktnega objekta je riga. Razširitev razreda. Parametrična specifikacija trajektorije. Primeri: elipsa, spirala, parabola, sinusni val, dušeni sinusni val itd.
• Manipulacije s trajektorijami: seštevanje, množenje, vzporedni prenos, sinusoidni fazni premik.
• Metodi Update() in render().

Oddelek 5 WebGL. Senčniki.

V tem poglavju bomo nadaljevali z delom z animacijo okvir za okvirjem. Naučimo se, kaj sta WebGL in OpenGL. Poglejmo si razliko med delom v kontekstu 2D in webgl. Raziščimo, kaj so rastrski učinki:

• barvni filtri
• OpenGL
• maske – Lumination, Alpha
• barvni prelivi – mešanje
• zvoki
• poboti
• zamegljenost

Študirali bomo tudi animacijo rastrskih učinkov: nenehno gibanje in spreminjanje parametrov.

V praksi poglejmo:

• Kaj so vertex in fragment shaderji.
• Kako uporabljati WebGL 3d za 2D učinke.
• Kaj je geometrija.
• Cevovod WebGL.
• Interakcija med JS in WebGL.
• Vrste podatkov v WebGL.
• Pisanje GLSL - osnove.

Oddelek 6 Three.js 1. del: 3D v brskalniku.

V tem poglavju bomo ponovno govorili o koordinatnih sistemih, točkah in vektorjih. Preučimo 3D transformacijske matrike, kvaternione in Eulerjeve kote, množenje matrik.

Razmislimo o dveh možnostih za ustvarjanje modelov z uporabniškim nadzornim vmesnikom:

• Neposredna nastavitev parametrov: hitrost ali pospešek (gibanje ali vrtenje).
• Postavitev cilja - vrednost, ki se ji morate postopoma približati: element privlači kazalec.
• Preučimo delovni cikel motorja, metode invalidate(), update() in render() ter značilnosti dela s plavajočim FPS. Naučimo se izvajati izračune znotraj update().

V praktičnem delu se bomo lotili dela s knjižnico Three.js. Študijmo:

• Načini opisovanja predmetov: položaj, geometrija in materiali.
• Geometrija: parametrična vgrajena, poljubno nakladljiva. Medpomnilnik za geometrijo.
• Kateri materiali obstajajo, vrste materialov, načini upodabljanja, materiali po meri.
• Oznake za posodobitev.
• Zanka upodabljanja.
• Animacije položaja. Metoda animacije Morph.
• Oder + kamera. Dodajanje predmetov na sceno. Združevanje v skupine.
• Svetloba. Vrste svetlobnih virov. Matcap material.

Oddelek 7 Three.js 2. del: Delo s kamero.

V tem delu si bomo ogledali, kaj je kamera v WebGL in še posebej v Three. JS:

• Nadzor kamere.
• Osnovni premiki kamere.
• Naprave za kamere.
• Različne zasnove naprav za različne vrste krmiljenja.

V praktičnem delu:

• Poglejmo, katere vrste kamer obstajajo v Three. JS, parametri kamere, spreminjanje velikosti ob prehodu na mobilno različico.
• Raziščimo pristope k animaciji kamere. Poglejmo reakcijo na dejanja uporabnikov – gladka sprememba perspektive. Krmiljenje z opremo: cikel upodabljanja opreme kamere. Ustvarjanje animacije leta.
• Naprave za kamere.
• Razmislimo o preklapljanju med kamerami – montaži. Pravila namestitve.

Oddelek 8 Prihodnost animacije v brskalniku.

V zadnjem delu tečaja si bomo ogledali tiste API-je, ki še niso pripravljeni za uporabo v proizvodnji, vendar jih je vredno začeti preučevati zdaj, da bi izboljšali učinkovitost svojega dela v prihodnosti.

• Poglejmo, kako se API za spletno animacijo razlikuje od običajne animacije CSS in katere dodatne zmožnosti ponuja.
• Naučimo se osnov API-ja Houdini.
• Pogovorimo se o knjižnicah, ki bodo pomagale poenostaviti delo z animacijami, časovnicami, SVG, platnom, WebGL.
• Razmislimo o programih za delo z animacijo in grafiko za splet: Google Web Designer, Adobe Animate, Adobe After Effects, programi za 3D grafiko: Cinema 4d, Blender.
• Oglejmo si kratek pregled pristopov k ustvarjanju dinamično generirane animacije in grafike. Poglejmo, katera orodja je mogoče uporabiti za izdelavo večplatformske programske opreme s 3D.
• Pogovorimo se o tem, kako se lahko še naprej razvijate pri ustvarjanju animacije.