Animacija front-end kūrėjams – kursas 31 380 RUB. iš HTML akademijos, mokymai, Data: 2023 m. lapkričio 28 d.
įvairenybės / / November 30, 2023
Kursas vyksta asinchroniniu formatu. Galite pradėti treniruotis bet kuriuo metu ir pereiti per programą jums tinkamu greičiu.
Pagrindinė kurso vertė yra daug grįžtamojo ryšio iš mentoriaus, kuris išsamiai išanalizuos jūsų kodą, nustatys medžiagos supratimo spragas ir padės susidoroti su viskuo.
Kursas skirtas patyrusiems kūrėjams, norintiems tobulinti savo įgūdžius. Norėdami jį įvaldyti, jums reikia „JavaScript“ maketavimo ir programavimo įgūdžių. Kursas taip pat tinka pradedantiesiems, sėkmingai baigusiems HTML ir CSS kursus. Prisitaikantis išdėstymas ir automatizavimas“ ir „JavaScript. Profesionalus žiniatinklio sąsajų tobulinimas.
Kursuose naudojame efektyviausius profesionalų mokymo formatus: tekstus, simuliatorius, ekranizacijas ir demonstracijas. Vaizdo įrašų nenaudojame ir naudojame tik ten, kur reikia.
Mūsų tikslas – bet kurį naujoką paversti visaverčiu ir paklausiu specialistu, pasiruošusiu dirbti interneto industrijoje.
2013 m. Sasha ir Lesha įkūrė HTML akademiją. Nuo pat pradžių nusprendėme išmokyti dirbti su gyvu kodu, spręsti problemas, kurios artimos tikrosioms. Suteikiame galimybę įgyti ne tik žinių, bet ir įgūdžių. Mokymosi procese mes susiduriame su mokiniu su testais, kurių principas yra „derinkite, kaip parodyta modelyje“. Tai yra principas, kuriuo vadovaujasi dauguma maketuotojų.
Manome, kad maketavimas yra labai naudingas įgūdis bet kuriai IT specialybei. Todėl stengiamės, kad mūsų treniruokliai būtų kuo įdomesni, įtraukiantys, interaktyvūs, neįprasti ir kiek panašesni į žaidimą.
Parengėme simuliatorius, apimančius įvairius maketuotojo darbo aspektus. To pakanka norint nuodugniai susipažinti su išdėstymu. O tiems, kurie nori užaugti profesionalais, paruošėme šešis internetinius kursus. Šios unikalios edukacinės programos leidžia paruošti specialistus, turinčius žiniatinklio pramonei reikalingų įgūdžių. Ir mentoriai mums padeda tai padaryti. Dabar su mumis dirba daugiau nei trys šimtai mentorių.
Jei simuliatorių ir kursų jums neužtenka, galite pažvelgti į knygų lentyną, kurioje palaipsniui renkame knygas apie interneto svetainių kūrimą. Arba apsilankykite mūsų forume ir aptarkite jums rūpimą problemą.
Baigę kursą galėsite kurti bet kokio sudėtingumo animacijas naršyklėje. Tinkamai naudodami animacijas galite pagerinti savo kuriamų svetainių UX kokybę ir patrauklumą. Kursą sudaro daugiau nei 40 praktinių užduočių ir 10 konsultacijų su mentoriumi.
Pirmoje dalyje pažvelgsime į animacijos istoriją. Kaip sukurti judesio iliuziją, pagrindiniai skirtumai tarp klasikinės ir kompiuterinės animacijos. Kokios abstrakcijos egzistuoja kuriant kompiuterinę animaciją? Kuo skiriasi linijinė animacija ir animacija po kadro? Taip pat apžvelgsime 12 išraiškingos animacijos principų. Po to mes sukursime paprastus animuotus perėjimus CSS.
- Kodo vykdymo naršyklėje vamzdynas.
- CSS perėjimas ir animacija: skirtumai.
- Laiko funkcijos: įmontuotas, kubinis-bezieris.
Šiame skyriuje pristatysime žemesnio lygio abstrakciją: animaciją kadras po kadro. Panagrinėkime, kas yra FPS ir standartines FPS reikšmes: 24, 30, 60. Kas yra plaukiojantis FPS. Pažvelkime į animacijos kadras po kadro pavyzdžius:
- personažų būsenos animacija žaidimuose – metodas internete Sprite Sheets – paruoštos animacijos, 360 laipsnių modelis (pavyzdžiui, automobilis).
- kompiuterinė animacija, judesio dizainas – metodas žiniatinklyje JS Tween ir JS Morph – animacija naudojant bibliotekas, pavyzdžiui, CreateJS, AnimateJS, GSAP.
- žaidimai, kurie seka žaidėjų veiksmus realiuoju laiku – lenktynės, Tetris – modelių su sąveikos sąsaja kūrimo metodas – interaktyviuose žiniatinklio elementuose ir žaidimuose.
Taip pat toliau nuodugniai tyrinėsime ekspresyvios animacijos principus: buvimas scenoje, patrauklumas, profesionalus piešimas – kūrėjo dėmesys detalėms, galutinio paveikslo kokybė.
Praktinėje dalyje išmoksime naudotis:
- window.requestAnimationFrame.
- Drobė ir jos parametrai bei metodai.
- Paprasto elemento animacijos piešimo ciklas. Transformacijos. Paveikslo piešimas. Maskavimas. Abstrakčių objektų klasė yra Ryga. Klasės pratęsimas. Parametrinės trajektorijos specifikacija. Pavyzdžiai: elipsė, spiralė, parabolė, sinusinė banga, slopinta sinusinė banga ir kt.
- Manipuliacijos su trajektorijomis: sudėjimas, daugyba, lygiagretus perkėlimas, sinusinės fazės poslinkis.
- Update() ir render() metodus.
Šiame skyriuje toliau dirbsime su animacija po kadro. Sužinokime, kas yra WebGL ir OpenGL. Pažiūrėkime, kuo skiriasi darbas 2D ir webgl kontekste. Panagrinėkime, kas yra rastriniai efektai:
- spalvų filtrai
- OpenGL
- kaukės – Lumination, Alfa
- spalvų perdangos – maišymas
- triukšmai
- kompensacijos
- sulieti
Taip pat tyrinėsime rastrinių efektų animaciją: nuolatinį judėjimą ir besikeičiančius parametrus.
Praktiškai pažiūrėkime:
- Kas yra viršūnių ir fragmentų šešėliai.
- Kaip naudoti WebGL 3d 2D efektams gauti.
- Kas yra geometrija.
- „WebGL“ vamzdynas.
- JS ir WebGL sąveika.
- Duomenų tipai WebGL.
- GLSL rašymas – pagrindai.
Šiame skyriuje vėl pakalbėsime apie koordinačių sistemas, taškus ir vektorius. Išstudijuokime 3D transformacijų matricas, ketvirčius ir Eulerio kampus, matricų dauginimą.
Apsvarstykite 2 modelių su vartotojo valdymo sąsaja kūrimo parinktis:
- Tiesioginis parametrų nustatymas: greitis arba pagreitis (judėjimas arba sukimasis).
- Tikslo nustatymas - vertė, prie kurios reikia palaipsniui artėti: elementas pritraukiamas prie žymeklio.
- Išstudijuokime variklio darbo ciklą, invalidate(), update() ir render() metodus bei darbo su plūduriuojančiu FPS ypatumus. Sužinokime, kaip atlikti skaičiavimus atnaujinimo ().
Praktinėje dalyje pradėsime dirbti su Three.js biblioteka. Pasimokykime:
- Objektų apibūdinimo būdai: padėtis, geometrija ir medžiagos.
- Geometrija: įtaisyta parametrinė, savavališkai įkeliama. Geometrijos buferis.
- Kokios medžiagos yra, medžiagų rūšys, atvaizdavimo režimai, pritaikytos medžiagos.
- Vėliavos atnaujinimui.
- Atvaizdavimo kilpa.
- Pozicijos animacija. Morph animacijos metodas.
- Scena + kamera. Objektų įtraukimas į sceną. Grupavimas.
- Šviesa. Šviesos šaltinių tipai. Matcap medžiaga.
Šioje dalyje apžvelgsime, kas yra kamera WebGL, o ypač „Three“. JS:
- Kameros valdymas.
- Pagrindiniai kameros judesiai.
- Kamerų įrenginiai.
- Skirtingi įrenginių dizainai skirtingiems valdymo tipams.
Praktinėje dalyje:
- Pažiūrėkime, kokių tipų kameros yra „Three“. JS, fotoaparato parametrai, keisti dydį perjungiant į mobiliąją versiją.
- Panagrinėkime fotoaparato animacijos būdus. Pažiūrėkime į reakciją į vartotojo veiksmus – sklandų požiūrio pasikeitimą. Valdymas įrenginiu: fotoaparato įrenginio atvaizdavimo ciklas. Skrydžio animacijos kūrimas.
- Kamerų įrenginiai.
- Pasvarstykime apie kamerų perjungimą – redagavimą. Montavimo taisyklės.
Baigiamojoje kurso dalyje apžvelgsime tas API, kurios dar nėra paruoštos naudoti gamyboje, tačiau verta pradėti mokytis jau dabar, siekiant pagerinti savo darbo efektyvumą ateityje.
- Pažiūrėkime, kuo žiniatinklio animacijos API skiriasi nuo įprastos CSS animacijos ir kokių papildomų galimybių ji suteikia.
- Išmokime Houdini API pagrindus.
- Pakalbėkime apie bibliotekas, kurios padės supaprastinti darbą su animacijomis, laiko juostomis, SVG, drobėmis, WebGL.
- Panagrinėkime programas, skirtas dirbti su animacija ir grafika žiniatinkliui: Google Web Designer, Adobe Animate, Adobe After Effects, 3D grafikos programas: Cinema 4d, Blender.
- Trumpai apžvelgsime dinamiškai generuojamos animacijos ir grafikos kūrimo būdus. Pažiūrėkime, kokius įrankius galima naudoti kuriant kelių platformų programinę įrangą naudojant 3D.
- Pakalbėkime apie tai, kaip galite toliau tobulėti kurdami animaciją.
Šiame kurse išmoksite pagrindinių principų, kuriais remiantis kuriamos priekinės programos.
Šiame kurse išmoksite „Redux Toolkit“. Sužinosite daugiau apie būsenos tvarkymą programoje „React“. Galiausiai išmoksite valdyti sudėtingas būsenos ir projektavimo reakcijas.
Įvaldykite paklausią profesiją nuo nulio.