Eleve o nível de uma animação de texto com os princípios da animação - Dicas e truques de Motion Graphics

1. Apresentação: O objetivo deste episódio é falar sobre os princípios da animação e como eles podem ser aplicados às animações de texto em gráficos em movimento Os 12 princípios foram criados pela primeira vez pela Disney na década de 1930, mas você não precisa criar desenhos animados de grande orçamento ou animação quadro a quadro para implementá-los Juntos, criaremos uma animação de texto enquanto aprendemos sobre os princípios. Mal posso esperar para ver suas animações. 2. Como começar e projeto do curso: Para começar com essa aula, você precisará acompanhar o Adobe After Effects. Seu projeto de classe é aplicar os princípios de animação à sua própria animação de texto ou a qualquer animação que você desejar. Você pode baixar uma versão completa desse arquivo de projeto na página de projetos e recursos e fique à vontade para publicar seus projetos na galeria de projetos. 3. Slide principal na animação: Para esta aula, estou adotando uma abordagem um pouco mais descontraída. Abriremos a página da Wikipedia os 12 princípios de animação e os examinaremos um por um e veremos como podemos incorporá-los à nossa animação de texto. Começaremos essa aula criando um slide simples em animação de texto. As configurações de composição realmente não importam para este projeto. Vou pegar minha ferramenta de digitação e digitar algum texto. Vou digitar a animação. A fonte que você usa também não importa, mas eu vou usar Montserrat Black Vou centralizar o texto no meio da composição. E isso nos leva ao nosso primeiro princípio de animação, pose depose versus ação direta Essas são duas abordagens diferentes para o processo de desenho. As cenas de ação em linha reta são animadas quadro a quadro, do início ao fim. Já o pose depose envolve começar desenhando quadros-chave e preenchendo os intervalos posteriormente preenchendo os intervalos A ação direta cria uma ilusão de movimento mais fluida e dinâmica e é melhor para produzir sequências de ação realistas Por outro lado, é difícil manter proporções e criar poses exatas e convincentes ao longo do caminho Posar funciona melhor cenas dramáticas e emocionais em que a composição e o relacionamento com o ambiente são de maior importância. Uma combinação das duas técnicas é frequentemente usada. Na animação por computador, que é o que estamos fazendo, animação por computador remove os problemas de proporções relacionados ao desenho de ação direta, mas pose a pose ainda é usada para animação por computador devido às vantagens que ela traz na composição. O uso de computadores facilita esse método e pode preencher automaticamente as sequências que faltam entre as poses Ainda é importante supervisionar o processo e aplicar os outros princípios Na verdade, não é preciso fazer nada para cumprir esse princípio de animação, já que em gráficos em movimento, na maioria das vezes estamos fazendo pose a pose automaticamente. Agora que sabemos qual tipo de animação estamos criando, vamos criar aquele slide simples em animação de texto. Vou abrir a posição pressionando P. Vou pressionar o cronômetro para colocar um quadro-chave e arrastá-lo na linha do tempo Realmente não importa onde no momento. Agora vou mudar o valor Y. Talvez eu acrescente 300 ao valor Y. Lá vamos nós. E isso cria automaticamente outro quadro-chave para nós. Agora vamos descobrir quanto tempo queremos que essa animação dure. Talvez consigamos fazer com que dure 1 segundo. Então, vou arrastar esse quadro-chave para 30 quadros na linha do tempo. E aí está, nosso simples slide em animação. Agora podemos começar a melhorar essa animação usando nossos princípios de animação. 4. Começar e desacelerar: Aumente e diminua a velocidade ou, em outras palavras, e saia com facilidade. O movimento de objetos no mundo real, como o corpo humano, animais, veículos, etc., precisa de tempo para acelerar e desacelerar Por esse motivo, mais imagens são desenhadas perto do início e do final de uma ação, criando um efeito de entrada e desaceleração para obter um movimento mais realista. O conceito enfatiza as poses extremas do objeto. Inversamente, menos imagens são desenhadas no meio da animação para enfatizar ações mais rápidas Esse princípio se aplica a personagens que se movem entre duas poses extremas, como sentar ou ficar em pé, mas também a objetos inanimados em movimento, como uma bola Então, como mencionei, aumentar e diminuir a velocidade também podem ser chamados de facilidade de entrada e saída. Para facilitar e suavizar nosso movimento no After Effects, basta selecionar nossos quadros-chave pressionar F nove para adicionar uma facilidade Aí está. Nosso primeiro princípio de animação já foi aplicado. Se você é um usuário intermediário do After Effects, já sabe que a facilidade de entrada e saída cria uma animação mais suave entre nossos quadros-chave Obviamente, podemos acessar nosso editor gráfico e ajustar nossa animação ao nosso gosto Mas, por enquanto, vou deixar como está e melhoraremos mais tarde usando nossos outros princípios de animação. 5. Antecipação (e excesso): O próximo princípio de animação que vamos aplicar à nossa animação é a expectativa. A antecipação é usada para preparar o público para uma ação e fazer com que a ação pareça mais realista Uma dançarina pulando do chão tem que dobrar os joelhos primeiro Um jogador de golfe fazendo uma tacada tem que balançar o taco primeiro. A técnica também pode ser usada para ações menos físicas, como um personagem olhando para fora da tela para antecipar chegada de alguém ou a atenção se concentrando em um objeto que um personagem está prestes a pegar Para aplicar alguma expectativa à nossa própria animação, antes que nossa animação comece a ser animada para cima, podemos avançar alguns quadros e puxar nossa animação para baixo, e puxar nossa animação então vamos até talvez quatro quadros na Copiaremos e colaremos nosso primeiro quadro-chave e arrastaremos a posição Y, talvez arredondando para 930. Lá vamos nós. Antes que nossa animação suba, ela diminuirá um pouco, e essa pode ser nossa expectativa O que também podemos fazer é adicionar um pouco de excesso. E ultrapassar é apenas outra palavra para antecipação, mas é ultrapassar o local de descanso final Podemos copiar nosso último quadro-chave, colá-lo no quadro 26 e mudaremos a posição Y para cima Eu vou fazer o meu 525. Então vamos lá. Agora, nossa animação, em vez de apenas animar de um quadro-chave para o outro, ela diminui um pouco, que é nossa expectativa, e depois ultrapassa um pouco antes de ir para Vou entrar no editor gráfico e dar uma olhada no gráfico de velocidade. Parece um pouco estranho. Uma solução fácil para isso é ativar nossos quadros-chave selecionando-os, pressionando control e clicando em nossos quadros-chave, e então vamos aliviá-los pressionando F nove voltando para o E vou começar a facilitar nossos quadros-chave. Vou começar arrastando esses dois para o meio, depois vou para os dois últimos quadros-chave Também vou arrastar esses dois para o meio. E para a animação principal no meio, vou arrastar essa alça para a esquerda. Lá vamos nós. Vamos pré-visualizar e ver como é. Acho que parece muito bom. Então vamos lá. Criamos alguma expectativa e um pouco de superação. Também vou mover nossos quadros-chave um pouco na linha do tempo para que a animação não comece imediatamente Talvez possamos movê-lo para cinco quadros na linha do tempo. 6. Comprimir e esticar: Apenas uma pequena recapitulação do que temos até agora. Determinamos que o tipo de animação é pose a pose. Adicionamos um pouco de facilidade de entrada e saída, e também adicionamos um pouco de expectativa e superação Agora vamos levar nossa animação um passo adiante com nosso próximo princípio, squash and stretch O objetivo do squash and stretch é dar uma sensação de peso e flexibilidade aos objetos desenhados ou animados por computador Ele pode ser aplicado a objetos simples, como uma bola quicando ou construções mais complexas como a musculatura do rosto humano No extremo, uma figura esticada ou esmagada em um grau exagerado pode ter um pode ter Na animação realista, no entanto, o aspecto mais importante desse princípio é que o volume do objeto não muda quando comprimido ou esticado Se o comprimento da bola for esticado verticalmente, sua largura em três dimensões, também sua profundidade, precisará se contrair correspondentemente Em nossa própria animação, como estamos apenas fazendo uma animação de texto simples, não acredito que precisemos nos preocupar muito com a animação realista. No entanto, se estivéssemos animando algo como uma bola quicando, teríamos que neutralizar um alongamento vertical com um squash horizontal com Aplique um pouco de squash and stretch à nossa animação de texto, adicionaremos uma animação em escala simples Acho que, à medida que nosso texto está sendo animado para cima, vamos esticar um pouco o texto e, quando o texto cair em seu local de descanso, vamos apertá-lo um pouco e, alguns quadros depois, e, alguns quadros depois, faremos com que ele retorne à Então, para começar, abra as propriedades de posição e escala pressionando P, segurando a tecla Shift e pressionando S. Vamos para o quadro-chave e pressionando S. Vamos para o quadro-chave da segunda posição e pressionaremos o cronômetro da escala para colocar um quadro-chave pressionaremos o cronômetro da escala para colocar um Agora vamos passar para o quadro-chave da terceira posição. Vamos desvincular a escala para que possamos simplesmente alterar a propriedade Y. Mudaremos nossa escala Y para um 15%. Agora vamos passar para o quadro-chave da última posição. E o que queremos fazer é pressionar o botão do quadro-chave porque queremos o botão do quadro-chave porque queremos que esses dois quadros-chave permaneçam os mesmos Não queremos nenhuma animação entre eles. Agora vamos passar de, digamos, talvez cinco quadros na linha do tempo para o quadro 40, e é aqui que faremos um squash Mudaremos nossa escala Y para 85% e, alguns quadros depois, no quadro 43, voltaremos à nossa escala normal, alteraremos nossa propriedade de escala de 100. Agora vamos pré-visualizar sua aparência. É muito sutil, mas acho que acrescenta muito à animação. Todas essas pequenas coisas sutis podem fazer com que suas animações pareçam muito melhores E acho que podemos aliviá-lo e deixá-lo no estado básico por enquanto. 7. Continuidade e sobreposição: Ação contínua e sobreposta é um título geral para duas técnicas intimamente relacionadas que ajudam a tornar o movimento de forma mais realista, dando a impressão de que o personagem segue as leis da física, incluindo o princípio da incluindo o Seguir significa que partes frouxamente amarradas do corpo devem continuar se movendo após o personagem parar, e as partes devem continuar se movendo além do ponto em que o personagem parou, apenas para serem posteriormente puxadas para trás Em direção ao centro de massa ou exibindo vários graus de amortecimento da osculação ação sobreposta é a tendência de partes do corpo se moverem em ritmos diferentes Por exemplo, um braço se moverá em tempo diferente do da cabeça e assim por diante. Uma terceira técnica relacionada é o arrasto, em que um personagem começa a se mover e partes dele precisam de alguns quadros para se atualizarem. Essas partes podem ser objetos inanimados, como roupas ou a antena de um carro, ou partes do corpo, como braços e corpo humano O torso é o núcleo com braços, pernas, cabeça e cabelos que normalmente acompanham o movimento que normalmente acompanham Partes do corpo com tecido muscular, como estômagos ou seios grandes ou a pele solta um cão, são mais propensas a movimentos independentes do que partes do corpo mais ósseas Novamente, o uso exagerado dessa técnica pode produzir um efeito cômico animação mais realista deve cronometrar as ações exatamente para produzir um resultado convincente O suporte móvel se anima entre duas posições muito semelhantes Mesmo personagens parados ou mal se movendo podem exibir algum tipo de movimento, como respirar ou mudar ligeiramente de posição. Isso evita que o desenho implemente esse princípio em nossa própria animação; poderíamos ter todas as letras da nossa palavra animadas em um momento diferente Então, nesta lição, vou mostrar dois métodos separados para compensar nossas letras O primeiro método é muito mais fácil para iniciantes, mas, embora possa ser mais fácil, é muito menos tolerante quando ajustamos nossas animações O segundo método conectará todas as nossas camadas em uma camada usando uma expressão. Dessa forma, quando editarmos a animação em uma camada, todas as camadas seguirão. Você verá o que quero dizer quando implementarmos isso. Então, o que eu recomendaria fazer é assistir esta lição até o fim, e então você pode decidir qual método gostaria de usar. Começamos clicando com o botão direito do mouse em nosso texto. Vá para Criar formas a partir do texto. O que teremos que fazer é duplicar essa camada para cada letra Vou duplicar minha camada sete vezes, alternar o conteúdo para baixo, e vamos excluir todas as outras letras aqui, exceto a A, então vamos renomear essa camada A, e vamos fazer isso para Eu poderia avançar rapidamente, mas, essencialmente, estamos examinando todas as camadas e excluindo todas as letras, e excluindo todas as letras exceto a que queremos, e então estamos renomeando a E estou percebendo agora que preciso criar outro porque esqueci uma letra Ok, agora que terminamos isso, agora vamos deslocar nossas camadas Podemos selecionar todas as nossas camadas, ir para um quadro na linha do tempo, manter pressionada a tecla Alt e o colchete para cortar nossas camadas na linha do Em seguida, arrasto minhas camadas na linha do tempo para que tenham apenas um quadro Eu posso clicar com o botão direito nas camadas. Vá para o Keyframe Assistant, camadas de sequência. Basta clicar em OK. E isso compensará todas as nossas camadas em um quadro na linha do tempo Agora teremos que arrastar nossas camadas novamente para que elas se expandam na linha do tempo E teremos que fazer o mesmo no início da linha do tempo E, basicamente, tudo o que é feito é compensar nossos quadros-chave na linha do tempo Essa é uma maneira muito mais rápida de fazer isso. Veja, quando abrimos nossos quadros-chave com a tecla U, eles são todos compensados por um Então esse é o primeiro método de compensar nossas camadas. Agora vou mostrar outro método usando uma expressão. Para começar, vamos clicar com o botão direito do mouse em criar formas a partir do texto. Em seguida, duplicaremos essa camada várias vezes para cada letra, muito semelhante ao nosso primeiro método Vamos examinar todas elas, excluir todas as letras que não queremos e renomear nossa camada, assim como em nosso primeiro método OK. Agora que terminamos com isso, é aqui que as coisas ficam um pouco diferentes. Vamos abrir os quadros-chave de todas as nossas letras, exceto a primeira letra A, e vamos remover toda a animação porque vamos substituí-la por uma expressão Lembre-se de que, para excluir a animação, basta pressionar o cronômetro Agora podemos abrir esses quadros-chave para nossa camada A. Agora, com a posição do nosso N, vamos pressionar Alt e pressionar o cronômetro E nesse campo, vamos escrever nossa primeira expressão. Eu vou escrever uma variável primeiro. P é igual, e eu vou usar a picareta para agarrar a posição Termine com ponto e vírgula. Vá para a próxima linha e eu vou escrever minha expressão. Valor do ponto P por vez. Lembre-se de que isso diferencia maiúsculas de minúsculas, então escreva exatamente como é mostrado. E aqui vou escrever o tempo -0,10 0,1 de segundo porque as expressões estão sempre em E, como você pode ver quando examinamos a linha do tempo, nosso N anima exatamente um ponto de segundo depois do nosso A, que é exatamente o que queremos Agora vamos fazer a mesma coisa em termos de escala. Vou começar com uma variável. S é igual a, use a picareta para pegar a balança. Finalize com ponto e vírgula. Vá para a próxima linha. Digite o valor do ponto da variável por vez. T -0,1 de segundo. Lá vamos nós. Agora, ele também copia a animação em grande escala. E vamos fazer isso para cada letra. A única coisa que vamos mudar na expressão para o resto de nossas letras é o tempo. Mas sim, agora todas as alterações feitas camada A serão transferidas para as outras letras porque, novamente, estamos usando uma expressão que copia toda a animação. Então, vou seguir em frente e copiar essa expressão para a posição. Vá para a próxima letra, pressione Alt para adicionar uma expressão e, em seguida, basta colá-la nesse campo e vamos alterá-la para 0,2. Isso carrega a animação da posição, mais 0,1 de segundo depois. Faremos a mesma coisa com a balança. E você adivinhou. Estamos fazendo a mesma coisa para cada letra. Então, provavelmente vou passar por isso rapidamente. Mas lembre-se, a cada letra, vamos mudar o número para 0,3 0,4, etc Lá vamos nós. Vamos pré-visualizar nossa animação. 8. Animação secundária: Agora que adicionamos alguns acompanhamentos e sobreposições compensando nossas letras, podemos seguir para nosso próximo princípio de animação, que é Adicionar ações secundárias à ação principal dá mais vida à cena e pode ajudar a apoiar a ação principal. Uma pessoa andando pode simultaneamente balançar os braços ou mantê-los nos bolsos, falar ou assobiar ou expressar emoções por meio de suas falar ou assobiar ou expressar emoções por meio O importante sobre as ações secundárias é que elas enfatizem, em vez de desviar a atenção da ação principal. Se for o último caso, é melhor deixar essas ações de fora. Por exemplo, durante um movimento dramático, as expressões faciais geralmente passam despercebidas Nesses casos, é melhor incluí-los no início e no final do movimento do que durante. Olá, professor do futuro aqui. Lembra no início desta aula quando eu disse que não importava qual fonte você usava? Bem, eu menti Nesta lição, vamos animar os pontos em nossos olhos Se sua fonte não tiver pontos nos olhos, você não conseguirá concluir esta lição. Mas não se preocupe. Não é essencial para o projeto da turma. Você pode pular para a segunda metade desta lição, onde adicionamos uma animação de opacidade ou, melhor ainda, você pode pensar maneiras diferentes de adicionar movimento secundário à Acho que uma maneira de adicionar algum movimento secundário é animando os pontos em nossos olhos Vou começar selecionando todas as minhas camadas, clicando com o botão direito do mouse e pré-compondo E chamaremos essa nova composição de texto de animação. Agora vamos acessar o menu do nosso projeto selecionar nossa composição de texto de animação. Vamos duplicá-la pressionando Control D. Isso cria uma nova composição, e vamos renomear esse ponto porque teremos um com nosso texto de animação nele, e a outra composição conterá nossos pontos porque teremos um com nosso texto de animação nele, e a outra composição conterá Vamos abordar nossa composição de texto de animação. Vamos desligar nosso I e vamos deletar o I superior aqui para nos livrarmos do nosso ponto Agora faremos a mesma coisa segunda vez em que eu desligo a camada, alterno para baixo o conteúdo, desligo esse I, excluo o desligo esse I Agora temos uma composição com apenas nosso texto de animação sem os pontos. Agora vamos ter que entrar em nossa composição de pontos e fazer o oposto Exclua tudo aqui , exceto os pontos. Exceto que uma coisa a observar é que teremos que manter essa camada A superior porque essa é a camada com nossa animação nela. Porque lembre-se, tudo está conectado por meio de uma expressão. Podemos desligar a visibilidade nele. Vou continuar excluindo todas as letras, alternando para baixo o conteúdo do I e, nesta, excluiremos a segunda e. Faça a mesma coisa com a outra camada do olho Exclua o segundo. Então, agora temos uma composição com apenas nossos pontos nela E lembre-se, a razão pela qual estamos mantendo essa camada A é porque essa é a camada com toda a nossa animação nela. Agora vamos voltar à nossa composição principal. Agora vamos inserir nossa composição de pontos em nosso painel de projetos Então, agora podemos começar a animar nossa animação de pontos. Acho que o que faremos é animar os pontos dentro da composição principal Então, o que precisamos fazer é duplicar nossa camada de pontos e desenhar algumas máscaras para separar os dois pontos Vou pegar a camada de pontos duplicá-la com o Controle D. Na primeira camada de pontos, vou pegar a ferramenta retângulo e desenhar uma máscara na primeira metade da tela Isso será para o nosso primeiro ponto. A propósito, verifique se a máscara está configurada para adicionar. Vou renomear essa camada como ponto um. Para nosso segundo ponto, faremos a mesma coisa, mas desenharemos a máscara do outro lado da tela. Este será o nosso ponto dois. Vou renomear a camada. Então, começaremos com a animação do ponto um. Acho que para o ponto um, poderíamos fazer com que o ponto pulasse para cima enquanto o I está sendo animado E então, quando a letra cai, ponto se torna quase como um pequeno efeito de ressalto Então, por volta do quadro 20, mostraremos a posição com P, pressionaremos o cronômetro para colocar um quadro-chave Acho que talvez passe para o quadro 32. E é aqui que vamos arrastar nossa posição Y para cima. Vou subtrair 200 da posição Y. Em seguida, avançaremos na linha do tempo. Vamos tentar talvez o quadro 44. Copiaremos o primeiro quadro-chave e o colaremos. Selecione nossos quadros-chave, pressione F nove para adicionar alguns Es fáceis. Vamos pré-visualizar o que isso parece. Estou pensando logo de cara, isso parece muito bom. Poderíamos acessar o editor gráfico. Estou no gráfico de velocidade e vou arrastar essas alças, uma para a esquerda e outra para a direita. R: Acho que parece muito bom. Muito bom para uma primeira tentativa. Agora podemos ir para o nosso ponto dois. O segundo ponto, acho que talvez possamos fazer com que ele simplesmente apareça do topo da tela. Então, teremos que encontrar um ponto na linha do tempo. Acho que no quadro 54 é quando queremos que o ponto esteja em sua posição normal. Então, mostraremos a posição e pressionaremos o cronômetro. Agora, teremos que voltar na linha do tempo até um ponto em que queremos que nosso ponto comece a aparecer E vou arrastar a posição Y até que nosso ponto saia da tela. Vou apenas arredondar para menos 100. Também vou cortar a linha do tempo para que não vejamos esse ponto até aquele momento O colchete alternativo é a chave para fazer isso. É um bom atalho de se conhecer. Selecionaremos esses quadros-chave, pressione F nove para aliviar Es. E para este, queremos um bom movimento rápido porque parecerá mais natural como se a bola estivesse realmente caindo do céu. Entraremos no gráfico de velocidade e arrastaremos essas duas alças para a direita. Pronto, isso parece muito mais natural. Lá vamos nós. Temos nossas animações de pontos E agora, como segundo movimento secundário, por que não aproveitamos isso como uma oportunidade para animar a opacidade das letras que estão sendo animadas Vamos abordar nossa composição de texto de animação. Destaque as molduras E da camada A pressionando. Pressione Shift e segure T para aumentar a opacidade. Vou baixar a opacidade para 0% e pressionar o cronômetro 0% e pressionar o Agora temos que decidir, em que ponto queremos que a opacidade chegue a 100? Acho que o quadro 25 pode ser bom. Então, vamos trazer essa opacidade de volta para 100. Selecione os quadros-chave e F nove para EZ Es. Acho que isso pode ser bom. Percorrendo a linha do tempo, posso ver que ainda podemos ver um pouco da nossa expectativa, que é o que Então, para o resto das camadas, como fiz meu deslocamento usando a expressão, farei a mesma coisa com a opacidade de todas as G para digitar minha expressão. Vou digitar O igual a, usar o chicote para obter a opacidade da Pule uma linha e, em seguida, digitarei minha expressão ou valor do ponto no momento, tempo entre colchetes Agora, o N, copiou as propriedades de opacidade, mas apenas 0,1 de segundo depois E isso deve ser fácil. Vamos apenas copiar essa expressão e colá-la na opacidade do resto das camadas E, claro, estamos alterando o número em cada camada. Este mudará para dois e assim sucessivamente para o resto das letras. E eu vou passar rapidamente pelo resto deles. E lembre-se de que, se você fez sua compensação usando o outro método, precisará copiar e colar a propriedade de opacidade em todas as letras Agora vamos pré-visualizar toda a animação e ver como ela se parece. Acho que parece muito bom. Vou copiar os quadros-chave de opacidade, vamos entrar em nossa composição de E eu só quero ter certeza colar a animação nos mesmos quadros. Então, vamos passar para o quadro cinco, colar. E, claro, temos que fazer a mesma coisa nossa opacidade nas duas camadas I. Vou voltar à composição do texto da animação, copiar a expressão dessa camada colá-la na opacidade Faça a mesma coisa para o segundo I, copie essa expressão, vá para a composição de pontos, cole na segunda Agora, esses pontos têm a mesma animação suas composições de texto de animação Agora vamos para a composição principal e visualizemos nossa animação. Para mim, isso parece muito bom. Claro, você pode animar o seu, como quiser, mas acho que vou manter o meu assim 9. Exagero: Agora que adicionamos alguns movimentos secundários à nossa animação, vamos abordar nosso próximo princípio de animação, o exagero Na verdade, o exagero é especialmente útil para animação, pois movimentos animados que buscam uma imitação perfeita da realidade podem parecer O nível de exagero depende se alguém busca realismo ou um estilo específico, como uma caricatura, ou o estilo de um A definição clássica de exagero , empregada pela Disney, era permanecer fiel à realidade, apenas apresentando-a como uma forma mais selvagem e extrema Outras formas de exagero podem envolver alterações sobrenaturais ou surreais das características físicas de um personagem ou elementos da um personagem ou elementos É importante empregar um certo nível de restrição ao usar Se uma cena contém vários elementos, deve haver um equilíbrio de como esses elementos são exagerados em relação uns aos outros para evitar confundir ou impressionar confundir ou Quando se trata de nossa própria animação, na verdade, já incorporamos algum exagero ao animar nosso Essa animação por si só já é exagero. Pensando que poderíamos levar as coisas um pouco mais longe talvez exagerando nossa animação em escala Então, vou entrar em nossa composição de animação de texto. E em nosso quadro-chave de segunda escala, talvez eu aumente para um 30% Também teremos que alterar nosso terceiro quadro-chave para um 30% porque, lembre-se, esses dois quadros-chave são iguais E então, quando nosso texto cair no chão, adicionaremos um pouco mais de abóbora, talvez reduzamos nossa abóbora para 70% Vamos pré-visualizar isso. E lembre-se, se você fez seu deslocamento usando as expressões , isso é extremamente fácil para você, porque toda a animação que alteramos nessa camada deve seguir até as outras letras Se você fizesse isso de outra forma, da maneira mais simples, você teria que copiar e colar a animação em escala da nossa camada A em todas as outras letras. Portanto, lembre-se disso ao criar suas próprias animações. Vou entrar na minha camada de pontos e também alterar a escala dos pontos Vá para a animação em segunda escala. Quadro-chave de segunda escala, gire-o para 130. Vá para o terceiro quadro-chave, altere-o para 130 também Em seguida, vamos até nosso quadro-chave de squash, alterando-o para 70%. E lá vamos nós. Agora vamos voltar à nossa composição principal. Visualize sua aparência. Lá vamos nós. Adicionamos um pouco de exagero à nossa animação em escala e lembre-se de que nossa animação de primeiro ponto também é uma animação exagerada 10. Cronometragem: tempo se refere ao número de desenhos ou quadros para uma determinada ação, o que se traduz na velocidade da ação no filme Em um nível puramente físico, tempo correto faz com que os objetos pareçam obedecer às leis da Por exemplo, o peso de um objeto determina como ele reage a um impulso, como um Um objeto leve reagirá mais rápido do que um pesado. O tempo é fundamental para estabelecer humor, a emoção e a reação de um personagem. Também pode ser um dispositivo para comunicar aspectos da pessoa de um personagem, então essa é a parte do processo de animação em que pensaríamos tempo de nossas animações faz sentido lógico para o que estamos Se estivéssemos animando algo complexo, como uma animação de personagem, esse processo seria muito mais longo e complexo Mas para algo como uma animação de texto, como o nosso caso, é aqui que examinaríamos nossa linha do tempo, talvez espaçaríamos um pouco nossos quadros-chave, ou poderíamos deslocar nossas camadas, ou poderíamos usar o editor gráfico Mude a flexibilização da nossa animação. Essas são todas as coisas que podemos levar em consideração quando estamos ajustando nosso tempo Para minha animação, acho que o momento parece muito bom. A única coisa que eu quero ajustar agora é talvez ajustar a flexibilização da escala no editor gráfico Então, vou seguir em frente e fazer isso e vou avançar até o fim. Lá vamos nós. Eu fiz apenas alguns pequenos ajustes no editor gráfico e na animação em escala apenas para que combinasse mais com nossa animação de posição Se você fez sua compensação usando o método de expressões, toda essa animação deve ser transferida para as outras letras Mas se não, você terá que copiar os quadros-chave da escala e colá-los nas outras letras E, claro, tudo isso depende de você. Você pode facilitar suas animações da maneira que quiser. 11. Preparação da cena: Esse princípio é semelhante à encenação, como é conhecido no teatro e no cinema Seu objetivo é direcionar a atenção do público e deixar claro qual é a maior importância na cena. Johnson e Thomas a definiram como a apresentação de qualquer ideia para que fique completamente e inequivocamente claro se essa ideia é uma ação, personalidade, expressão ou humor Isso pode ser feito de vários meios, como a colocação de um personagem no quadro, o uso de luz e sombra ou o ângulo e a posição da câmera. A essência desse princípio é manter o foco no que é relevante e evitar detalhes desnecessários. Como a única coisa em nossa cena é nossa animação de texto, esse princípio de animação realmente não se aplica a nós, mas por que não aproveitamos isso como uma oportunidade para estilizar um pouco nossa animação A primeira coisa que vou fazer é arrastar essa paleta de cores que criei no site da Coolers. Eu vou reduzi-lo e colocá-lo no canto da minha tela. Vou criar um novo plano de fundo usando uma nova camada de sólido. Vou chamá-lo de BG como plano de fundo. Use o seletor de cores e escolha uma das minhas cores. Arraste essa nova camada até a parte inferior da pilha de camadas. Agora vou adicionar um efeito de preenchimento à minha animação de texto. Novamente, vou pegar o seletor de cores e talvez escolher essa cor azul escura Copie o preenchimento, adicione-o às minhas duas camadas de pontos colando-o nas minhas camadas de pontos Azul e laranja são cores contrastantes, o que significa que, em outras palavras, essa animação de texto se destacará do fundo A propósito, tenho uma turma inteira dedicada à escolha de cores caso você esteja interessado. Por que não dar um toque final em vinheta? vinhetas são ótimas para chamar a atenção do espectador para o centro da tela Vou criar uma nova camada de forma usando a ferramenta retângulo. Vou renomeá-la como vinheta com a vinheta selecionada. Vou acessar minha ferramenta Ellipse. Vou garantir que a ferramenta cria máscara esteja selecionada. Agora podemos clicar duas vezes na ferramenta Elipse para criar uma máscara sobre nossa camada de vinheta Precisaremos alterar o modo para subtrair. Abra a pena com a tecla F, e podemos arrastar essa pena até obtermos uma vinheta bonita Para fazer com que a vinheta adquira um tom mais escuro da cor de fundo, podemos alterar o modo da camada Lá vamos nós. A vinheta parece um pouco saturada demais para o meu gosto Então, a primeira coisa que vou fazer é levantar a pena novamente. Aumente um pouco mais a pluma. E outra coisa que eu poderia fazer é aumentar a opacidade com a tecla T, alterar a opacidade Aí, acho que está ótimo. 12. Arco: A maioria das ações naturais tende a seguir uma trajetória em arco e a animação deve seguir esse princípio seguindo arcos implícitos para implícitos Essa técnica pode ser aplicada a um membro em movimento girando uma articulação ou a um objeto lançado movendo-se ao longo de uma trajetória de parábola A exceção é o movimento mecânico, que normalmente se move em linhas retas. À medida que a velocidade ou o impulso de um objeto aumentam, os arcos tendem a se achatar no movimento à frente e se ampliar nas movimento à frente e se ampliar Beisebol, uma bola rápida, tenderia a se mover em uma linha mais reta do que outros campos, enquanto um patinador artístico se movendo em alta velocidade seria incapaz de virar tão bruscamente quanto um patinador mais lento e precisaria cobrir mais terreno para Um objeto em movimento que se move para fora de seu arco natural sem motivo aparente parecerá errático em vez de fluido Por exemplo, ao animar um dedo indicador, o animador deve se certificar de que em todos os desenhos entre as duas poses extremas, a ponta do dedo siga um arco lógico de um extremo ao Os animadores tradicionais tendem a desenhar o arco levemente no papel para que a referência seja apagada posteriormente Então, essencialmente, em termos leigos, parece muito mais natural animar algo em forma arco ou oval do que em linha reta Agora, isso pode ser verdade para qualquer tipo de animação, mas especialmente para animação de personagens. Aqui está um exemplo de uma bicicleta de caminhada que fiz há algum tempo e mencionei a trajetória de movimento. E como você pode ver, quando o pé sai do chão, vez de animar em uma linha reta ou em forma de triângulo, eu o faço animar em uma forma mais oval, e isso é essencialmente o que o princípio do arco está Parece muito mais natural animar algo em um arco do que animar em Então, como podemos implementar isso em nossa própria animação de texto? Bem, para essa animação de texto básica, não há muito que possamos fazer, exceto por uma coisa que acho que podemos fazer é talvez animar nossa animação de segundo ponto para sair da tela pela lateral, quase como se fosse uma bola Então, vou mostrar a posição do meu ponto dois, e vamos ter que ajustar essa animação para que ela seja animada pela lateral Manteremos nosso segundo quadro-chave igual. Vamos para nosso primeiro quadro-chave e vou mover a posição para que ela seja animada a partir da direita da tela Agora que o animamos na lateral da tela, teremos que fazer mais alguns ajustes para que ele seja animado em uma forma mais oval Primeiro, vou desabilitar os quadros-chave por enquanto, só para facilitar isso Você pode desativar os quadros-chave selecionando-os, pressionando Control e clicando nos Então, acho que na metade ou talvez um pouco depois da metade, teremos que adicionar outro quadro-chave teremos que Vamos elevar um pouco nossa posição Y. Agora teremos que suavizar a curva do caminho do movimento Primeiro, vou para nosso primeiro quadro-chave e vou mover a posição Y um pouco mais para baixo, talvez arredondá-la para menos 60 Vou ampliar um pouco nosso segundo ponto em nossa trajetória de movimento e vou usar a ferramenta Caneta. Mais especificamente, vou pegar a ferramenta Change Vortex e clicar nesse ponto central, e isso vai suavizá-lo um pouco E lá vamos nós. Estamos chegando lá. Parece um pouco mais natural agora. Agora, neste quadro-chave central, vou clicar com o botão direito do mouse e vou percorrer o tempo Se você não sabe o que isso significa, significa que quando formos facilitar nossos quadros-chave no editor gráfico, eu os selecionarei e pressionarei F nove Nosso quadro-chave Rove Across time agora é apenas parte do caminho do movimento, e não precisamos nos preocupar em facilitá-lo Só precisamos facilitar nosso primeiro e último quadro-chave. Portanto, o segundo quadro-chave está agindo mais como um caminho de movimento Vou arrastar a primeira alça para a direita. Pronto, acho que está tudo bem. Vou apenas ajustar um pouco mais o caminho do movimento para que pareça mais uma curva, porque queremos que pareça mais como se estivesse saltando da tela Então, vou para o meu primeiro quadro-chave e vou arrastar mais a posição Y para baixo E vou arrastar as alças do quadro-chave central para deixá-lo mais oval Vamos mover nosso primeiro quadro-chave um pouco mais para baixo. Então eu vou usar essa alça novamente. E agora estamos recebendo algo que parece muito mais com um arco. G para arrastar a outra alça. Lá vamos nós. Acho que parece muito bom. Sim, acho que está tudo bem. 13. Os outros princípios da animação: Os dois últimos princípios de animação se aplicam especificamente à ilustração e animação de personagens, mas ainda os examinaremos rapidamente. O princípio do desenho sólido significa levar em conta as formas no espaço tridimensional ou dar-lhes volume e peso. O animador precisa ser um artista habilidoso e entender os fundamentos da anatomia das formas tridimensionais, peso, equilíbrio, luz e sombra, etc Para o animador clássico, isso seria alcançado por meio do treinamento clássico, incluindo extensas aulas de arte e desenho de vida Uma coisa em particular contra a qual Johnson e Thomas alertaram foi a criação de gêmeos, personagens cujos lados esquerdo e direito espelhavam e pareciam Na animação por computador, os animadores de computador modernos desenham menos por causa das facilidades que os computadores lhes oferecem , mas seu trabalho se beneficia muito de uma compreensão básica princípios da animação e suas adições à animação básica por computador Esse princípio destaca a importância de uma boa ilustração em animação. E embora nem sempre seja relevante para nós, designers de movimento, às vezes seremos os ilustradores de nossos próprios gráficos em movimento Portanto, ainda é importante ter uma compreensão básica desse princípio e de como podemos implementá-lo em nossas próprias criações apelo em um personagem de desenho animado corresponde ao que chamaríamos de carisma em Um personagem atraente não é necessariamente simpático Vilões ou monstros também podem ser atraentes. O importante é que o espectador sinta que o personagem é real e interessante. Existem vários truques para fazer um personagem se conectar melhor com o público. Para personagens simpáticos, um rosto simétrico ou particularmente parecido com o de um bebê tende a ser atraente rosto complicado ou difícil de ler não terá apelo ou cativação na composição da pose ou no design do personagem Portanto, esse princípio seria muito mais relevante se estivéssemos fazendo animação de personagens. O objetivo desse princípio é tornar seu personagem o mais agradável possível para o público Mas, como estamos fazendo uma animação de texto, não vamos nos aprofundar muito nesse princípio. 14. Como refinar nossas animações (a etapa final): Então, essa é a parte do processo em que vou revisar minha animação e refiná-la A primeira coisa com a qual não estou muito feliz é a animação em escala. Acho que posso adicionar mais acompanhamento, então vou entrar no texto da minha animação e ajustar a animação em escala adicionando mais acompanhamento ao final da animação em escala Vou começar arrastando meu último quadro-chave sobre alguns quadros na linha do Vou mudar a porcentagem de 100 para talvez 115. Vou mover mais de três quadros na linha do tempo. Altere a porcentagem para 95. Talvez eu arraste esse quadro-chave sobre outro quadro. Agora vou examinar outros três quadros, e aqui é onde podemos mudar nossa porcentagem de volta para 100. Mas temos um pouco mais animação de acompanhamento em nossa escala. Acho que parece muito melhor. Talvez eu até aumente a escala em alguns de nossos quadros-chave Vou até esse quadro-chave, alterá-lo de 130 a 145. Teremos que mudar esse quadro-chave porque queremos que eles sejam iguais Então, vou mudar para 145. Vá para esse quadro-chave, talvez altere para 60%, vá para esse quadro-chave Em vez de 115, talvez subamos para 120. O penúltimo quadro-chave o alterará para 90%. E vamos pré-visualizar o que isso parece. Sim, eu gosto muito mais disso. Também acho que a animação é um pouco lenta quando está aumentando Então, vou encontrar um ponto na linha do tempo, talvez por aqui, e vou selecionar todos esses quadros-chave e arrastá-los. Esse é o quadro 26 na linha do tempo. É uma prévia. Acho que está tudo bem. E, claro, não podemos esquecer que precisamos editar nosso editor gráfico. Lembre-se, estou usando o gráfico de velocidade. Certifique-se de pegar a alça certa. Apenas mova a alça para fora do caminho. Lá temos a alça direita, arraste-a um pouco. Arraste este um pouco. Apenas suavizando as curvas. Faremos a mesma coisa nos dois últimos quadros-chave. E, claro, você pode usar o gráfico de valores se quiser, se estiver familiarizado com o gráfico de valores. É assim que ficaria no gráfico de valores se você optasse por usar o gráfico de valores. E lembre-se, novamente, você pode editá-los. Você pode editar sua animação da maneira que quiser. Lembre-se de que o meu é apenas um exemplo. Teremos que copiar os quadros-chave de escala e colocá-los em nossa camada de pontos Vou apenas remover a animação pressionando o cronômetro e depois reprimindo o cronômetro e colando os quadros-chave Lembre-se de que estamos fazendo isso na camada A porque é a isso que nossas camadas de pontos estão referenciando Agora nossos pontos têm a mesma animação. Vamos voltar à nossa composição principal e pré-visualizar a animação agora Também aproveitei isso como uma oportunidade para reeditar a animação com dois pontos, que passei rapidamente, mas vou dar um resumo do que mudei Basicamente, mudei o caminho alterando as coordenadas da posição. Aqui eu vou te mostrar as novas coordenadas. E eu também diminuo a velocidade da animação arrastando os quadros-chave na linha do tempo Aqui está uma pequena dica que você pode usar. Você pode selecionar quadros-chave, segurar a tecla Alt e, como você pode ver, ela arrasta os quadros-chave proporcionalmente, mantendo a mesma animação. E arrastei o primeiro quadro-chave para o quadro 17 e mantive o último quadro-chave no mesmo local Portanto, a animação ainda terminará no mesmo quadro-chave que tínhamos anteriormente 15. Conclusão: Parabéns por concluir esta aula de princípios de animação. Sinta-se à vontade para publicar seus projetos na galeria de projetos. Mal posso esperar para ver as animações que você criou.