Animation för front-end-utvecklare - kurs 31 380 RUB. från HTML Academy, utbildning, Datum: 28 november 2023.

Vårt mål är att göra varje nykomling till en fullfjädrad och eftertraktad specialist, redo att arbeta i webbbranschen.

2013 lanserade Sasha och Lesha HTML Academy. Redan från början bestämde vi oss för att lära ut hur man arbetar med live-kod och lösa problem som är nära verkliga. Vi ger en möjlighet att få inte bara kunskap, utan också färdigheter. I inlärningsprocessen konfronterar vi studenten med tester, vars princip är "matchning enligt modellen." Detta är principen som de flesta layoutdesigners arbetar efter.

Vi anser att layout är en mycket användbar färdighet för alla IT-specialiteter. Därför försöker vi göra våra simulatorer så intressanta, beroendeframkallande, interaktiva, ovanliga och något spellika som möjligt.

Vi har förberett simulatorer som täcker olika aspekter av en layoutdesigners arbete. Detta räcker för att bekanta sig ordentligt med layouten. Och för dem som vill växa till en professionell, har vi förberett sex onlinekurser. Dessa unika utbildningsprogram låter dig förbereda specialister med de färdigheter som krävs för webbbranschen. Och mentorer hjälper oss med detta. Nu jobbar mer än trehundra mentorer hos oss.

Om det inte räcker med simulatorer och kurser för dig kan du titta i bokhyllan där vi successivt samlar in böcker om webbutveckling. Eller besök vårt forum och diskutera frågan som berör dig.

Sektion 1Grundläggande om animering.

I det första avsnittet kommer vi att titta på animationens historia. Hur man skapar en illusion av rörelse, de viktigaste skillnaderna mellan klassisk och datoranimation. Vilka abstraktioner finns det för att konstruera datoranimation? Vad är skillnaden mellan linjär animering och bild-för-bild-animering? Vi ska också titta på 12 principer för uttrycksfull animering. Efter detta kommer vi att skapa enkla animerade övergångar i CSS.

• Pipeline för exekvering av kod i webbläsaren.
• CSS-övergång och animering: skillnader.
• Tidsfunktioner: inbyggd, cubic-bezier.

Avsnitt 4 Stop-motion animation. JavaScript och Canvas.

I det här kapitlet går vi vidare med att introducera en abstraktion på lägre nivå: bildruta-för-bildruta-animering. Låt oss studera vad FPS är och standard FPS-värden: 24, 30, 60. Vad är flytande FPS. Låt oss titta på exempel på bildruta-för-bildruta-animering:

• animering av karaktärernas tillstånd i spel - en metod på webben Sprite Sheets - förberedda animationer, 360-modell (till exempel en bil).
• datoranimering, rörelsedesign - en metod i webben JS Tween och JS Morph - animering med hjälp av bibliotek, till exempel CreateJS, AnimateJS, GSAP.
• spel som spårar spelarnas handlingar i realtid - racing, Tetris - en metod för att skapa modeller med ett interaktionsgränssnitt - i webbinteraktiva element och spel.

Vi kommer också att fortsätta att på djupet studera principerna för uttrycksfull animation: scennärvaro, attraktivitet, professionell ritning - utvecklarens uppmärksamhet på detaljer, kvaliteten på den slutliga bilden.

I den praktiska delen lär vi oss att använda:

• window.requestAnimationFrame.
• Canvas och dess parametrar och metoder.
• Cykel för att rita animering av ett enkelt element. Transformationer. Ritar en bild. Maskering. Den abstrakta objektklassen är riga. Klassförlängning. Parametrisk bana specifikation. Exempel: ellips, spiral, parabel, sinusvåg, dämpad sinusvåg, etc.
• Manipulationer med banor: addition, multiplikation, parallell överföring, sinusformad fasförskjutning.
• Uppdatera() och render() metoder.

Avsnitt 5 WebGL. Shaders.

I det här kapitlet kommer vi att fortsätta arbeta med bildruta-för-bildruta-animering. Låt oss lära oss vad WebGL och OpenGL är. Låt oss titta på skillnaden mellan att arbeta i 2D-sammanhang och webgl. Låt oss utforska vad rastereffekter är:

• färgfilter
• OpenGL
• masker – Lumination, Alpha
• färgöverlägg - blandning
• ljud
• offset
• fläck

Vi kommer också att studera animeringen av rastereffekter: konstant rörelse och förändrade parametrar.

I praktiken, låt oss titta på:

• Vad är vertex och fragment shaders.
• Hur man använder WebGL 3d för 2d-effekter.
• Vad är geometri.
• Pipeline WebGL.
• Interaktion mellan JS och WebGL.
• Datatyper i WebGL.
• Att skriva GLSL - grunderna.

Avsnitt 6 Three.js del 1: 3D i webbläsaren.

I det här kapitlet ska vi återigen prata om koordinatsystem, punkter och vektorer. Låt oss studera 3D-transformationsmatriser, kvaternioner och Eulervinklar, matrismultiplikation.

Låt oss överväga två alternativ för att skapa modeller med ett användarkontrollgränssnitt:

• Direkt inställning av parametrar: hastighet eller acceleration (rörelse eller rotation).
• Att sätta ett mål - ett värde som du gradvis måste närma dig: elementet attraheras av markören.
• Låt oss studera motorns arbetscykel, metoderna invalidate(), update() och render() och funktionerna i att arbeta med flytande FPS. Låt oss lära oss hur man gör beräkningar i update().

I den praktiska delen kommer vi att börja arbeta med Three.js-biblioteket. Låt oss studera:

• Sätt att beskriva objekt: position, geometri och material.
• Geometri: parametrisk inbyggd, godtycklig laddningsbar. Geometri buffert.
• Vilka material finns det, typer av material, renderingslägen, anpassade material.
• Flagga för uppdatering.
• Renderingsslingan.
• Positionsanimationer. Morph animationsmetod.
• Scen + kamera. Lägga till objekt till scenen. Gruppering.
• Ljus. Typer av ljuskällor. Matkåpa material.

Avsnitt 7 Three.js del 2: Arbeta med kameran.

I den här delen ska vi titta på vad en kamera är i WebGL, och i Three i synnerhet. JS:

• Kamerakontroll.
• Grundläggande kamerarörelser.
• Riggar av kameror.
• Olika riggkonstruktioner för olika typer av styrning.

I den praktiska delen:

• Låt oss se vilka typer av kameror det finns i Three. JS, kameraparametrar, ändra storlek vid byte till mobilversionen.
• Låt oss utforska metoder för kameraanimering. Låt oss titta på reaktionen på användarnas handlingar – en smidig förändring i perspektiv. Styrning med en rigg: renderingscykel för kamerarigg. Skapa en flyganimation.
• Riggar av kameror.
• Låt oss överväga att växla mellan kameror – redigering. Installationsregler.

Avsnitt 8 Framtiden för animering i webbläsaren.

I den sista delen av kursen kommer vi att titta på de API: er som ännu inte är redo att användas i produktionen, men som är värda att börja studera nu för att effektivisera ditt arbete i framtiden.

• Låt oss se hur Web Animation API skiljer sig från vanlig CSS-animering och vilka ytterligare funktioner det ger.
• Låt oss lära oss grunderna i Houdini API.
• Låt oss prata om bibliotek som hjälper till att förenkla arbetet med animationer, tidslinjer, SVG, canvas, WebGL.
• Låt oss överväga program för att arbeta med animation och grafik för webben: Google Web Designer, Adobe Animate, Adobe After Effects, 3d-grafikprogram: Cinema 4d, Blender.
• Låt oss ta en kort översikt över metoder för att skapa dynamiskt genererad animation och grafik. Låt oss titta på vilka verktyg som kan användas för att bygga plattformsoberoende programvara med 3D.
• Låt oss prata om hur du kan vidareutveckla dig i att skapa animation.