Animatie voor front-end ontwikkelaars - cursus RUB 31.380. van HTML Academy, training, Datum: 28 november 2023.
Gemengde Berichten / / November 30, 2023
De cursus vindt plaats in een asynchroon format. Je kunt op elk moment beginnen met trainen en het programma doorlopen op een snelheid die bij je past.
De belangrijkste waarde van de cursus is een grote hoeveelheid feedback van een mentor die uw code in detail zal analyseren, hiaten in het begrip van het materiaal zal identificeren en u zal helpen met alles om te gaan.
De cursus is bedoeld voor ervaren ontwikkelaars die hun vaardigheden willen verbeteren. Om het onder de knie te krijgen, heb je vaardigheden nodig op het gebied van lay-out en programmeren in JavaScript. De cursus is ook geschikt voor beginners die de HTML- en CSS-cursussen met succes hebben afgerond. Adaptieve lay-out en automatisering" en "JavaScript. Professionele ontwikkeling van webinterfaces."
In de cursus gebruiken we de meest effectieve formats voor het trainen van professionals: teksten, simulatoren, screencasts en demonstraties. We gebruiken video niet overmatig en gebruiken het alleen waar het nodig is.
Ons doel is om van elke nieuwkomer een volwaardige en gewilde specialist te maken, klaar om in de webindustrie te werken.
In 2013 lanceerden Sasha en Lesha HTML Academy. Vanaf het allereerste begin hebben we besloten om te leren werken met live code, waarbij we problemen oplossen die dicht bij de echte liggen. Wij bieden de mogelijkheid om niet alleen kennis, maar ook vaardigheden op te doen. In het leerproces confronteren we de leerling met toetsen, waarvan het principe ‘match zoals weergegeven in het model’ is. Dit is het principe waarmee de meeste lay-outontwerpers werken.
Wij beschouwen lay-out als een zeer nuttige vaardigheid voor elke IT-specialiteit. Daarom proberen we onze simulators zo interessant, verslavend, interactief, ongebruikelijk en enigszins game-achtig mogelijk te maken.
We hebben simulatoren voorbereid die verschillende aspecten van het werk van een lay-outontwerper bestrijken. Dit is voldoende om grondig kennis te maken met de lay-out. En voor wie wil doorgroeien tot professional, hebben we zes online cursussen voorbereid. Met deze unieke educatieve programma's kunt u specialisten opleiden met de vaardigheden die nodig zijn voor de webindustrie. En mentoren helpen ons daarbij. Nu werken ruim driehonderd mentoren bij ons.
Als simulatoren en cursussen niet genoeg voor je zijn, kun je naar de boekenplank kijken, waar we geleidelijk boeken over webontwikkeling verzamelen. Of bezoek ons forum en bespreek het probleem dat u bezighoudt.
Na voltooiing van de cursus kunt u animaties van elke complexiteit in de browser maken. Door het juiste gebruik van animaties kunt u de UX-kwaliteit en aantrekkelijkheid van de sites die u ontwikkelt verbeteren. De cursus omvat ruim 40 praktijkopdrachten en 10 consulten met een mentor.
In het eerste deel zullen we kijken naar de geschiedenis van animatie. Hoe je de illusie van beweging creëert, de belangrijkste verschillen tussen klassieke en computeranimatie. Welke abstracties zijn er voor het construeren van computeranimatie? Wat is het verschil tussen lineaire animatie en frame-voor-frame animatie? We zullen ook kijken naar 12 principes van expressieve animatie. Hierna gaan we eenvoudige geanimeerde overgangen maken in CSS.
- Pijplijn voor het uitvoeren van code in de browser.
- CSS-overgang en animatie: verschillen.
- Tijdfuncties: ingebouwd, kubusvormig.
In dit hoofdstuk gaan we verder met het introduceren van een abstractie op een lager niveau: frame-voor-frame animatie. Laten we bestuderen wat FPS is en standaard FPS-waarden: 24, 30, 60. Wat is zwevende FPS. Laten we eens kijken naar voorbeelden van frame-voor-frame animatie:
- animatie van de status van personages in games - een methode op het web Sprite Sheets - voorbereide animaties, 360-model (bijvoorbeeld een auto).
- computeranimatie, motion design - een methode in het web JS Tween en JS Morph - animatie met behulp van bibliotheken, bijvoorbeeld CreateJS, AnimateJS, GSAP.
- games die de acties van spelers in realtime volgen - racen, Tetris - een methode om modellen te maken met een interactie-interface - in interactieve webelementen en games.
We zullen ook de principes van expressieve animatie diepgaand blijven bestuderen: podiumpresentatie, aantrekkelijkheid, professioneel tekenen - de aandacht van de ontwikkelaar voor detail, de kwaliteit van het uiteindelijke beeld.
In het praktijkgedeelte leren we gebruik te maken van:
- window.requestAnimationFrame.
- Canvas en zijn parameters en methoden.
- Cyclus van tekenanimatie van een eenvoudig element. Transformaties. Een tekening maken. Maskeren. De abstracte objectklasse is riga. Klasse-uitbreiding. Parametrische trajectspecificatie. Voorbeelden: ellips, spiraal, parabool, sinusgolf, gedempte sinusgolf, enz.
- Manipulaties met trajecten: optellen, vermenigvuldigen, parallelle overdracht, sinusoïde faseverschuiving.
- Update() en render() methoden.
In dit hoofdstuk gaan we verder met frame-voor-frame animatie. Laten we leren wat WebGL en OpenGL zijn. Laten we eens kijken naar het verschil tussen werken in de context van 2D en webgl. Laten we eens kijken wat rastereffecten zijn:
- kleurenfilters
- OpenGL
- maskers – Luminatie, Alpha
- kleuroverlays - mengen
- geluiden
- compensaties
- vervagen
We zullen ook de animatie van rastereffecten bestuderen: constante beweging en veranderende parameters.
Laten we in de praktijk eens kijken naar:
- Wat zijn vertex- en fragment-shaders.
- Hoe WebGL 3d te gebruiken voor 2D-effecten.
- Wat is geometrie.
- Pijplijn WebGL.
- Interactie tussen JS en WebGL.
- Gegevenstypen in WebGL.
- GLSL schrijven - de basis.
In dit hoofdstuk zullen we het opnieuw hebben over coördinatensystemen, punten en vectoren. Laten we 3D-transformatiematrices, quaternionen en Euler-hoeken, matrixvermenigvuldiging bestuderen.
Laten we twee opties bekijken voor het maken van modellen met een gebruikersinterface:
- Directe instelling van parameters: snelheid of versnelling (beweging of rotatie).
- Een doel stellen - een waarde die u geleidelijk moet benaderen: het element wordt aangetrokken door de cursor.
- Laten we de werkcyclus van de engine bestuderen, de methoden invalidate(), update() en render(), en de kenmerken van het werken met zwevende FPS. Laten we leren hoe we berekeningen kunnen uitvoeren binnen update().
In het praktische gedeelte gaan we aan de slag met de Three.js-bibliotheek. Laten we studeren:
- Manieren om objecten te beschrijven: positie, geometrie en materialen.
- Geometrie: parametrisch ingebouwd, willekeurig laadbaar. Geometriebuffer.
- Welke materialen zijn er, soorten materialen, weergavemodi, aangepaste materialen.
- Vlaggen voor update.
- De renderlus.
- Positie animaties. Morph-animatiemethode.
- Podium + camera. Objecten aan de scène toevoegen. Groepering.
- Licht. Soorten lichtbronnen. Matcap-materiaal.
In dit deel zullen we kijken naar wat een camera is in WebGL, en in Three in het bijzonder. JS:
- Camerabediening.
- Basis camerabewegingen.
- Installaties van camera's.
- Verschillende rig-ontwerpen voor verschillende soorten besturing.
In het praktische gedeelte:
- Laten we eens kijken welke soorten camera's er in Three zijn. JS, cameraparameters, formaat wijzigen bij overschakelen naar de mobiele versie.
- Laten we de benaderingen van camera-animatie verkennen. Laten we eens kijken naar de reactie op gebruikersacties: een soepele verandering van perspectief. Besturen met een rig: rendercyclus van de camerarig. Een vluchtanimatie maken.
- Installaties van camera's.
- Laten we overwegen om tussen camera's te schakelen: bewerken. Installatieregels.
In het laatste deel van de cursus zullen we kijken naar API's die nog niet klaar zijn voor gebruik in de productie, maar die de moeite waard zijn om nu te beginnen met studeren om de efficiëntie van uw werk in de toekomst te verbeteren.
- Laten we eens kijken hoe de Web Animation API verschilt van reguliere CSS-animatie en welke extra mogelijkheden deze biedt.
- Laten we de basisprincipes van de Houdini API leren.
- Laten we het hebben over bibliotheken die het werk met animaties, tijdlijnen, SVG, canvas, WebGL zullen vereenvoudigen.
- Laten we programma's bekijken voor het werken met animatie en afbeeldingen voor internet: Google Web Designer, Adobe Animate, Adobe After Effects, 3D grafische programma's: Cinema 4d, Blender.
- Laten we een kort overzicht geven van de benaderingen voor het maken van dynamisch gegenereerde animaties en afbeeldingen. Laten we eens kijken welke tools kunnen worden gebruikt om platformonafhankelijke software met 3D te bouwen.
- Laten we het hebben over hoe u zich verder kunt ontwikkelen in het maken van animatie.
In deze cursus leer je de fundamentele principes die komen kijken bij het ontwikkelen van front-end applicaties.
In deze cursus leert u de Redux Toolkit. U leert meer over het organiseren van de status in een React-toepassing. Uiteindelijk leer je hoe je complexe status- en ontwerpreactie-applicaties kunt beheren.
Beheers een veelgevraagd beroep helemaal opnieuw.