Animação de interface - curso RUB 31.900. da Uprock, treinamento 4 meses, data 28 de novembro de 2023.

instagram viewer

TEORIA

Introdução

Nesta lição você terá uma ideia do que é animação web, quais funções ela desempenha no design de interfaces e em que casos é utilizada. Você aprenderá quais são os dois tipos de animações usados ​​em sites reais. Obtenha dicas importantes sobre como criar animações fluidas, sem esforço e sempre relevantes. Você aprenderá quais técnicas são melhores para não usar em animações realistas e por quê. Analisaremos as ações básicas de animação e as veremos com exemplos. Vamos descobrir quais programas precisam ser instalados para treinamento e trabalho confortável. Onde e como se cadastrar, qual plano tarifário escolher. Você receberá dois plug-ins úteis - AEUX e Motion Tool, que permitem otimizar alguns processos de trabalho importantes no Adobe After Effects e facilita muito o processo de criação de animação, além de conhecer o programa After Efeitos.

• Introdução à Animação Web
• Teoria
• Instalando programas
• Interface e configuração do After Effects

PRÁTICA

Animação de aparência

Nesta lição você aprenderá a animação mais básica e popular - a animação de aparência e a propriedade Opacidade. Este tutorial prático está estruturado de forma que você receba instruções detalhadas sobre como criar uma animação de aparência passo a passo. Falaremos sobre o que é renderização e por que ela é necessária. Vejamos a função Track Matte e sua primeira propriedade - Alpha Matte (máscara alfa). Como resultado, você ganhará a habilidade básica de trabalhar com as propriedades de Opacidade, Alpha Matte (máscara alfa) e criar uma foto com uma bela animação de aparência.

PRÁTICA

Cena de aparência complicada

Vejamos uma combinação que consiste em duas animações: aparência (você já conhece) e movimento (este é um novo tipo de animação para você). Detenhamo-nos neste último com mais detalhes. Para animar o movimento, você utilizará o parâmetro Position, que determina a posição do objeto na composição. Você também se familiarizará com a opção de camada Anchor Point e aprenderá como usá-la corretamente. Por fim, você animará uma cena e aprenderá como criar animações impressionantes a partir de diferentes tipos de animação.

PRÁTICA

Trabalhando com ferramentas de movimento

Na lição você estudará detalhadamente o script Motion Tools. Na prática, veja como essa ferramenta é conveniente. Na verdade, acelera significativamente o processo de trabalho. Você obterá uma compreensão completa do que é Velocity Graph, Easing, como as curvas de Bezier funcionam no After Effects e como elas afetam a animação. Por fim, você aprenderá detalhadamente como personalizar sua animação usando Motion Tools, o que otimizará bastante sua experiência de animação.

• Conceitos gerais
• Ferramentas de movimento v2.0

PRÁTICA

Animação de zoom (usando máscara alfa)

Você aprenderá como mostrar animações de fotos aparecendo. A propriedade principal que você aprenderá neste tutorial é o parâmetro Escala da camada. Com sua ajuda você pode alterar o tamanho de um objeto. Esta animação é chamada de animação em escala (usando Alpha Matte). Escalaremos o próprio Alpha Matte (máscara alfa) e a imagem dentro dele junto com a animação de aparência que você já estudou. Como resultado, você aprenderá como animar fotos de maneira eficaz.

PRÁTICA

Animação paralaxe

Você obterá uma compreensão completa de como aplicar um dos efeitos mais populares - paralaxe. Para implementá-lo, você precisará de 3 elementos de design e da já familiar propriedade Position. Depois de criar o efeito de paralaxe, você descobrirá como aplicar uma animação reversa para fazê-lo repetir. Por fim, você aprenderá como criar tomadas que usam o efeito de paralaxe para criar uma sensação de profundidade e dimensão que deixa uma impressão poderosa nos espectadores.

PRÁTICA

Cena complexa com aplicação de paralaxe, movimento e máscara

Neste tutorial você aprenderá como criar animações complexas que incorporam as animações que você aprendeu nos capítulos anteriores. sprints, a saber: Aparência - Opacidade, Movimento - Posição, Escala - Escala, aplicação de Alpha Matte (máscara alfa) e Efeito paralaxe. Um novo tipo de animação para você será o aparecimento do título na área da máscara. Você aprenderá como criar cenas complexas com transições usando todos esses tipos de animação, o que ajudará suas cenas a se destacarem das demais.

PRÁTICA

Animação Adaptativa

Veremos o conceito de animação adaptativa. Esta é a já familiar animação de zoom que você usará para demonstrar versões responsivas do site, quando o layout do desktop se transformar suavemente em um layout de telefone móvel. Para criá-lo, você usará propriedades aprendidas anteriormente, como Movimento – Posição, Escala – Escala, Desaparecimento/Aparência – Opacidade, Animação Reversa – Ferramentas de Movimento 2/Clone. Saber como implementar adequadamente a animação adaptativa permitirá que você apresente seus projetos com eficácia.

PRÁTICA

Animação de rotação

Você aprenderá animações simples - rotações e a propriedade do objeto Rotation, que é responsável por girar uma camada em torno de seu ponto de ancoragem. Veremos três parâmetros de rotação: o número de revoluções, a quantidade pela qual queremos girar o elemento (em graus), rotação no sentido horário/anti-horário. Depois de passar passo a passo por cada um dos ciclos de animação repetidos, você eventualmente dominará a habilidade de trabalhar com a propriedade Rotação e criará uma cena com animação de rotação que atrairá a atenção dos espectadores.

PRÁTICA

Animação complexa que consiste em todas as animações básicas

Vejamos uma combinação mais complexa, que consiste em todas as animações básicas com as quais você está familiarizado. Nesta lição abordaremos o tema da criação do efeito de simulação de um clique em uma imagem usando animação de dimensionamento e desaparecimento do círculo (Ferramenta Elipse). Como resultado, você aprenderá a sequência de diferentes animações, permitindo criar animações mais complexas e impressionantes.

PRÁTICA

Trabalhando com cenas

Esta lição é um ciclo que consiste em 3 sprints. Ele se concentra em transições de cena alternativas. Primeiro, examinaremos mais de perto o conceito de “cena” e discutiremos quais transições existem entre as cenas. Você aprenderá como usar 3 opções não padronizadas para alterar cenas: alteração de máscara, alteração de cortina e alteração de slide. Para criar uma transição de “mudança de máscara”, você entenderá e aprenderá como trabalhar com o novo parâmetro Track Matte – Alpha Inverted Matte ou Inverted Alpha Mask. E aprenda como importar vídeo para uma composição de animação.

PRÁTICA

Animação de mudança de cor

Neste tutorial você aprenderá como trabalhar com animação colorida e a propriedade da camada Color. Uma animação simples que pode ser usada para demonstrar o movimento de botões ou links. Mas veremos uma opção mais interessante, como você pode apresentar seu projeto lindamente usando animação de mudança de cor.

PRÁTICA

Animação de caminho (cortar)

Você aprenderá o novo parâmetro Trim Path, que pode ser usado para criar efeitos de movimento de caminho muito legais, ou em outras palavras, efeitos de corte de caminho. Por exemplo, quando desejam mostrar um pré-carregador, uma barra de progresso em um player de vídeo, etc.

PRÁTICA

Animação complexa

Nesta lição você trabalhará novamente com animações complexas, consolidará habilidades previamente adquiridas e criará uma animação de cena com novos efeitos usando todos as mesmas propriedades básicas de animação: aparência, movimento, máscara, escala, transição entre a cena 1 (mudança de máscara), transição entre a cena 2 (mudança cortina).

PRÁTICA

Animação de texto decorativo (falha)

Esta lição inicia outro pequeno ciclo, composto por 3 lições sobre animação decorativa de textos. Nesta lição você aprenderá como criar um efeito tão extraordinário como Glitch - o efeito de uma imagem “quebrada” ou interferência de televisão. Este efeito na animação parece bastante moderno e produz um efeito surpreendente. É muito fácil criar

PRÁTICA

Animação de texto decorativo (script)

Nesta lição você aprenderá como criar uma animação que simula texto maiúsculo. Essa técnica é frequentemente usada para colocar destaques em um site e tem uma aparência esteticamente agradável. Para esta animação você usará a nova Pen Tool. Esteja preparado para o trabalho duro e seja paciente. Como resultado, você obterá uma bela animação que poderá usar para apresentar seus projetos.

PRÁTICA

Animação de texto criativa

Nesta lição você encontrará novamente animação de texto, porém mais criativa e incomum. Seu efeito interessante envolve uma combinação de diferentes animações usando duas máscaras alfa – simples e inversa. Como resultado, você criará uma foto legal e poderá usar esse método em seus projetos para apresentações eficazes.

PRÁTICA

Animação complexa

Neste tutorial usaremos os tipos de animações que você já conhece, mas usaremos algumas delas para criar efeitos mais complexos e fora do padrão. Como resultado, obtemos uma animação complexa e complexa, que consiste em três cenas com transições, rolagem e mudanças de slides.

PRÁTICA

Animação usando Luma Matte

Nas lições anteriores discutimos os parâmetros do Track Matte, e você já tem uma boa ideia do princípio de funcionamento do Alpha Matte e do Alpha Inverted Matte. Neste tutorial exploraremos as duas opções de Track Matte a seguir: Luma Matte e Luma Inverted Matte e aprenderemos como aplicá-las em nossos projetos.

PRÁTICA

Animação usando deslocamento turbulento

Vamos estudar animação usando o efeito de distorção de foto. Turbulent Displace é uma das ferramentas do parâmetro Distort. Tecnicamente, é uma ligeira mudança de pixels que ajuda a criar um efeito de onda e é frequentemente usada para esse efeito em fotografias.

PRÁTICA

Animação complexa complexa

A última lição de treinamento, onde criaremos animações complexas e complexas, usando previamente aprendidas tipos de animações e um novo – o parâmetro Texto e sua propriedade “Texto Fonte”, que permite alterar o conteúdo do texto camada. Uma parte prática independente, onde você criará e criará animação para sua foto do zero, além de diversas videoaulas bônus interessantes e úteis

PRÁTICA

Criando animação do zero

Determinar o estilo, buscar referências, criar um roteiro. O princípio de criar ideias para cenas e transições entre elas, preparar o código-fonte, criar animação de 1 cena, publicar a cena nas redes.

PRÁTICA

Gerenciamento e promoção de contas do Dribble

Gerenciamento e promoção de contas do Dribble. Animação para apresentações e Behance. Usando animação do After Effects no site.