Animação para desenvolvedores front-end - curso RUB 31.380. da HTML Academy, treinamento, Data: 28 de novembro de 2023.

Nosso objetivo é transformar qualquer recém-chegado em um especialista completo e requisitado, pronto para trabalhar na indústria web.

Em 2013, Sasha e Lesha lançaram a HTML Academy. Desde o início decidimos ensinar como trabalhar com código ao vivo, resolvendo problemas próximos dos reais. Oferecemos a oportunidade de adquirir não apenas conhecimento, mas também habilidades. No processo de aprendizagem, confrontamos o aluno com testes cujo princípio é “corresponder ao modelo”. Este é o princípio pelo qual a maioria dos designers de layout trabalha.

Consideramos o layout uma habilidade muito útil para qualquer especialidade de TI. Portanto, tentamos tornar nossos simuladores tão interessantes, viciantes, interativos, incomuns e um tanto parecidos com jogos quanto possível.

Preparamos simuladores que abrangem diversos aspectos do trabalho de um designer de layout. Isso é o suficiente para se familiarizar profundamente com o layout. E para quem quer se profissionalizar, preparamos seis cursos online. Esses programas educacionais exclusivos permitem preparar especialistas com as habilidades necessárias para a indústria da web. E os mentores nos ajudam nisso. Agora, mais de trezentos mentores trabalham conosco.

Se simuladores e cursos não são suficientes para você, então dê uma olhada na estante, onde aos poucos vamos coletando livros sobre desenvolvimento web. Ou visite nosso fórum e discuta o assunto que lhe preocupa.

Seção 1Noções básicas de animação.

Na primeira seção veremos a história da animação. Como criar a ilusão de movimento, as principais diferenças entre a animação clássica e a animação computadorizada. Que abstrações existem para a construção de animação por computador? Qual é a diferença entre animação linear e animação quadro a quadro? Também veremos 12 princípios de animação expressiva. Depois disso criaremos transições animadas simples em CSS.

• Pipeline para execução de código no navegador.
• Transição e animação CSS: diferenças.
• Funções de tempo: integradas, cúbicas-bézier.

Seção 4 Animação em stop-motion. JavaScript e tela.

Neste capítulo, apresentaremos uma abstração de nível inferior: animação quadro a quadro. Vamos estudar o que é FPS e os valores padrão de FPS: 24, 30, 60. O que é FPS flutuante. Vejamos exemplos de animação quadro a quadro:

• animação do estado dos personagens em jogos - método na web Sprite Sheets - animações preparadas, modelo 360 (por exemplo, um carro).
• animação computacional, motion design - um método na web JS Tween e JS Morph - animação usando bibliotecas, por exemplo, CreateJS, AnimateJS, GSAP.
• jogos que rastreiam as ações dos jogadores em tempo real - corridas, Tetris - método de criação de modelos com interface de interação - em elementos e jogos interativos web.

Também continuaremos a estudar em profundidade os princípios da animação expressiva: presença de palco, atratividade, desenho profissional - a atenção do desenvolvedor aos detalhes, a qualidade da imagem final.

Na parte prática aprenderemos a utilizar:

• janela.requestAnimationFrame.
• Canvas e seus parâmetros e métodos.
• Ciclo de desenho de animação de um elemento simples. Transformações. Desenhando uma figura. Mascaramento. A classe de objeto abstrato é riga. Extensão de aula. Especificação de trajetória paramétrica. Exemplos: elipse, espiral, parábola, onda senoidal, onda senoidal amortecida, etc.
• Manipulações com trajetórias: adição, multiplicação, transferência paralela, mudança de fase senoidal.
• Métodos Update() e render().

Seção 5 WebGL. Sombreadores.

Neste capítulo continuaremos a trabalhar com animação quadro a quadro. Vamos aprender o que são WebGL e OpenGL. Vejamos a diferença entre trabalhar no contexto de 2D e webgl. Vamos explorar o que são efeitos raster:

• filtros de cores
• OpenGL
• máscaras – Lumination, Alpha
• sobreposições de cores - mistura
• ruídos
• compensações
• borrão

Estudaremos também a animação de efeitos raster: movimento constante e mudança de parâmetros.

Na prática, vejamos:

• O que são shaders de vértices e fragmentos.
• Como usar WebGL 3d para efeitos 2D.
• O que é geometria.
• Pipeline WebGL.
• Interação entre JS e WebGL.
• Tipos de dados em WebGL.
• Escrevendo GLSL – o básico.

Seção 6 Three.js parte 1: 3D no navegador.

Neste capítulo falaremos novamente sobre sistemas de coordenadas, pontos e vetores. Vamos estudar matrizes de transformação 3D, quatérnios e ângulos de Euler, multiplicação de matrizes.

Considere 2 opções para criar modelos com interface de controle de usuário:

• Configuração direta de parâmetros: velocidade ou aceleração (movimento ou rotação).
• Definir uma meta é um valor ao qual você precisa se aproximar gradativamente: o elemento é atraído pelo cursor.
• Vamos estudar o ciclo de trabalho do motor, os métodos invalidate(), update() e render() e as características de trabalhar com FPS flutuante. Vamos aprender como fazer cálculos dentro de update().

Na parte prática começaremos a trabalhar com a biblioteca Three.js. Vamos estudar:

• Formas de descrever objetos: posição, geometria e materiais.
• Geometria: paramétrica integrada, carregável arbitrariamente. Buffer de geometria.
• Quais materiais existem, tipos de materiais, modos de renderização, materiais personalizados.
• Sinalizadores para atualização.
• O loop de renderização.
• Animações de posição. Método de animação Morph.
• Palco + câmera. Adicionando objetos à cena. Agrupamento.
• Luz. Tipos de fontes de luz. Material Matcap.

Seção 7 Three.js parte 2: Trabalhando com a câmera.

Nesta parte veremos o que é uma câmera no WebGL, e no Three em particular. JS:

• Controle de câmera.
• Movimentos básicos de câmera.
• Equipamentos de câmeras.
• Diferentes designs de equipamento para diferentes tipos de controle.

Na parte prática:

• Vamos ver que tipos de câmeras existem em Três. JS, parâmetros da câmera, redimensionamento ao mudar para a versão móvel.
• Vamos explorar abordagens para animação de câmera. Vejamos a reação às ações do usuário - uma mudança suave de perspectiva. Controlando com um rig: ciclo de renderização do rig da câmera. Criando uma animação de vôo.
• Equipamentos de câmeras.
• Considere alternar entre câmeras - edição. Regras de instalação.

Seção 8 O futuro da animação no navegador.

Na parte final do curso veremos aquelas APIs que ainda não estão prontas para uso na produção, mas que vale a pena começar a estudar agora para melhorar a eficiência do seu trabalho no futuro.

• Vamos ver como a API Web Animation difere da animação CSS normal e quais recursos adicionais ela oferece.
• Vamos aprender o básico da API Houdini.
• Vamos falar sobre bibliotecas que ajudarão a simplificar o trabalho com animações, linhas do tempo, SVG, canvas, WebGL.
• Consideremos programas para trabalhar com animação e gráficos para web: Google Web Designer, Adobe Animate, Adobe After Effects, programas gráficos 3D: Cinema 4d, Blender.
• Vamos dar uma breve visão geral das abordagens para a criação de animações e gráficos gerados dinamicamente. Vejamos quais ferramentas podem ser usadas para construir software multiplataforma com 3D.
• Vamos falar sobre como você pode evoluir ainda mais na criação de animação.