Animação fácil: Bouncing Ball - a transição.

Agora vamos garantir que a bola deixe seus pontos ou o caminho de movimento para destacar que estamos trabalhando com animação. Deve ficar claro que a bola precisa ser movida de A para B e que o animador pensou exatamente como fazer isso. Devemos sugerir que tudo foi animado manualmente. Portanto, queremos exibir todas as key poses.

Passo 1

Podemos criar o caminho através do efeito PaintAnimate.

Mas primeiro, precisamos criar uma nova camada de cor. Vamos torná-la do tamanho da composição (1) e posicioná-la abaixo da camada "Bouncing Ball 02" (2).

A camada mudará de branco para azul, porque fizemos Change Colors.

Também irei renomear essa camada para "Linhas Bouncing Ball 02".

Passo 2

Vamos aplicar um efeito com o clique direito: Gerar > PaintAnimate.

Passo 3

Configuramos o estilo de pintura para Transparente.

Agora temos uma posição que podemos animar e entre a qual os pontos são desenhados quando movemos a bola da esquerda para a direita. Para visualizar melhor, ajustamos a largura dos pontos um pouco maior.

Passo 4

O problema agora é que as posições estão separadas na "Bouncing Ball 02" - e as posições na "Linhas Bouncing Ball 02" ficam juntas novamente.





Mas e se movermos a camada?

Passo 5

Gostaria de conectar um efeito a outra camada. E isso pode ser feito com a expressão mais útil que o After Effects oferece. Recomendo muito quando se trata de conectar posição de efeitos ou pontos com posição de camadas: A expressão toComp.

Essa expressão pega uma camada e converte suas coordenadas para as coordenadas da composição: superior esquerdo é 0, 0 e inferior direito é 1280, 720. Portanto, descemos 720 pixels e movemos 1280 pixels para a direita.





Essa conversão funciona para todas as camadas, independentemente de estarem subordinadas de alguma forma e mesmo se forem camadas 3D.

Passo 6

O After Effects então converte coordenadas de composição de tela e são exatamente as coordenadas que nosso efeito precisa.

Isso significa que clicamos com a tecla Alt-, escrevemos "e = " e em seguida selecionamos a camada "Bouncing Ball 02".

Isso é um erro de expressão, então simplesmente clico em OK.

Passo 7

Gostaria de fazer uma transformação de dimensões nesta camada.

Acessamos o espaço de transformação da camada, escrevendo "toComp" após.

Então queremos converter um ponto, o ponto de ancoragem da camada. Então escrevemos "e.anchorPoint" entre parênteses.

Passo 8

E isso funciona muito bem.

O ponto de ancoragem da camada é convertido para o espaço da composição com base nessa camada, resultando nos pontos.

Ainda são muitos pontos, então podemos ajustar o intervalo de tempo em que os pontos são desenhados, alterando a Distância (Seg.).

Passo 9

Gosto disso, farei algumas alterações e aumentarei um pouco o tamanho dos pontos.

Aqui também poderíamos inserir "[0,0,0]", que seria o canto superior da bola. Se inserirmos "[50,50,0]", por exemplo, seria exatamente o centro.





Isso também é possível, mas queremos os arcos bonitos no chão, então mantemos a configuração em "(e.anchorPoint)".

Passo 10

O texto também deve mudar quando a cor mudar. Em vez de "A Bouncing Ball", deverá ter outro texto.

Renomeamos a camada "Change Colors" para "Change Colors 01" e a duplicamos. A cópia é chamada de "Change Colors 01 - MÁSCARA 01". Podemos numerar as máscaras, pois precisaremos de várias.

Como as máscaras não funcionam com camadas de ajuste, removo o ícone da camada de ajuste.

Também não precisamos inverter aqui, então removemos.

Queremos apenas essa máscara, apenas os mesmos keyframes no mesmo tempo da faixa de máscara.

Passo 11

Então eu clico na camada "Bouncing Ball" novamente no Ativar/Desativar Modos.

Agora eu configuro - semelhante ao que fizemos antes, quando desenhamos as linhas e exibimos o texto - a Máscara em Movimento para Máscara Alfa Reversa.

Dessa forma, o Bouncing Ball só estará onde a máscara não estiver. Assim que a máscara passar, o Bouncing Ball também pode ser encerrado.

Passo 12

Lembre-se sempre de cortar as camadas. Novamente aqui - Eu inconscientemente pressionei a tecla do Windows e isso passou despercebido. Alt+Ö para cortar, Alt+Ä para finalizar.

Agora está tudo certo novamente.

Por que cortar as camadas afinal? Não é necessariamente para a performance do After Effects, pois o programa já entende que não precisa renderizar o que está por trás. Mas se eu precisar alterar algo na camada e ela vai até o final do tempo de composição, então terei problemas. Vamos fazer um experimento:

Faço uma Visualização em RAM com uma camada que vai até o final do tempo de composição. No início, tudo parece bom, mas em um ponto eu quero aumentar um pouco o espaço. Se eu altero agora - Pum - toda a Visualização em RAM desaparece. Isso pode ser muito, muito irritante.

E isso é diferente quando as camadas estão cortadas. Se eu tiver uma Visualização em RAM e quiser agora alterar o espaço, a Visualização em RAM permanece na área da frente e desaparece apenas a partir do início da camada atual. Não é necessário recalcular tudo novamente.

Essa é a verdadeira vantagem de cortar as camadas.

Também em dois momentos, é sempre bom cortar as camadas novamente para manter a organização.

Passo 13

No ponto em que a bola salta de volta, precisamos de um segundo texto.

Isso significa que duplicamos as duas camadas "Change Colors 01 - MÁSCARA 01" e "O Bouncing Ball" e movemos as duplicatas para cima (1).

Em seguida, movemos a camada de ajuste com a faixa de cor para o local correto (2) e a estendemos (3) até o final da composição; depois cortaremos mais precisamente depois.

A cópia da camada "Bouncing Ball" é definida para Canal Alfa e então ela se torna "A PRIMEIRA E MAIS IMPORTANTE PRÁTICA" (4).

Reduzo um pouco o campo de texto e aumento o espaçamento entre as linhas, e movo o texto mais para cima.

Passo 14

Vamos fazer outra visualização em RAM - e de repente toda essa história de transição de listras ou cores faz sentido, pois estrutura o vídeo. Ela separa entre a posição de questionamento e a de explicação, iniciando assim um novo capítulo. E além disso, também parece bom, principalmente porque ocorre no meio do movimento e o movimento não é interrompido por isso.

Em seguida, este bola não deve se desfazer - podemos excluir esta parte de uma vez - mas essa bola deve tombar para a direita.

Não temos um segundo Plop para isso. A camada "Plop" movemos diretamente para o "Bouncing Ball 01".





E então nos encontraremos na próxima parte da série de tutoriais, quando a bola for virada para cá: "Bola tombante - Sobreposição de Animações".