Animation pour développeurs front-end - cours 31 380 RUB. de HTML Academy, formation, Date: 28 novembre 2023.

Notre objectif est de faire de tout nouvel arrivant un spécialiste à part entière et recherché, prêt à travailler dans l'industrie du Web.

En 2013, Sasha et Lesha ont lancé HTML Academy. Dès le début, nous avons décidé d'enseigner comment travailler avec du code live, en résolvant des problèmes proches des problèmes réels. Nous offrons la possibilité d'acquérir non seulement des connaissances, mais aussi des compétences. Dans le processus d’apprentissage, nous confrontons l’étudiant à des tests dont le principe est « la correspondance comme indiqué dans le modèle ». C’est le principe selon lequel travaillent la plupart des concepteurs de mise en page.

Nous considérons la mise en page comme une compétence très utile pour toute spécialité informatique. Par conséquent, nous essayons de rendre nos simulateurs aussi intéressants, addictifs, interactifs, inhabituels et quelque peu ludiques que possible.

Nous avons préparé des simulateurs qui couvrent divers aspects du travail d'un maquettiste. Cela suffit pour bien se familiariser avec la mise en page. Et pour ceux qui souhaitent devenir professionnels, nous avons préparé six cours en ligne. Ces programmes éducatifs uniques vous permettent de préparer des spécialistes possédant les compétences nécessaires à l'industrie du Web. Et les mentors nous y aident. Aujourd'hui, plus de trois cents mentors travaillent avec nous.

Si les simulateurs et les cours ne vous suffisent pas, vous pouvez consulter la bibliothèque, où nous rassemblons progressivement des livres sur le développement Web. Ou visitez notre forum et discutez du problème qui vous préoccupe.

Section 1Bases de l'animation.

Dans la première section, nous examinerons l’histoire de l’animation. Comment créer l'illusion de mouvement, les principales différences entre l'animation classique et l'animation par ordinateur. Quelles abstractions existe-t-il pour construire une animation par ordinateur? Quelle est la différence entre l’animation linéaire et l’animation image par image? Nous examinerons également 12 principes d’animation expressive. Après cela, nous créerons des transitions animées simples en CSS.

• Pipeline pour exécuter du code dans le navigateur.
• Transition CSS et animation: différences.
• Fonctions horaires: intégrées, cubiques-bézier.

Section 4 Animation en stop-motion. JavaScript et toile.

Dans ce chapitre, nous allons introduire une abstraction de niveau inférieur: l'animation image par image. Étudions ce qu'est le FPS et les valeurs FPS standard: 24, 30, 60. Qu'est-ce que le FPS flottant. Regardons des exemples d'animation image par image :

• animation de l'état des personnages dans les jeux - une méthode sur le web Sprite Sheets - animations préparées, modèle 360 ​​(par exemple, une voiture).
• animation par ordinateur, motion design - une méthode dans le web JS Tween et JS Morph - animation utilisant des bibliothèques, par exemple CreateJS, AnimateJS, GSAP.
• des jeux qui suivent les actions des joueurs en temps réel - courses, Tetris - une méthode de création de modèles avec une interface d'interaction - dans des éléments et des jeux interactifs Web.

Nous continuerons également à étudier en profondeur les principes de l’animation expressive: présence scénique, attractivité, dessin professionnel - le souci du détail du développeur, la qualité de l’image finale.

Dans la partie pratique nous apprendrons à utiliser :

• window.requestAnimationFrame.
• Canvas et ses paramètres et méthodes.
• Cycle de dessin d'animation d'un élément simple. Transformations. Dessiner une image. Masquage. La classe d'objets abstraits est riga. Extension de classe. Spécification paramétrique de trajectoire. Exemples: ellipse, spirale, parabole, onde sinusoïdale, onde sinusoïdale amortie, etc.
• Manipulations avec trajectoires: addition, multiplication, transfert parallèle, déphasage sinusoïdal.
• Méthodes Update() et render().

Article 5 WebGL. Shaders.

Dans ce chapitre, nous continuerons à travailler avec l'animation image par image. Apprenons ce que sont WebGL et OpenGL. Regardons la différence entre travailler dans le contexte de la 2D et du webgl. Explorons ce que sont les effets raster :

• filtres de couleur
• OpenGL
• masques – Lumination, Alpha
• superpositions de couleurs - mélange
• des bruits
• compensations
• se brouiller

Nous étudierons également l'animation des effets raster: mouvement constant et paramètres changeants.

En pratique, regardons :

• Que sont les vertex shaders et les fragment shaders.
• Comment utiliser WebGL 3D pour les effets 2D.
• Qu'est-ce que la géométrie.
• Pipeline WebGL.
• Interaction entre JS et WebGL.
• Types de données en WebGL.
• Écrire GLSL - les bases.

Article 6 Three.js partie 1: 3D dans le navigateur.

Dans ce chapitre, nous reparlerons des systèmes de coordonnées, des points et des vecteurs. Étudions les matrices de transformation 3D, les quaternions et les angles d'Euler, la multiplication matricielle.

Considérons 2 options pour créer des modèles avec une interface de contrôle utilisateur :

• Réglage direct des paramètres: vitesse ou accélération (mouvement ou rotation).
• Fixer un objectif - une valeur à laquelle il faut se rapprocher progressivement: l'élément est attiré par le curseur.
• Étudions le cycle de travail du moteur, les méthodes invalidate(), update() et render() et les fonctionnalités de travail avec les FPS flottants. Apprenons à effectuer des calculs dans update().

Dans la partie pratique, nous commencerons à travailler avec la bibliothèque Three.js. Étudions:

• Façons de décrire les objets: position, géométrie et matériaux.
• Géométrie: paramétrique intégrée, chargeable arbitrairement. Tampon de géométrie.
• Quels sont les matériaux disponibles, types de matériaux, modes de rendu, matériaux personnalisés.
• Indicateurs de mise à jour.
• La boucle de rendu.
• Animations de positionnement. Méthode d'animation Morph.
• Scène + caméra. Ajout d'objets à la scène. Regroupement.
• Lumière. Types de sources lumineuses. Matériau Matcap.

Article 7 Three.js partie 2: Travailler avec la caméra.

Dans cette partie nous verrons ce qu'est une caméra en WebGL, et en Three en particulier. JS :

• Contrôle de la caméra.
• Mouvements de caméra de base.
• Appareils photo.
• Différentes conceptions de plates-formes pour différents types de contrôle.

Dans la partie pratique :

• Voyons quels types de caméras il existe dans Three. JS, paramètres de la caméra, redimensionner lors du passage à la version mobile.
• Explorons les approches de l'animation par caméra. Regardons la réaction aux actions des utilisateurs - un changement de perspective en douceur. Contrôler avec un rig: cycle de rendu du rig de caméra. Création d'une animation de vol.
• Appareils photo.
• Considérons le passage d'une caméra à l'autre - le montage. Règles d'installation.

Article 8 L'avenir de l'animation dans le navigateur.

Dans la dernière partie du cours, nous examinerons les API qui ne sont pas encore prêtes à être utilisées en production, mais qui méritent de commencer à étudier dès maintenant afin d'améliorer l'efficacité de votre travail à l'avenir.

• Voyons en quoi l'API d'animation Web diffère de l'animation CSS classique et quelles fonctionnalités supplémentaires elle offre.
• Apprenons les bases de l'API Houdini.
• Parlons des bibliothèques qui contribueront à simplifier le travail avec les animations, les chronologies, SVG, canevas, WebGL.
• Considérons les programmes permettant de travailler avec l'animation et le graphisme pour le Web: Google Web Designer, Adobe Animate, Adobe After Effects, les programmes graphiques 3D: Cinema 4d, Blender.
• Prenons un bref aperçu des approches de création d'animations et de graphiques générés dynamiquement. Voyons quels outils peuvent être utilisés pour créer des logiciels multiplateformes avec la 3D.
• Parlons de la façon dont vous pouvez développer davantage la création d'animations.