Animación para desarrolladores front-end - curso 31.380 rublos. de HTML Academy, formación, Fecha: 28 de noviembre de 2023.

Nuestro objetivo es convertir a cualquier recién llegado en un especialista de pleno derecho y solicitado, listo para trabajar en la industria web.

En 2013, Sasha y Lesha lanzaron HTML Academy. Desde el principio decidimos enseñar a trabajar con código en vivo, resolviendo problemas cercanos a los reales. Brindamos la oportunidad de adquirir no solo conocimientos, sino también habilidades. En el proceso de aprendizaje, enfrentamos al estudiante con pruebas cuyo principio es "coincidencia como se muestra en el modelo". Este es el principio según el cual trabajan la mayoría de los maquetadores.

Consideramos que la maquetación es una habilidad muy útil para cualquier especialidad informática. Por lo tanto, intentamos que nuestros simuladores sean lo más interesantes, adictivos, interactivos, inusuales y parecidos a un juego posible.

Hemos preparado simuladores que cubren diversos aspectos del trabajo de un maquetador. Esto es suficiente para familiarizarse a fondo con el diseño. Y para aquellos que quieran convertirse en profesionales, hemos preparado seis cursos online. Estos programas educativos únicos le permiten preparar especialistas con las habilidades necesarias para la industria web. Y los mentores nos ayudan con esto. Ahora trabajan con nosotros más de trescientos mentores.

Si los simuladores y los cursos no son suficientes para usted, puede mirar la estantería, donde poco a poco vamos recopilando libros sobre desarrollo web. O visite nuestro foro y discuta el tema que le preocupa.

Sección 1Conceptos básicos de animación.

En la primera sección veremos la historia de la animación. Cómo crear la ilusión de movimiento, las principales diferencias entre la animación clásica y por computadora. ¿Qué abstracciones existen para la construcción de animación por computadora? ¿Cuál es la diferencia entre animación lineal y animación cuadro por cuadro? También veremos 12 principios de animación expresiva. Después de esto crearemos transiciones animadas simples en CSS.

• Canalización para ejecutar código en el navegador.
• Transición y animación CSS: diferencias.
• Funciones de tiempo: integradas, cúbicas-bezier.

Sección 4 Animación stop-motion. JavaScript y lienzo.

En este capítulo, pasaremos a presentar una abstracción de nivel inferior: la animación cuadro por cuadro. Estudiemos qué es FPS y los valores estándar de FPS: 24, 30, 60. ¿Qué es el FPS flotante? Veamos ejemplos de animación cuadro por cuadro:

• animación del estado de los personajes en juegos - método en la web Sprite Sheets - animaciones preparadas, modelo 360 (por ejemplo, un automóvil).
• animación por computadora, diseño de movimiento: un método en la web JS Tween y JS Morph: animación utilizando bibliotecas, por ejemplo, CreateJS, AnimateJS, GSAP.
• juegos que rastrean las acciones de los jugadores en tiempo real (carreras, Tetris), un método para crear modelos con una interfaz de interacción, en elementos y juegos interactivos web.

También continuaremos estudiando en profundidad los principios de la animación expresiva: presencia en el escenario, atractivo, dibujo profesional, la atención del desarrollador al detalle, la calidad de la imagen final.

En la parte práctica aprenderemos a utilizar:

• ventana.requestAnimationFrame.
• Canvas y sus parámetros y métodos.
• Ciclo de animación de dibujo de un elemento simple. Transformaciones. Dibujando una imagen. Enmascaramiento. La clase de objeto abstracto es riga. Ampliación de clase. Especificación paramétrica de trayectoria. Ejemplos: elipse, espiral, parábola, onda sinusoidal, onda sinusoidal amortiguada, etc.
• Manipulaciones con trayectorias: suma, multiplicación, transferencia paralela, cambio de fase sinusoide.
• Métodos Update() y render().

Sección 5 WebGL. Sombreadores.

En este capítulo continuaremos trabajando con animación cuadro por cuadro. Aprendamos qué son WebGL y OpenGL. Veamos la diferencia entre trabajar en el contexto de 2D y webgl. Exploremos qué son los efectos ráster:

• filtros de color
• OpenGL
• máscaras – Luminación, Alfa
• superposiciones de colores - fusión
• ruidos
• compensaciones
• difuminar

También estudiaremos la animación de efectos rasterizados: movimiento constante y parámetros cambiantes.

En la práctica, veamos:

• ¿Qué son los sombreadores de vértices y fragmentos?
• Cómo utilizar WebGL 3D para efectos 2D.
• ¿Qué es la geometría?
• Tubería WebGL.
• Interacción entre JS y WebGL.
• Tipos de datos en WebGL.
• Escribir GLSL: conceptos básicos.

Sección 6 Three.js parte 1: 3D en el navegador.

En este capítulo volveremos a hablar de sistemas de coordenadas, puntos y vectores. Estudiemos matrices de transformación 3D, cuaterniones y ángulos de Euler, multiplicación de matrices.

Consideremos 2 opciones para crear modelos con una interfaz de control de usuario:

• Configuración directa de parámetros: velocidad o aceleración (movimiento o rotación).
• Establecer un objetivo es un valor al que es necesario acercarse gradualmente: el elemento se siente atraído por el cursor.
• Estudiemos el ciclo de trabajo del motor, los métodos invalidate(), update() y render() y las características de trabajar con FPS flotante. Aprendamos a hacer cálculos dentro de update().

En la parte práctica comenzaremos a trabajar con la biblioteca Three.js. Estudiemos:

• Formas de describir objetos: posición, geometría y materiales.
• Geometría: paramétrica incorporada, cargable arbitraria. Búfer de geometría.
• Qué materiales hay, tipos de materiales, modos de renderizado, materiales personalizados.
• Banderas para actualización.
• El bucle de renderizado.
• Animaciones de posición. Método de animación Morph.
• Escenario + cámara. Agregar objetos a la escena. Agrupamiento.
• Luz. Tipos de fuentes de luz. Material de tapete.

Sección 7 Three.js parte 2: Trabajando con la cámara.

En esta parte veremos qué es una cámara en WebGL, y en Three en particular. JS:

• Control de cámara.
• Movimientos básicos de cámara.
• Equipos de cámaras.
• Diferentes diseños de equipos para diferentes tipos de control.

En la parte práctica:

• Veamos qué tipos de cámaras hay en Three. JS, parámetros de la cámara, cambio de tamaño al cambiar a la versión móvil.
• Exploremos enfoques para la animación con cámara. Veamos la reacción a las acciones del usuario: un cambio suave de perspectiva. Controlar con un equipo: ciclo de renderizado del equipo de cámara. Creando una animación de vuelo.
• Equipos de cámaras.
• Consideremos cambiar entre cámaras: editar. Reglas de instalación.

Sección 8 El futuro de la animación en el navegador.

En la parte final del curso, veremos aquellas API que aún no están listas para su uso en producción, pero que vale la pena comenzar a estudiar ahora para mejorar la eficiencia de su trabajo en el futuro.

• Veamos en qué se diferencia la API de animación web de la animación CSS normal y qué capacidades adicionales proporciona.
• Aprendamos los conceptos básicos de la API de Houdini.
• Hablemos de bibliotecas que ayudarán a simplificar el trabajo con animaciones, líneas de tiempo, SVG, lienzo, WebGL.
• Consideremos programas para trabajar con animaciones y gráficos para la web: Google Web Designer, Adobe Animate, Adobe After Effects, programas de gráficos 3D: Cinema 4d, Blender.
• Veamos una breve descripción general de los enfoques para crear animaciones y gráficos generados dinámicamente. Veamos qué herramientas se pueden utilizar para crear software multiplataforma con 3D.
• Hablemos de cómo puedes desarrollarte aún más en la creación de animaciones.