Animație pentru dezvoltatori front-end - curs 31.380 RUB. de la HTML Academy, training, Data: 28 noiembrie 2023.
Miscelaneu / / November 30, 2023
Cursul se desfășoară într-un format asincron. Puteți începe oricând antrenamentul și puteți trece prin program cu o viteză care vi se potrivește.
Valoarea principală a cursului este o cantitate mare de feedback din partea unui mentor care vă va analiza codul în detaliu, va identifica lacunele în înțelegerea materialului și vă va ajuta să faceți față tuturor.
Cursul este conceput pentru dezvoltatorii experimentați care doresc să-și îmbunătățească abilitățile. Pentru a-l stăpâni, ai nevoie de abilități în aspect și programare în JavaScript. Cursul este potrivit și pentru începătorii care au finalizat cu succes cursurile HTML și CSS. Aspect adaptiv și automatizare” și „JavaScript. Dezvoltarea profesională a interfețelor web.”
În cadrul cursului, folosim cele mai eficiente formate pentru formarea profesioniștilor: texte, simulatoare, screencast-uri și demonstrații. Nu folosim în exces videoclipurile și îl folosim doar acolo unde este nevoie.
Scopul nostru este să transformăm orice nou venit într-un specialist cu drepturi depline și căutat, gata să lucreze în industria web.
În 2013, Sasha și Lesha au lansat HTML Academy. De la bun început, am decis să învățăm cum să lucrăm cu cod live, rezolvând probleme care sunt aproape de cele reale. Oferim o oportunitate de a dobândi nu numai cunoștințe, ci și abilități. În procesul de învățare, confruntăm elevul cu teste, al căror principiu este „potrivirea așa cum se arată în model”. Acesta este principiul prin care lucrează majoritatea designerilor de layout.
Considerăm aspectul ca fiind o abilitate foarte utilă pentru orice specialitate IT. Prin urmare, încercăm să facem simulatoarele noastre cât mai interesante, captivante, interactive, neobișnuite și oarecum asemănătoare cu un joc.
Am pregătit simulatoare care acoperă diverse aspecte ale muncii unui designer de layout. Acest lucru este suficient pentru a vă familiariza în detaliu cu aspectul. Și pentru cei care doresc să devină profesioniști, am pregătit șase cursuri online. Aceste programe educaționale unice vă permit să pregătiți specialiști cu abilitățile necesare pentru industria web. Și mentorii ne ajută cu asta. Acum mai mult de trei sute de mentori lucrează cu noi.
Dacă simulatoarele și cursurile nu sunt suficiente pentru tine, atunci te poți uita la raftul de cărți, unde colectăm treptat cărți despre dezvoltarea web. Sau vizitați forumul nostru și discutați problema care vă preocupă.
După finalizarea cursului, veți putea crea animații de orice complexitate în browser. Prin utilizarea corectă a animațiilor, puteți îmbunătăți calitatea UX și atractivitatea site-urilor pe care le dezvoltați. Cursul include mai mult de 40 de sarcini practice și 10 consultări cu un mentor.
În prima secțiune ne vom uita la istoria animației. Cum să creați iluzia mișcării, principalele diferențe dintre animația clasică și cea pe computer. Ce abstracții există pentru construirea animației pe computer? Care este diferența dintre animația liniară și animația cadru cu cadru? Ne vom uita, de asemenea, la 12 principii ale animației expresive. După aceasta, vom crea tranziții simple animate în CSS.
- Pipeline pentru executarea codului în browser.
- Tranziție și animație CSS: diferențe.
- Funcții de timp: încorporat, cubic-bezier.
În acest capitol, vom trece la introducerea unei abstractizări de nivel inferior: animația cadru cu cadru. Să studiem ce este FPS și valorile standard FPS: 24, 30, 60. Ce este FPS plutitor. Să ne uităm la exemple de animație cadru cu cadru:
- animație a stării personajelor în jocuri - o metodă pe web Sprite Sheets - animații pregătite, model 360 (de exemplu, o mașină).
- animație pe computer, proiectare în mișcare - o metodă în web JS Tween și JS Morph - animație folosind biblioteci, de exemplu, CreateJS, AnimateJS, GSAP.
- jocuri care urmăresc acțiunile jucătorilor în timp real - curse, Tetris - o metodă de a crea modele cu o interfață de interacțiune - în elemente și jocuri interactive web.
De asemenea, vom continua să studiem în profunzime principiile animației expresive: prezența scenică, atractivitatea, desenul profesional - atenția dezvoltatorului pentru detalii, calitatea imaginii finale.
În partea practică vom învăța să folosim:
- window.requestAnimationFrame.
- Canvas și parametrii și metodele sale.
- Ciclul de animație a desenului unui element simplu. Transformări. Desenarea unei imagini. Mascarea. Clasa de obiecte abstracte este riga. Extensie de clasă. Specificarea traiectoriei parametrice. Exemple: elipsă, spirală, parabolă, undă sinusoidală, undă sinusoidală amortizată etc.
- Manipulari cu traiectorii: adunare, inmultire, transfer paralel, defazare sinusoidala.
- Metodele Update() și render().
În acest capitol vom continua să lucrăm cu animație cadru cu cadru. Să aflăm ce sunt WebGL și OpenGL. Să ne uităm la diferența dintre lucrul în contextul 2D și webgl. Să explorăm ce sunt efectele raster:
- filtre de culoare
- OpenGL
- măști – Lumination, Alpha
- suprapuneri de culoare - amestecare
- zgomote
- decalaje
- estompa
De asemenea, vom studia animația efectelor raster: mișcare constantă și modificarea parametrilor.
În practică, să ne uităm la:
- Ce sunt vertex și fragment shaders.
- Cum să utilizați WebGL 3d pentru efecte 2d.
- Ce este geometria.
- Pipeline WebGL.
- Interacțiunea dintre JS și WebGL.
- Tipuri de date în WebGL.
- Scrierea GLSL - elementele de bază.
În acest capitol vom vorbi din nou despre sisteme de coordonate, puncte și vectori. Să studiem matrice de transformare 3D, cuaternioni și unghiuri Euler, înmulțirea matricei.
Să luăm în considerare 2 opțiuni pentru a crea modele cu o interfață de control al utilizatorului:
- Setarea directă a parametrilor: viteză sau accelerație (mișcare sau rotație).
- Stabilirea unui obiectiv - o valoare la care trebuie să te apropii treptat: elementul este atras de cursor.
- Să studiem ciclul de lucru al motorului, metodele invalidate(), update() și render() și caracteristicile de lucru cu FPS flotant. Să învățăm cum să facem calcule în update().
În partea practică, vom începe să lucrăm cu biblioteca Three.js. Sa invatam:
- Modalități de a descrie obiecte: poziție, geometrie și materiale.
- Geometrie: parametrică încorporată, încărcabilă arbitrar. tampon de geometrie.
- Ce materiale există, tipuri de materiale, moduri de randare, materiale personalizate.
- Steaguri pentru actualizare.
- Bucla de randare.
- Animații de poziție. Metoda de animație Morph.
- Scenă + cameră. Adăugarea de obiecte la scenă. Gruparea.
- Ușoară. Tipuri de surse de lumină. Material Matcap.
În această parte ne vom uita la ce este o cameră în WebGL și în special în Three. JS:
- Controlul camerei.
- Mișcările de bază ale camerei.
- Instalații de camere.
- Diferite modele de platforme pentru diferite tipuri de control.
In partea practica:
- Să vedem ce tipuri de camere sunt în Three. JS, parametrii camerei, redimensionați la trecerea la versiunea mobilă.
- Să explorăm abordări ale animației camerei. Să ne uităm la reacția la acțiunile utilizatorului - o schimbare lină de perspectivă. Controlul cu un rig: ciclu de randare al aparatului de fotografiat. Crearea unei animații de zbor.
- Instalații de camere.
- Să luăm în considerare comutarea între camere - editare. Reguli de instalare.
În partea finală a cursului, vom analiza acele API-uri care nu sunt încă gata de utilizare în producție, dar merită să începem să le studiem acum pentru a îmbunătăți eficiența muncii dvs. în viitor.
- Să vedem cum diferă API-ul de animație web de animația CSS obișnuită și ce capacități suplimentare oferă.
- Să învățăm elementele de bază ale API-ului Houdini.
- Să vorbim despre biblioteci care vor ajuta la simplificarea lucrului cu animații, cronologie, SVG, canvas, WebGL.
- Să luăm în considerare programe de lucru cu animație și grafică pentru web: Google Web Designer, Adobe Animate, Adobe After Effects, programe de grafică 3d: Cinema 4d, Blender.
- Să facem o scurtă prezentare generală a abordărilor pentru crearea de animații și grafice generate dinamic. Să ne uităm la ce instrumente pot fi folosite pentru a construi software multiplatform cu 3D.
- Să vorbim despre cum vă puteți dezvolta în continuare în crearea animației.
În acest curs, veți învăța principiile fundamentale care merg în dezvoltarea aplicațiilor front-end.
În acest curs veți învăța setul de instrumente Redux. Veți afla mai multe despre starea de organizare într-o aplicație React. În cele din urmă, veți învăța cum să gestionați aplicații complexe de stare și proiectare de reacție.
Stăpânește o profesie solicitată de la zero.