Animatsioon esiotsa arendajatele – kursus 31 380 RUB. HTML Akadeemiast, koolitus, kuupäev: 28. november 2023.

Meie eesmärk on muuta iga uustulnuk täisväärtuslikuks ja nõutud spetsialistiks, kes on valmis töötama veebitööstuses.

2013. aastal käivitasid Sasha ja Lesha HTML Academy. Otsustasime algusest peale õpetada, kuidas töötada reaalajas koodiga, lahendades probleeme, mis on lähedased tegelikele probleemidele. Anname võimaluse omandada mitte ainult teadmisi, vaid ka oskusi. Õppeprotsessis paneme õpilase vastamisi testidega, mille põhimõte on “sobi nii, nagu on näidatud mudelis”. See on põhimõte, mille järgi töötab enamik küljendajaid.

Peame küljendamist iga IT-eriala puhul väga kasulikuks oskuseks. Seetõttu püüame muuta oma simulaatorid võimalikult huvitavaks, sõltuvust tekitavaks, interaktiivseks, ebatavaliseks ja mõneti mängulaadseks.

Oleme koostanud simulaatorid, mis hõlmavad küljendaja töö erinevaid aspekte. Sellest piisab, et paigutusega põhjalikult tutvuda. Ja neile, kes soovivad kasvada professionaaliks, oleme koostanud kuus veebikursust. Need ainulaadsed haridusprogrammid võimaldavad teil ette valmistada veebitööstuses vajalike oskustega spetsialiste. Ja mentorid aitavad meid selles. Nüüd töötab meiega üle kolmesaja mentori.

Kui simulaatoritest ja kursustest sulle ei piisa, siis võid vaadata raamaturiiulit, kuhu kogume tasapisi veebiarenduse raamatuid. Või külastage meie foorumit ja arutage teid puudutavat probleemi.

1. jaguAnimatsiooni põhitõed.

Esimeses osas vaatleme animatsiooni ajalugu. Kuidas luua illusiooni liikumisest, peamised erinevused klassikalisel ja arvutianimatsioonil. Milliseid abstraktsioone on arvutianimatsiooni koostamiseks? Mis vahe on lineaarsel animatsioonil ja kaaderhaaval animatsioonil? Vaatame ka 12 ekspressiivse animatsiooni põhimõtet. Pärast seda loome CSS-is lihtsad animeeritud üleminekud.

• Torustik koodi käivitamiseks brauseris.
• CSS-i üleminek ja animatsioon: erinevused.
• Ajafunktsioonid: sisseehitatud, cubic-bezier.

4. jagu Stop-motion animatsioon. JavaScript ja lõuend.

Selles peatükis jätkame madalama taseme abstraktsiooni tutvustamisega: kaader kaadri haaval animatsioon. Uurime, mis on FPS ja standardsed FPS väärtused: 24, 30, 60. Mis on ujuv FPS. Vaatame kaadrihaaval animatsiooni näiteid:

• mängude tegelaste oleku animatsioon - meetod veebis Sprite Sheets - ettevalmistatud animatsioonid, 360 mudel (näiteks auto).
• arvutianimatsioon, liikumisdisain - meetod veebis JS Tween ja JS Morph - animatsioon, kasutades teeke, näiteks CreateJS, AnimateJS, GSAP.
• mängud, mis jälgivad mängija tegevust reaalajas – võidusõit, Tetris – interaktiivse liidesega mudelite loomise meetod – interaktiivsetes veebielementides ja mängudes.

Samuti jätkame süvitsi ekspressiivse animatsiooni põhimõtete uurimist: laval kohalolek, atraktiivsus, professionaalne joonistamine - arendaja tähelepanu detailidele, lõpliku pildi kvaliteet.

Praktilises osas õpime kasutama:

• window.requestAnimationFrame.
• Lõuend ja selle parameetrid ja meetodid.
• Lihtsa elemendi animatsiooni joonistamise tsükkel. Transformatsioonid. Pildi joonistamine. Maskeerimine. Abstraktsete objektide klass on riia. Klassi laiendus. Parameetrilise trajektoori spetsifikatsioon. Näited: ellips, spiraal, parabool, siinuslaine, summutatud siinuslaine jne.
• Manipulatsioonid trajektooridega: liitmine, korrutamine, paralleelülekanne, sinusoidne faasinihe.
• Update() ja render() meetodid.

5. jagu WebGL. Varjutajad.

Selles peatükis jätkame kaaderhaaval animatsiooniga töötamist. Uurime, mis on WebGL ja OpenGL. Vaatame 2D ja webgl kontekstis töötamise erinevust. Uurime, mis on rasterefektid:

• värvifiltrid
• OpenGL
• maskid – Lumination, Alpha
• värvilised ülekatted - segamine
• mürad
• tasaarvestused
• hägusus

Uurime ka rasterefektide animatsiooni: pidevat liikumist ja muutuvaid parameetreid.

Praktikas vaatame järgmist:

• Mis on tipu- ja fragmendivarjutajad.
• Kuidas kasutada WebGL 3d 2D-efektide jaoks.
• Mis on geomeetria.
• Pipeline WebGL.
• JS-i ja WebGL-i koostoime.
• Andmetüübid WebGL-is.
• GLSL-i kirjutamine – põhitõed.

6. jagu Three.js 1. osa: 3D brauseris.

Selles peatükis räägime taas koordinaatsüsteemidest, punktidest ja vektoritest. Uurime 3D teisendusmaatrikse, kvaternioone ja Euleri nurki, maatriksi korrutamist.

Vaatleme kahte võimalust kasutaja juhtimisliidesega mudelite loomiseks:

• Parameetrite otsene seadistamine: kiirus või kiirendus (liikumine või pöörlemine).
• Eesmärgi seadmine - väärtus, millele peate järk-järgult lähenema: element meelitatakse kursori poole.
• Uurime mootori töötsüklit, invalidate(), update() ja render() meetodeid ning ujuva FPS-iga töötamise funktsioone. Õppime, kuidas teha arvutusi update() sees.

Praktilises osas alustame tööd Three.js raamatukoguga. Uurime:

• Objektide kirjeldamise viisid: asukoht, geomeetria ja materjalid.
• Geomeetria: parameetriline sisseehitatud, suvaliselt laaditav. Geomeetria puhver.
• Millised materjalid on olemas, materjalide tüübid, renderdusrežiimid, kohandatud materjalid.
• Lipud värskendamiseks.
• Renderdustsükkel.
• Positsioonianimatsioonid. Morph animatsiooni meetod.
• Lava + kaamera. Objektide lisamine stseenile. Rühmitamine.
• Valgus. Valgusallikate tüübid. Matcap materjal.

7. jagu Three.js 2. osa: Kaameraga töötamine.

Selles osas vaatleme, mis on kaamera WebGL-is ja eriti kolmes. JS:

• Kaamera juhtimine.
• Kaamera põhiliigutused.
• Kaamerad.
• Erinevat tüüpi juhtimisseadmete jaoks erinevad platvormide konstruktsioonid.

Praktilises osas:

• Vaatame, mis tüüpi kaameraid Three on. JS, kaamera parameetrid, suurust muutke mobiiliversioonile üleminekul.
• Uurime kaameraanimatsiooni lähenemisviise. Vaatame reaktsiooni kasutaja tegevusele – sujuv vaatenurga muutus. Seadmega juhtimine: kaameraseadme renderdustsükkel. Lennuanimatsiooni loomine.
• Kaamerad.
• Kaaluge kaamerate vahel vahetamist – monteerimist. Paigaldusreeglid.

8. jagu Animatsiooni tulevik brauseris.

Kursuse lõpuosas vaatleme neid API-sid, mis pole veel tootmises kasutamiseks valmis, kuid mida tasub juba praegu õppima asuda, et edaspidi oma tööd tõhustada.

• Vaatame, kuidas Web Animation API erineb tavalisest CSS-animatsioonist ja milliseid lisavõimalusi see pakub.
• Õpime tundma Houdini API põhitõdesid.
• Räägime raamatukogudest, mis aitavad lihtsustada tööd animatsioonide, ajaskaalade, SVG, lõuendi ja WebGL-iga.
• Vaatleme veebis animatsiooni ja graafikaga töötamiseks mõeldud programme: Google Web Designer, Adobe Animate, Adobe After Effects, 3D-graafika programme: Cinema 4d, Blender.
• Teeme lühikese ülevaate dünaamiliselt genereeritud animatsiooni ja graafika loomise lähenemisviisidest. Vaatame, milliste vahenditega saab 3D-ga platvormiülese tarkvara ehitada.
• Räägime sellest, kuidas saate animatsiooni loomisel edasi areneda.