Animáció front-end fejlesztőknek – tanfolyam 31 380 RUB. a HTML Akadémiáról, képzés, Időpont: 2023. november 28.
Vegyes Cikkek / / November 30, 2023
A tanfolyam aszinkron formában zajlik. Bármikor elkezdheti az edzést, és az Önnek megfelelő sebességgel haladhat végig a programon.
A kurzus fő értéke egy nagy mennyiségű visszajelzés egy mentortól, aki részletesen elemzi a kódot, azonosítja az anyag megértésének hiányosságait, és segít mindennel megbirkózni.
A tanfolyam tapasztalt fejlesztőknek készült, akik szeretnék fejleszteni készségeiket. Elsajátításához JavaScript elrendezési és programozási készségekre van szüksége. A tanfolyam kezdőknek is alkalmas, akik sikeresen elvégezték a HTML és CSS tanfolyamokat. Adaptív elrendezés és automatizálás” és „JavaScript. Webes felületek szakmai fejlesztése."
A tanfolyamon a szakemberek képzésére a leghatékonyabb formátumokat használjuk: szövegeket, szimulátorokat, screencastokat és bemutatókat. Nem használjuk túl a videót, és csak ott használjuk, ahol szükség van rá.
Célunk, hogy minden újonnan belépőből teljes értékű és keresett szakember váljon, aki készen áll a webiparban dolgozni.
2013-ban Sasha és Lesha elindította a HTML Akadémiát. A kezdetektől fogva elhatároztuk, hogy megtanítjuk élő kóddal dolgozni, olyan problémákat megoldani, amelyek közel állnak a valódihoz. Lehetőséget biztosítunk nemcsak tudás, hanem készségek megszerzésére is. A tanulási folyamat során tesztekkel szembesítjük a tanulót, amelyek elve: „egyezés a modellben látható módon”. Ez az az elv, amely szerint a legtöbb elrendezéstervező dolgozik.
Az elrendezést nagyon hasznos készségnek tartjuk bármely informatikai szakterületen. Ezért igyekszünk a lehető legérdekesebbé, addiktívabbá, interaktívabbá, szokatlanabbá és némileg játékszerűvé tenni szimulátorainkat.
Olyan szimulátorokat készítettünk, amelyek a tervezői munka különböző aspektusait fedik le. Ez elég az elrendezés alapos megismeréséhez. Azok számára pedig, akik szeretnének profivá válni, hat online tanfolyamot készítettünk. Ezek az egyedülálló oktatási programok lehetővé teszik a webiparhoz szükséges készségekkel rendelkező szakemberek felkészítését. A mentorok pedig ebben segítenek nekünk. Jelenleg több mint háromszáz mentor dolgozik velünk.
Ha a szimulátorok és a tanfolyamok nem elegendőek számodra, akkor nézd meg a könyvespolcot, ahol fokozatosan gyűjtjük a webfejlesztéssel kapcsolatos könyveket. Vagy látogassa meg fórumunkat, és beszélje meg az Önt érintő problémát.
A tanfolyam elvégzése után bármilyen bonyolultságú animációt készíthet a böngészőben. Az animációk megfelelő használatával javíthatja az Ön által fejlesztett webhelyek felhasználói élményét és vonzerejét. A tanfolyam több mint 40 gyakorlati feladatot és 10 mentorral való konzultációt tartalmaz.
Az első részben az animáció történetét tekintjük át. A mozgás illúziójának megteremtése, a klasszikus és a számítógépes animáció főbb különbségei. Milyen absztrakciók vannak a számítógépes animáció elkészítéséhez? Mi a különbség a lineáris animáció és a képkockánkénti animáció között? Megvizsgáljuk az expresszív animáció 12 alapelvét is. Ezt követően egyszerű animált átmeneteket készítünk CSS-ben.
- Csővezeték kód futtatásához a böngészőben.
- CSS átmenet és animáció: különbségek.
- Időfunkciók: beépített, cubic-bezier.
Ebben a fejezetben egy alacsonyabb szintű absztrakciót mutatunk be: kockánkénti animációt. Vizsgáljuk meg, mi az FPS és a standard FPS értékek: 24, 30, 60. Mi az a lebegő FPS. Nézzünk példákat a képkockánkénti animációra:
- a karakterek állapotának animációja a játékokban - módszer a weben Sprite Sheets - elkészített animációk, 360 fokos modell (például autó).
- számítógépes animáció, mozgástervezés - egy módszer a weben JS Tween és JS Morph - animáció könyvtárak használatával, például CreateJS, AnimateJS, GSAP.
- játékok, amelyek valós időben követik nyomon a játékosok akcióit - versenyzés, Tetris - interakciós felülettel rendelkező modellek létrehozásának módszere - webes interaktív elemekben és játékokban.
Továbbra is mélyrehatóan tanulmányozzuk az expresszív animáció alapelveit: színpadi jelenlét, vonzerő, professzionális rajz - a fejlesztő figyelme a részletekre, a végső kép minősége.
A gyakorlati részben megtanuljuk használni:
- window.requestAnimationFrame.
- Vászon és paraméterei, módszerei.
- Egy egyszerű elem animációjának rajzolási ciklusa. Átváltozások. Kép rajzolása. Maszkolás. Az absztrakt objektum osztály a riga. Osztálybővítés. Paraméteres pálya specifikáció. Példák: ellipszis, spirál, parabola, szinuszhullám, csillapított szinusz stb.
- Manipulációk pályákkal: összeadás, szorzás, párhuzamos átvitel, szinuszos fáziseltolódás.
- Update() és render() metódusok.
Ebben a fejezetben továbbra is a képkockánkénti animációval fogunk dolgozni. Tanuljuk meg, mi az a WebGL és az OpenGL. Nézzük meg a különbséget a 2D és a webgl kontextusában végzett munka között. Vizsgáljuk meg, melyek a raszterhatások:
- színszűrők
- OpenGL
- maszkok – Lumination, Alpha
- színes fedések - keverés
- zajok
- ellentételezések
- elhomályosít
Tanulmányozzuk a rasztereffektusok animációját is: állandó mozgást és változó paramétereket.
A gyakorlatban nézzük meg:
- Mik azok a vertex és fragment shader.
- A WebGL 3d használata 2D effektusokhoz.
- Mi a geometria.
- Pipeline WebGL.
- Kölcsönhatás a JS és a WebGL között.
- Adattípusok a WebGL-ben.
- GLSL írása – az alapok.
Ebben a fejezetben ismét a koordinátarendszerekről, pontokról és vektorokról lesz szó. Tanulmányozzuk a 3D transzformációs mátrixokat, kvaterniókat és Euler-szögeket, mátrixszorzást.
Tekintsünk két lehetőséget a felhasználói vezérlőfelülettel rendelkező modellek létrehozására:
- A paraméterek közvetlen beállítása: sebesség vagy gyorsulás (mozgás vagy forgás).
- Cél kitűzése - olyan érték, amelyhez fokozatosan közelíteni kell: az elem vonzódik a kurzorhoz.
- Tanulmányozzuk a motor munkaciklusát, az invalidate(), update() és render() metódusokat, valamint a lebegő FPS-sel való munkavégzés jellemzőit. Tanuljuk meg, hogyan végezzünk számításokat az update()-en belül.
A gyakorlati részben a Three.js könyvtárral kezdünk el dolgozni. Tanuljunk:
- Az objektumok leírásának módjai: helyzet, geometria és anyagok.
- Geometria: paraméteres beépített, tetszőlegesen betölthető. Geometria puffer.
- Milyen anyagok vannak, anyagok típusai, renderelési módok, egyedi anyagok.
- Flags frissítéshez.
- A renderelési ciklus.
- Pozíció animációk. Morph animációs módszer.
- Színpad + kamera. Objektumok hozzáadása a jelenethez. Csoportosítás.
- Fény. A fényforrások típusai. Matcap anyag.
Ebben a részben megvizsgáljuk, mi a kamera a WebGL-ben, és különösen a Three-ben. JS:
- Kameravezérlés.
- Alapvető kameramozgások.
- Kamerák szerelvényei.
- Különböző berendezés-kialakítások a különböző típusú vezérlésekhez.
A gyakorlati részben:
- Lássuk, milyen típusú kamerák vannak a Three-ben. JS, kameraparaméterek, átméretezés mobil verzióra váltáskor.
- Fedezzük fel a kameraanimáció megközelítéseit. Nézzük a felhasználói műveletekre adott reakciót – a perspektíva zökkenőmentes változását. Vezérlés szerelékkel: kamera rig render ciklus. Repülési animáció készítése.
- Kamerák szerelvényei.
- Vegyük fontolóra a kamerák közötti váltást – a szerkesztést. Telepítési szabályok.
A kurzus utolsó részében azokat az API-kat tekintjük át, amelyek még nem állnak készen a termelésben való használatra, de érdemes már most elkezdeni a tanulást, hogy a jövőben javíthassuk a munka hatékonyságát.
- Nézzük meg, miben különbözik a Web Animation API a hagyományos CSS-animációtól, és milyen további képességeket biztosít.
- Tanuljuk meg a Houdini API alapjait.
- Beszéljünk a könyvtárakról, amelyek segítenek leegyszerűsíteni az animációkkal, idővonalakkal, SVG-vel, vászonnal és WebGL-lel végzett munkát.
- Tekintsük az internetes animációval és grafikával kapcsolatos programokat: Google Web Designer, Adobe Animate, Adobe After Effects, 3D grafikus programok: Cinema 4d, Blender.
- Vegyünk egy rövid áttekintést a dinamikusan generált animációk és grafikák létrehozásának módszereiről. Nézzük meg, milyen eszközökkel lehet többplatformos szoftvert 3D-vel készíteni.
- Beszéljünk arról, hogyan lehet tovább fejlődni az animáció készítésben.
Ezen a tanfolyamon elsajátíthatja a front-end alkalmazások fejlesztésének alapelveit.
Ezen a tanfolyamon megtanulod a Redux Toolkit-et. További információ az állapotok React alkalmazásban való megszervezéséről. Végső soron megtanulhatja, hogyan kezelheti az összetett állapot- és tervezési reakcióalkalmazásokat.
Sajátítson el egy keresett szakmát a semmiből.