Animation für Front-End-Entwickler – Kurs 31.380 RUB. von der HTML Academy, Schulung, Datum: 28. November 2023.
Verschiedenes / / November 30, 2023
Der Kurs findet im asynchronen Format statt. Sie können jederzeit mit dem Training beginnen und das Programm in dem für Sie passenden Tempo absolvieren.
Der Hauptwert des Kurses ist das umfangreiche Feedback eines Mentors, der Ihren Code im Detail analysiert, Lücken im Verständnis des Materials erkennt und Ihnen hilft, mit allem klarzukommen.
Der Kurs richtet sich an erfahrene Entwickler, die ihre Fähigkeiten verbessern möchten. Um es zu beherrschen, benötigen Sie Kenntnisse im Layout und in der Programmierung in JavaScript. Der Kurs ist auch für Einsteiger geeignet, die die HTML- und CSS-Kurse erfolgreich abgeschlossen haben. Adaptives Layout und Automatisierung“ und „JavaScript. Professionelle Entwicklung von Web-Interfaces.“
Im Kurs nutzen wir die effektivsten Formate für die Ausbildung von Fachkräften: Texte, Simulatoren, Screencasts und Demonstrationen. Wir verwenden Videos nicht zu häufig und setzen sie nur dort ein, wo sie benötigt werden.
Unser Ziel ist es, jeden Neuling zu einem vollwertigen und gefragten Spezialisten zu machen, der bereit ist, in der Webbranche zu arbeiten.
Im Jahr 2013 gründeten Sasha und Lesha die HTML Academy. Von Anfang an haben wir uns dafür entschieden, den Umgang mit Live-Code zu lehren und Probleme zu lösen, die realitätsnah sind. Wir bieten die Möglichkeit, nicht nur Wissen, sondern auch Fähigkeiten zu erwerben. Im Lernprozess konfrontieren wir den Schüler mit Tests, deren Prinzip „Übereinstimmung wie im Modell gezeigt“ lautet. Nach diesem Prinzip arbeiten die meisten Layouter.
Wir halten Layout für eine sehr nützliche Fähigkeit für jedes IT-Fachgebiet. Deshalb versuchen wir, unsere Simulatoren so interessant, süchtig machend, interaktiv, ungewöhnlich und einigermaßen spielerisch wie möglich zu gestalten.
Wir haben Simulatoren vorbereitet, die verschiedene Aspekte der Arbeit eines Layouters abdecken. Dies reicht aus, um sich gründlich mit dem Layout vertraut zu machen. Und für diejenigen, die sich zum Profi entwickeln möchten, haben wir sechs Online-Kurse vorbereitet. Diese einzigartigen Bildungsprogramme ermöglichen es Ihnen, Spezialisten mit den für die Webbranche erforderlichen Fähigkeiten auszubilden. Und Mentoren helfen uns dabei. Mittlerweile arbeiten mehr als dreihundert Mentoren mit uns zusammen.
Wenn Ihnen Simulatoren und Kurse nicht ausreichen, dann können Sie einen Blick ins Bücherregal werfen, wo wir nach und nach Bücher zum Thema Webentwicklung sammeln. Oder besuchen Sie unser Forum und diskutieren Sie über das Problem, das Sie beschäftigt.
Nach Abschluss des Kurses sind Sie in der Lage, Animationen beliebiger Komplexität im Browser zu erstellen. Durch den richtigen Einsatz von Animationen können Sie die UX-Qualität und Attraktivität der von Ihnen entwickelten Websites verbessern. Der Kurs umfasst mehr als 40 praktische Aufgaben und 10 Beratungsgespräche mit einem Mentor.
Im ersten Abschnitt werfen wir einen Blick auf die Geschichte der Animation. Wie man die Illusion von Bewegung erzeugt, die Hauptunterschiede zwischen klassischer und Computeranimation. Welche Abstraktionen gibt es für die Konstruktion von Computeranimationen? Was ist der Unterschied zwischen linearer Animation und Frame-by-Frame-Animation? Wir werden uns auch 12 Prinzipien ausdrucksstarker Animation ansehen. Anschließend erstellen wir einfache animierte Übergänge in CSS.
- Pipeline zum Ausführen von Code im Browser.
- CSS-Übergang und Animation: Unterschiede.
- Zeitfunktionen: integriert, Kubik-Bezier.
In diesem Kapitel stellen wir eine Abstraktion auf niedrigerer Ebene vor: die Bild-für-Bild-Animation. Schauen wir uns an, was FPS ist und welche Standard-FPS-Werte es gibt: 24, 30, 60. Was sind schwebende FPS? Schauen wir uns Beispiele für Einzelbildanimationen an:
- Animation des Zustands von Charakteren in Spielen – eine Methode im Web Sprite Sheets – vorbereitete Animationen, 360-Modell (zum Beispiel ein Auto).
- Computeranimation, Motion Design – eine Methode im Web JS Tween und JS Morph – Animation unter Verwendung von Bibliotheken, zum Beispiel CreateJS, AnimateJS, GSAP.
- Spiele, die Spieleraktionen in Echtzeit verfolgen – Rennen, Tetris – eine Methode zum Erstellen von Modellen mit einer Interaktionsschnittstelle – in interaktiven Webelementen und Spielen.
Wir werden uns auch weiterhin eingehend mit den Prinzipien ausdrucksstarker Animationen befassen: Bühnenpräsenz, Attraktivität, professionelle Zeichnung – die Liebe des Entwicklers zum Detail, die Qualität des endgültigen Bildes.
Im praktischen Teil lernen wir den Umgang mit:
- window.requestAnimationFrame.
- Canvas und seine Parameter und Methoden.
- Zyklus der Zeichenanimation eines einfachen Elements. Transformationen. Ein Bild malen. Maskierung. Die abstrakte Objektklasse ist Riga. Klassenerweiterung. Parametrische Flugbahnspezifikation. Beispiele: Ellipse, Spirale, Parabel, Sinuswelle, gedämpfte Sinuswelle usw.
- Manipulationen mit Trajektorien: Addition, Multiplikation, Parallelübertragung, sinusförmige Phasenverschiebung.
- Update()- und render()-Methoden.
In diesem Kapitel werden wir weiterhin mit der Frame-by-Frame-Animation arbeiten. Lassen Sie uns lernen, was WebGL und OpenGL sind. Schauen wir uns den Unterschied zwischen der Arbeit im 2D- und WebGL-Kontext an. Lassen Sie uns untersuchen, was Rastereffekte sind:
- Farbfilter
- OpenGL
- Masken – Luminierung, Alpha
- Farbüberlagerungen – Mischen
- Geräusche
- Offsets
- verwischen
Wir werden auch die Animation von Rastereffekten untersuchen: ständige Bewegung und sich ändernde Parameter.
Schauen wir uns in der Praxis Folgendes an:
- Was sind Vertex- und Fragment-Shader?
- So verwenden Sie WebGL 3D für 2D-Effekte.
- Was ist Geometrie?
- Pipeline-WebGL.
- Interaktion zwischen JS und WebGL.
- Datentypen in WebGL.
- GLSL schreiben – die Grundlagen.
In diesem Kapitel werden wir noch einmal über Koordinatensysteme, Punkte und Vektoren sprechen. Lassen Sie uns 3D-Transformationsmatrizen, Quaternionen und Euler-Winkel sowie Matrixmultiplikation untersuchen.
Betrachten wir zwei Optionen zum Erstellen von Modellen mit einer Benutzersteuerungsschnittstelle:
- Direkte Einstellung der Parameter: Geschwindigkeit oder Beschleunigung (Bewegung oder Rotation).
- Setzen Sie sich ein Ziel – einen Wert, dem Sie sich schrittweise nähern müssen: Das Element wird vom Cursor angezogen.
- Schauen wir uns den Arbeitszyklus der Engine, die Methoden invalidate(), update() und render() sowie die Funktionen der Arbeit mit Floating FPS an. Lassen Sie uns lernen, wie man Berechnungen in update() durchführt.
Im praktischen Teil beginnen wir mit der Arbeit mit der Three.js-Bibliothek. Lass uns lernen:
- Möglichkeiten zur Beschreibung von Objekten: Position, Geometrie und Materialien.
- Geometrie: parametrisch eingebaut, beliebig ladbar. Geometriepuffer.
- Welche Materialien gibt es, Materialtypen, Rendering-Modi, benutzerdefinierte Materialien.
- Flags für die Aktualisierung.
- Die Renderschleife.
- Positionsanimationen. Morph-Animationsmethode.
- Bühne + Kamera. Objekte zur Szene hinzufügen. Gruppierung.
- Licht. Arten von Lichtquellen. Matcap-Material.
In diesem Teil werden wir uns ansehen, was eine Kamera in WebGL und insbesondere in Three ist. JS:
- Kamerasteuerung.
- Grundlegende Kamerabewegungen.
- Kamera-Rigs.
- Unterschiedliche Rig-Designs für unterschiedliche Steuerungsarten.
Im praktischen Teil:
- Mal sehen, welche Arten von Kameras es in Three gibt. JS, Kameraparameter, Größenänderung beim Wechsel zur mobilen Version.
- Lassen Sie uns Ansätze zur Kameraanimation erkunden. Schauen wir uns die Reaktion auf Benutzeraktionen an – ein reibungsloser Perspektivwechsel. Steuerung mit einem Rig: Renderzyklus des Kamera-Rigs. Erstellen einer Fluganimation.
- Kamera-Rigs.
- Betrachten wir den Wechsel zwischen Kameras und die Bearbeitung. Installationsregeln.
Im letzten Teil des Kurses werden wir uns mit den APIs befassen, die noch nicht für den Einsatz in der Produktion bereit sind, es sich aber lohnt, jetzt mit dem Studium zu beginnen, um die Effizienz Ihrer Arbeit in Zukunft zu verbessern.
- Sehen wir uns an, wie sich die Webanimations-API von regulären CSS-Animationen unterscheidet und welche zusätzlichen Funktionen sie bietet.
- Lassen Sie uns die Grundlagen der Houdini-API erlernen.
- Lassen Sie uns über Bibliotheken sprechen, die die Arbeit mit Animationen, Zeitleisten, SVG, Canvas und WebGL vereinfachen.
- Betrachten wir Programme zum Arbeiten mit Animationen und Grafiken für das Web: Google Web Designer, Adobe Animate, Adobe After Effects, 3D-Grafikprogramme: Cinema 4d, Blender.
- Werfen wir einen kurzen Überblick über Ansätze zur Erstellung dynamisch generierter Animationen und Grafiken. Schauen wir uns an, mit welchen Tools sich plattformübergreifende Software mit 3D erstellen lässt.
- Lassen Sie uns darüber sprechen, wie Sie sich bei der Erstellung von Animationen weiterentwickeln können.
In diesem Kurs lernen Sie die Grundprinzipien kennen, die bei der Entwicklung von Frontend-Anwendungen eine Rolle spielen.
In diesem Kurs lernen Sie das Redux Toolkit kennen. Sie erfahren mehr über das Organisieren des Status in einer React-Anwendung. Letztendlich lernen Sie, wie Sie komplexe Zustands- und Designreaktionsanwendungen verwalten.
Meistern Sie einen gefragten Beruf von Grund auf.