O padrinho do Lottiefiles

1. Introdução: Olá e bem-vindo ao curso. Neste curso, você aprenderá muitas técnicas novas e é altamente recomendável que assista às aulas anteriores antes de continuar, e é altamente recomendável que assista às aulas anteriores antes de continuar pois abordaremos muitas novas técnicas avançadas que farão de novas técnicas avançadas que você 1% dos melhores criadores de Lottie Está bem? e fui certificado criador do LatiflesTurnament pelo torneio LatifilsOficial Discord, E como você sabe, eu sou Bolt Bite e fui certificado como criador do LatiflesTurnament pelo torneio LatifilsOficial Discord, e também sou certificado no Contra. E eu tenho vários emblemas que me são dados pela própria LottieFiles em meu contra. Venho criando animações do Lottie nos últimos cinco anos, e compartilharei nesses cursos aquele momento em que houve uma falha em um arquivo, o que não aconteceu em 100 projetos, mas aconteceu uma que não aconteceu em 100 projetos, mas aconteceu em meu contra. Venho criando animações do Lottie nos últimos cinco anos, e compartilharei nesses cursos aquele momento em que houve uma falha em um arquivo, o que não aconteceu em 100 projetos, mas aconteceu uma vez. Portanto, este curso está repleto de novas técnicas, como criei várias animações complicadas de personagens para vários projetos Vamos aprender como e o que é tela inicial animada e como você pode criar uma para vários aplicativos móveis E também veremos alguns dos projetos muito complicados criei para clientes, para que você esteja pronto para seguir em frente e se tornar o principal criador individual no IltiflePlatform Então, vamos seguir em frente e entrar nisso. 2. 01.O que é Splash Screen?: Nesta aula, aprenderemos o que é uma tela inicial Então, vamos seguir em frente e descobrir o que é o Splash Screen Então, o que é Splash Screen Android? Acabei de adicionar o Android porque queria mostrar algumas coisas. Antes de tudo, vamos clicar no primeiro link oficial para desenvolvedores Android do Android Development. Então você verá aqui que existem algumas notas. Não vou entrar em detalhes técnicos porque o curso será muito longo. Então, basicamente, você pode ler todos os dados aqui, e eu vou basicamente compartilhar minha experiência porque, no momento desta gravação, eu criei mais de 100, ou seja, 137 telas iniciais animadas para aplicativos móveis Então, vamos dar uma olhada no que é uma tela inicial Você verá que há uma pequena animação acontecendo aqui. Agora, isso é uma tela inicial. Algo que aparece quando você abre um aplicativo em um telefone, seja IOS ou Android, então há uma breve animação, que é basicamente uma espécie de animação de logotipo, e você pode usar a mesma animação como animação de logotipo, pois a Valvo discutirá isso agora em detalhes, e você pode criar essas animações com o logotipo do cliente ou logotipo tipográfico que eles fornecem e você pode fornecer alguns serviços muito bons nessa categoria porque há muito potencial aqui, e agora todo mundo está tentando criar, você sabe, aplicativos que priorizam o movimento, e é muito comum que as pessoas os usem. Então, vamos aprender que o que é necessário para criar Lottie animou uma tela inicial Então, primeiro de tudo, a animação deve ter 2,5 segundos de duração ou pode ir até 3 segundos. Agora, esses são os nós, na verdade, e é altamente recomendável que a animação tenha cerca de 2,5 segundos. Mas houve momentos em que o desenvolvedor me solicitou uma animação com mais de 5 segundos. Portanto, também há algumas exceções. Pode não haver isso escrito aqui, mas o desenvolvedor também pode fazer isso. Portanto, se um cliente solicitar isso, você também poderá criar animações mais longas, pois incorporar a animação ao aplicativo é a dor de cabeça do desenvolvedor Seu trabalho é criar algo que realmente funcione. É isso mesmo. E abordamos muitas técnicas nas aulas anteriores, e você já sabe tudo, e este é um dos melhores cursos para criadores de conteúdo. É por isso que não entraremos em detalhes sobre quais recursos são suportados e não porque eles já foram explicados nas aulas anteriores. Então, vamos ver e mostrar como criei uma tela inicial animada Então, primeiro de tudo, posso apenas pré-visualizar alguns dos meus trabalhos. Então aqui está uma animação que eu criei para o nosso cliente. Este é apenas um caso de estudo. É altamente recomendável que você também passe por esses processos quando estiver trabalhando em um projeto de cliente. E você pode ver que a animação está aqui. Agora, isso é o que eu criei para a animação final da tela inicial animada Aqui está outro projeto em que criei essa tela inicial animada Já abordamos a animação de ícones em detalhes nas aulas anteriores, então não vamos entrar em muitos detalhes porque são coisas muito simples. E depois há simulações de animação, obviamente, apenas para mostrar aos novos clientes qual seria a aparência mais provável de suas animações OK. E esse lado estadual em que também há esse lado estadual em que criei a animação a bordo. abordamos a animação de personagens na classe intermediária, então você pode conferir e, sim, é basicamente isso. Há a tela animada Displash. E você pode ver que existem duas variantes que eu criei, uma para o site e outra para o aplicativo móvel. Então, isso também pode acontecer, dependendo do seu caso. Você tem que criar duas palavras e às vezes. Então, vamos dar uma olhada em como eu crio essas animações. Vou abrir meu arquivo. Ok, então abrimos o arquivo. Agora, deixe-me mostrar algo realmente importante aqui, que é que, na maioria dos casos, você criará a animação em uma tela quadrada. Agora, esse não é o caso neste arquivo, mas deixe-me mostrar outro arquivo para dar outro exemplo. Agora, este é um estudo de caso muito bom. Então, vamos examinar isso primeiro. Ok, então esta é a nossa animação quadrada, ok? E, basicamente, o que realmente vai acontecer é que é muito importante ter em mente que o cliente também pode usar essa animação como animação de logotipo. Portanto, você pode simplesmente fornecer a eles um formato MP de quatro arquivos, além de representá-los em um gráfico adicional, criando uma tela inicial e uma animação de logotipo, e você pode ajustar a animação, se necessário E é basicamente isso. Por exemplo, você pode criar um logotipo. Por exemplo, se o logotipo fosse, por exemplo, essa caixa, você pode criar a tela inicial animada a partir dela e fazer a animação do logotipo desse logotipo, à direita, daquele logotipo tipográfico Então, vamos dar uma olhada em como e qual é o processo de pensamento pelo qual eu passo ao criar essas animações Agora, esses são cursos e aulas puramente de animação de interface de usuário, então não vamos entrar em detalhes sobre os princípios da animação Se você realmente quer que eu faça isso ou crie uma classe separada sobre isso, então me avise. Mas essa é uma discussão separada. Ou separado. Então aqui está essa caixa e é a camada SVG E depois disso, nesse ponto, a camada basicamente se rompe. Então essa camada é cortada nesse ponto, certo? E depois disso, temos essas quatro peças espalhadas. Agora, essas são apenas máscaras adicionadas em quatro partes. Há uma opacidade acontecendo, como você pode ver, desaparecendo, E então, basicamente, também há apenas um quadro-chave de posição. Além disso, para dar mais impacto à animação, o que fiz mais foi adicionar algumas peças de formas retangulares ou triangulares que dão a sensação de confete formas retangulares ou triangulares que dão a sensação de Além disso, há apenas essa animação inicial, que consiste apenas em linhas animadas com um caminho de corte Coisas bem simples, nada muito complicado acontecendo. Agora, focando no personagem ou desculpe, na escrita da animação, o que temos aqui. Vamos dar uma olhada nisso também agora. Então, temos essa animação de efeito de escrita aqui. E você verá que há alguns arcos acontecendo, animações de arco, que são apenas o movimento secundário, que é adicionado posteriormente, que é adicionado posteriormente Então, primeiro, você precisa apenas fazer o efeito de animação de escrita. E depois disso, você só precisa desenhar algumas coisas básicas, vá em frente. Você não precisa criar essas coisas no Illustrator. Você pode simplesmente escolher sua ferramenta de caneta, desenhar um caminho simples e adicionar caminhos de corte em cima dele E é basicamente isso. E então você também pode adicionar caminhos de acabamento em cima deles E se você perceber que há esse efeito de escrita verde também acontecendo por trás de nossa animação. Então, o que é isso? Primeiro, deixe-me bloquear essas camadas para que possamos nos concentrar nisso. Então, temos nossa camada aqui, e esta é nossa animação na cor roxa, como você pode ver. Então, basicamente, o que eu fiz foi basicamente criar a animação inteira primeiro e depois criar uma cópia duplicada dela, ok? E a cópia duplicada disso é na verdade, você verá aqui Que toda a cópia duplicada está na verdade abaixo com uma sensação verde, na verdade Deixe-me clicar em outra camada para que eu possa mostrar a você. Deixe-me só fazer isso sozinho. Veja? Então, basicamente, eu criei a animação inteira, primeiro dupliquei isso e trouxe a animação inteira de volta. Uma moldura, só isso. Depois, mudo a cor para verde, e agora ela dá esse efeito de escrita criativa e adiciona muito mais personalidade por causa da animação de preenchimento verde por trás dela. E é basicamente isso. A animação inteira está concluída e, agora, vamos seguir em frente, você verá que a animação dura 4 segundos aqui e a composição é quadrada. Agora, qual é a vantagem de criar a animação em um quadrado? Em primeiro lugar, se a animação for criada em um quadrado, o que você pode fazer é, na maioria das vezes os desenvolvedores me solicitarem que precisem de animação em um quadrado, e a animação deve ter espaço negativo Portanto, a animação deve ter, digamos 500 por 500 pixels quadrados, deve haver um quadrado de pixels e a animação deve estar dentro dele, para que haja bastante espaço negativo. E às vezes o cliente solicita a opção vertical, e esse é o formato vertical padrão para bobinas e solicita dinamização nesse tamanho Então, o que você basicamente pode fazer é soltá-lo aqui. Vamos jogar. Você pode ver que a animação se encaixa muito bem. Agora, se você tiver que reorganizá-lo, o que você pode fazer é basicamente soltá-lo desse jeito, certo? Assim, você pode reorganizá-lo muito, muito bem. Se você também tiver outros problemas, basta pré-contar tudo, ou já está pré-contado, como aqui. Você pode simplesmente criar outra composição de tamanho quadrado e movê-la. Alinhe-o como quiser, dependendo do seu tamanho, e você também pode reduzi-lo e você também pode reduzi-lo, porque é vetorial, portanto, não afetará nenhuma diferença na qualidade E se eles também o usarem como MP para animação , o que você pode fazer é basicamente dizer que eles também o adicionarão no YouTube. Você pode simplesmente criar a versão FHD e, em seguida, basicamente arrastar o quadrado até aqui Então é isso. Você pode simplesmente renderizar isso. Você também pode ampliá-lo. Se você quiser. Você pode ativar a estrela para que a animação permaneça nítida. Você também pode fornecer o formato de quatro K, dobrá-lo e enviá-lo também. Então, agora vamos dar uma olhada em outra tela inicial animada, qual criei um conceito muito semelhante, mas apenas para mostrar como você pode adicionar tanta personalidade, porque mesmo que você não tenha vários efeitos acontecendo, você ainda pode adicionar muita personalidade sua animação, assim como mostrei no projeto anterior e agora neste um. Basicamente, existe essa animação, e você verá que há muita agitação, exagero e expectativa em nosso personagem principal Também há um acompanhamento do resto da animação, porque esta está criando muito impacto e está afetando que as outras saiam de lá. E depois há squash and stretch, que é outro princípio de animação, e depois há apenas o movimento secundário Portanto, o movimento secundário é realmente adicionado no final, como você pode ver aqui e eu mostrei, que esta é na verdade a revisão ou chamada versão basicamente revisada do conceito ou adicionou alguns detalhes adicionais Portanto, você pode ver que eles também podem ser adicionados posteriormente. Você só precisa desenhar algumas linhas e pronto. E isso também depende do tipo de sentimento da marca e também do público-alvo, que tipo de sentimento você está tentando alcançar na animação. Portanto, você também deve manter essas coisas em mente. Ok, então coisas bem simples. Não há nada muito complicado acontecendo que eu deva explicar aqui. Então, vamos passar para a próxima, que é OK, então essa é basicamente mesma coisa animada Splash Screen Um conceito muito simples. Você pode ver que estamos apenas mudando a cor da camada aqui e, em seguida, há apenas uma animação em escala acontecendo com apenas um deslocamento nas camadas É basicamente isso. Coisas muito simples. Isso é muito importante para mostrar à KSU que, na maioria das vezes, o que realmente acontece é que o cliente também pode solicitar a versão escura e clara do aplicativo, dependendo do tema do dispositivo móvel do usuário, talvez, ou talvez ele possa. Você pode acessar as configurações do aplicativo e também alterar o modo escuro ou claro do aplicativo Então essa é a versão escura, certo? E então temos a mesma animação. Você pode basicamente ver que a animação é a mesma, só temos cores diferentes. Agora, é muito importante que você duplique ou copie e cole o arquivo Depois que esse conceito é aprovado, a animação é aprovada, tudo, basta duplicar o arquivo e depois alterar as cores Agora, o motivo pelo qual eu recomendo fazer isso é realmente um conceito básico, é realmente um conceito básico, porque criamos toda a animação aqui. Digamos que o cliente também solicitou isso em quatro K em dois k na vertical também, no formato quadrado também, e também no formato horizontal, completo, na verdade, w. Então, o que você pode fazer basicamente é algo muito simples, que é criar a animação. E se o cliente solicitar algumas alterações, basta fazer essas alterações aqui. Como essa é uma pré-composição adicionada a essas comunicações, essas alterações serão adicionadas aqui automaticamente Então, isso economizará muito tempo. E uma vez feito tudo isso, você criou uma versão para várias comunicações. Se você duplicar esse arquivo, esses coms já terão sido criados na outra versão Então, você só precisará entrar em uma composição novamente e depois alterar as cores, e toda a versão light também estará pronta Então, essas são apenas algumas dicas que economizarão muito tempo. Há uma coisa muito importante a ser lembrada : um cliente também pode solicitar algumas vezes o formato AVD, mas isso aconteceu comigo apenas duas vezes quando criei 100 telas iniciais animadas. Na verdade, o cliente trabalha com o arquivo JSON, mas apenas duas vezes o desenvolvedor solicitou essa versão Portanto, caso um desenvolvedor peça que você não entre em pânico apenas com essa opção e envie essa versão para ele. Ok, então coisas bem simples, nada muito complicado. Então é basicamente isso. E espero que você aprenda algo novo nesta aula. Nos vemos na próxima. 3. 02.Animações de mascote: E tudo bem, então nesta aula, discutiremos como criar animações de mascote para seus projetos de clientes Agora, se você sabe que o Duolingo é um exemplo muito famoso, e se você é um designer de movimento de interface de usuário, você já deve conhecer o Duolingo Então, vamos ver alguns exemplos de como eu os criei. Ok, então vamos dar uma olhada em um projeto que fiz para os pais de Maro, que é um aplicativo IOS, e está no ar agora Então, deixe-me mostrar primeiro as animações e depois veremos o estudo de caso Então, essas são várias expressões do mesmo personagem. Agora, foi realmente desafiador porque o personagem não tem boca, não tem nariz, não tem sobrancelhas, então há muito minimalismo no Então, isso é basicamente para crianças com problemas de saúde mental. Então, essas são várias poses da animação. Ok. Ok, então vamos entrar no arquivo e dar uma olhada na animação. Então, vamos abrir nosso primeiro. Vou apenas cortar isso para que possamos nos concentrar em nossa animação Ok. Então, vamos ver como eles são criados. Então, essas são basicamente camadas de formas. Os designs dos personagens foram feitos no Illustrator, e você pode ver se trata apenas de suas habilidades como animador, porque não há nada muito complicado acontecendo e você precisa trabalhar com o que lhe é dado trabalhar E é basicamente isso. Não há muitos detalhes ou muito trabalho acontecendo na animação. Essas são apenas camadas simples que estão apenas sendo animadas e pronto. Está bem? E deixe-me bloquear o plano de fundo. E você verá que o aluno está aqui. Deixe-me diminuir a velocidade. Ok. E você pode ver que há apenas essa pupila, que está basicamente voltada para o olho direito, que está basicamente E depois disso, temos esse piscar de olhos muito simples, que foi feito nas pupilas Ok. Animação muito simples feita aqui. Já discutimos o piscar de olhos antes nas aulas anteriores, para que você possa conferir se tiver alguma confusão Seguindo em frente, temos isso um pouco desfocado. Os olhos estão se movendo, então apenas as pupilas estão ficando animadas E depois há esse que não está focado. E a equipe de design ainda não tinha decidido que, se eles adicionariam o corpo inteiro ou se o cortariam até a cabeça, é por isso que não há muita animação acontecendo nas pernas ou nas mãos E como as crianças também enfrentavam problemas de saúde mental e eram muito jovens, não queríamos que isso criasse muita distração Com essas animações. Isso é apenas para mostrar a eles como estão se sentindo hoje Ok, então vamos dar uma olhada na animação de salto. Então, vamos nos aprofundar um pouco nisso. Então esse é o nosso corpo, ok? E isso está ficando animado. Bem simples. Ok. Então, há escalabilidade de transformação, certo? Agora, a razão pela qual eu animei essa transformação dentro de um grupo é porque outras camadas são, na verdade, associadas a esta É por isso que se eu animar uma escala, todo o resto também será animado Mas eu não quero que outras escalas sejam animadas. Eu só queria mostrar que o corpo tem movimento, não a coisa toda para esmagar e esticar Então, coisas bem simples. Ok. E depois há uma curvatura nas pernas. Agora, como isso é criado, vamos dar uma olhada nisso. Ok, então, neste momento, você verá que a perna está basicamente dobrada em uma camada separada Está bem? Então, essa camada aqui. E então, quando cortamos, temos outra camada de pernas aparadas, começando pelo mesmo quadro-chave, mas porque tinha que ser parental , porque se eu o criasse aqui, parental , porque se eu o criasse aqui, o corpo não pode se mover para baixo porque tudo está para o centro de gravidade, e é por isso que temos que ter isso em mente Está bem? Então esse é o nosso controle aqui. Você pode ver que podemos mover toda a animação com isso, eu acho. Sim, tudo também pode ser movido. Portanto, toda a animação do personagem não é interrompida. Então, coisas bem simples, nada muito complicado acontecendo aqui, e depois há apenas a rotação dos braços. Agora, como os braços já estavam um pouco curvados, não precisávamos realmente adicionar muito movimento, como eu disse, não queríamos criar muitas distrações para as crianças Então, animação bem simples, nada muito complicado acontecendo aqui também. E depois disso, temos aquele com a cerveja. Então, a cerveja tem basicamente algumas camadas com opacidade. Com diferentes opacidades, e é basicamente isso. entanto, o designer fez um trabalho muito bom, e você pode ver que isso facilitou muito meu trabalho porque se o design for realmente ótimo, você pode criar animações muito boas a partir dele Mas se o design não for realmente ótimo, você não pode realmente criar algo ótimo a partir de um design ruim. Portanto, seu foco também deve estar no design e como você pode obter a maior parte do valor desse design. Então é isso, a maior parte, eu acho, e vamos dar uma olhada em outras animações Então esse está com nojo. Eu não queria mudar o gelo para os traços porque queria mantê-lo restrito da Então eu adicionei camadas adicionais nas laterais, que são basicamente espirais sendo animadas Coisas bem simples. Não está acontecendo nada muito complicado, certo? Agora parece que a criança está, você sabe, sentindo nojo ou meio que pensando em vomitar É por isso que está cobrindo a boca. Então, basicamente, porque agora você pode dizer que não há camada bucal, mas você pode notar que esse tipo de detalhe é muito autoexplicativo, certo? Então, é basicamente lógica homossexual e nada mais está acontecendo aqui, coisas bem simples. E no caso de medo, o que eu tenho aqui são basicamente apenas as gotas que são preparadas e depois muito obrigadas. É isso mesmo. E então temos , por exemplo, se você tem que criar algumas coisas assim, como você pode animá-las é realmente, muito simples Deixe-me falar sobre isso também. Então, digamos que essas são as pernas e vamos pressionar você e você verá que elas estão tremendo muito, certo? Então este é o braço e então você pode ver que há géis por segundo e coisas assim acontecendo Ok. Agora, como isso é criado, vamos verificar o caminho do gel. Então, basicamente, eu apenas converti esses quadros-chave, na verdade, volta para eles, e então criei a animação a partir disso Também não está acontecendo nada muito complicado aqui. O que você também pode fazer é que, em vez de adicionar géis, você pode simplesmente criar uma linha, uma linha simples como essa Está bem? E então o que você pode fazer é basicamente criar algumas deformações na perna também Agora, este é um projeto muito, muito antigo, na verdade. É por isso que talvez eu não soubesse que poderia fazer isso naquela época. Então, talvez eu tenha encontrado uma solução que eu pudesse naquele momento. E o que você pode fazer basicamente é animar isso um pouco para que você possa entender Vou prosseguir com os quadros-chave e vou animar isso um pouco mais ou menos aqui Na verdade, deveria haver mais pontos de caminho, mas isso é apenas para ilustrar o propósito e fazer você entender o que estamos realmente tentando alcançar Então, em quatro quadros, vamos fazer com que seja assim. Coisas bem simples. Não está acontecendo nada muito complicado. E depois disso, você pode ir para o quadro-chave de seis e depois copiar e colar o primeiro quadro-chave. Então, agora isso se tornou um loop como esse. Agora, obviamente, você entende meu ponto. Então, eu não acho que eu realmente precise recriar toda a animação para explicar isso para você Então, basicamente, basta copiar e colar, e isso pode criar a sensação de, você sabe, medo que eu alcancei aqui. Então, coisas bem simples. Não está acontecendo nada muito complicado. Agora, há outro que também tem muitos exemplos diferentes de emoção. Ou digamos que emoções simples mas representadas em personagens diferentes, posam. Então essa é a animação. Vamos dar uma olhada nisso primeiro. Agora, o cliente só me forneceu o design do personagem. Então, basicamente, há essa camada corporal que está sendo animada. Depois disso, temos os braços sendo animados, que são fornecidos ao corpo do mentiroso Você pode ver que o quadro-chave compensado por um quadro-chave porque é uma regra de animação de personagem conhecida como acompanhamento, que uma parte do corpo se move após a outra Está bem? E é basicamente isso. E a parte mais distante do corpo é o s, e é por isso que eles são realmente animados ou, você sabe, adicionados assim. Ok, então coisas bem simples. Não há nada muito complicado acontecendo aqui. Agora, você pode ajustar essa animação um pouco mais. Por exemplo, se eu quiser exagerar ainda mais o movimento do ouvido, posso arrastar esse quadro-chave para frente também posso arrastar esse quadro-chave para frente e notar a diferença Mas estava ficando demais, e um quadro-chave faz a diferença. Assim, você pode testar isso em suas animações e ver a diferença e o impacto de sua animação Ok. Além disso, os foguetes não foram fornecidos pelo cliente Então, acabei de criar essas animações de foguetes sozinho. Animação lopável bem simples. Agora, a forma como eles são criados também é bem simples. Então, essas são basicamente animações de rajadas de diferentes linhas de traçado Bem simples. Agora, o foco principal está no foguete O foguete tem basicamente a forma de uma camada. Então, duas partes estão, na verdade, dentro de um foguete. Está bem? Portanto, as duas formas estão dentro uma camada para que eu possa animá-las com mais facilidade E então, há muito reforço saindo dele quando ele começa Ok, lembre-se de que estamos em um mundo fictício, então nem tudo precisa parecer super realista porque esse personagem também não existe na realidade Portanto, você deve manter essas coisas em mente e está aberto a experimentar algumas ideias malucas. E depois disso, há apenas uma pequena linha atrás dela, ok, que está ficando um caminho de corte, na verdade, animada , há esses arcos de movimento Além disso, há esses arcos de movimento, que são apenas uma linha, que estão criando esse efeito de que o movimento foi muito rápido e há uma espécie de chama por trás dele, que simplesmente desaparece quando está sendo animada E depois disso, basicamente há uma simples abóbora acontecendo na balança, como você pode ver Primeiro começamos do zero, zero, depois vamos para 58 e 108 porque é muito compactado Então, está se alongando muito e depois o esmagamos como se estivesse explodindo energia O mesmo princípio se aplica a todos esses três. Agora, eu criei a animação do confete em um arquivo separado, que está Agora, o motivo pelo qual fiz isso foi muito simples. Eu posso criar várias variantes aqui. Como você pode ver, este é verde. Você verá que existe a versão dois do confete. Você verá que existe a versão três do confete. Você verá que há uma que tem cor cinza e roxa, e há também uma que tem amarelo e roxo. Então, eu posso simplesmente arrastá-los e soltá-los, e cada animação é vinculada ao nulo A propósito, também o foguete. Então, se eu mover isso, o foguete também pode se mover. Talvez seja um erro da minha parte, então peço desculpas por isso Mas toda a animação foi na verdade, animada ou criada corretamente. Portanto, também deveria ter sido criado pelos pais. Então, eu deveria cuidar disso, ok. E será basicamente isso, e então eu posso simplesmente mover tudo e então tudo funcionará. Sim, você pode ver que este é um dos pais corretamente. Então, se eu mover esta, você pode ver que o que eu posso fazer é criar várias variantes da animação, adequadas às necessidades do meu personagem, porque o personagem não está no mesmo lugar em todas as animações. Então, talvez eu tenha que ajustar a animação. Então, por que criar a animação repetidamente? Neste, eu tive que adicionar a cor de destaque, que é amarela aqui E como o amarelo estava no centro e o personagem estava, você sabe, em uma posição diferente, eu apenas movi os brilhos para locais diferentes E é basicamente isso. A mesma coisa também foi feita em várias outras poses. Então, a mesma animação de confete, mas com animações de personagens diferentes, dando o mesmo impacto, e você pode ver que está muito, muito bonita As animações são realmente repetidas e os requisitos eram que a animação durasse de dois a 3 segundos, então, dependendo do que parecia certo, eu fiz o loop com base nisso Ok, coisas bem simples. Animação muito bonita. E esse projeto é feito por doadores, na verdade. Então, existe uma empresa chamada doadores e essas animações de personagens foram criadas para Vamos dar uma olhada rápida no resto da animação. Coisas muito simples acontecendo porque o personagem está se sentindo alegre Então, animação muito simples. Depois disso, temos a animação do personagem. Agora, este é muito importante para mostrar algo muito, muito simples, seja, você verá que existem várias variantes dessa animação Há esses três segundos. Há também essa animação de seis segundos. Você notará que o design do personagem também muda de cor. Agora, por que eu adicionei essa agulha sutil? Porque acrescenta muita história e significado. Doadores consiste basicamente em doar ou ajudar pessoas em tempos difíceis ou cuidar de idosos Então, basicamente, nosso personagem está representando o cinza, e um cinza basicamente significa que há falta de vida e não há felicidade E quando o personagem está abraçando o outro personagem, você pode ver que ele está sentindo o calor Ah, essas coisas, na verdade, de repente também comunicam conscientemente muito mais detalhes e muito mais significado à animação Agora, isso não foi solicitado pelos clientes. Você precisa criar todos esses detalhes extras para dar muito mais significado e profundidade às suas animações Ok, vamos passar para a próxima. Agora, essa é muito simples. Basicamente, isso vai estar no CTA, chamada animação de ação, ok. Então, muito simples. Eles não precisam dos brilhos ou dos confetes desta vez Depois disso, temos o cara que está basicamente gritando ou dizendo: Whoa ho ho. Você sabe? Então, basicamente, fazendo uma espécie de celebração. Ou talvez eles possam simplesmente acrescentar isso basicamente quando estão basicamente fazendo uma venda, eles também podem usar isso em seu marketing de GML para que o personagem esteja gritando, Whoa ho ho, e eles possam colocar um adesivo maior, com 40% de desconto, e isso vai ficar muito, muito bom Ok. E então vamos seguir em frente. Ok, esse é muito simples. Isso também é uma espécie de animação de CTA chamada à ação. Então, basicamente, meio que acenando no rodapé ou na tela de boas-vindas Então, coisas bem simples. Esses tipos de animações de personagens podem ser adicionados às animações de integração, assim como você está fazendo login no seu aplicativo Então, coisas muito boas. E agora temos o último, que é basicamente espalhar amor ou felicidade. Sim, ok, então uma animação bem simples está acontecendo aqui também. Há um pouco de animação na camada da boca. Agora, eu basicamente agrupei e mesclei todas essas camadas porque fazia mais sentido apenas animá-las em vez de apenas, você sabe, a coisa toda poderia estar Os dentes podem estar se movendo em outra direção ou o desalinhamento pode acontecer muito Então, eu apenas os mesclo e, basicamente , também sorri um pouco com a escala e a posição. Coisas bem simples. Os braços são animados em relação ao corpo, como em todas as animações anteriores. Então, coisas bem simples. Também não está acontecendo nada muito complicado aqui. E espero que você aprenda algo com esse projeto. Então é isso para esta classe. Te vejo na próxima. 4. 03. Resolvendo problemas ocultos: Nesta aula, vamos descobrir como usar o AIUXPlugin em vez de usar AIUXPlugin em vez de usar Agora, nós o abordamos um pouco em nossa aula anterior, na intermediária, você possa aprender como instalá-lo seguindo isso. E depois disso, o que você pode fazer é discutir todos os detalhes. Agora, deixe-me ir em frente e te mostrar uma coisa importante. Se sobrecarregarmos a batalha X, vamos apenas procurá-la e você notará que existe essa ferramenta, que discutimos anteriormente Agora, o Overload lançou o 2.2, na verdade. Então, a sobrecarga de dois pontos foi lançada, mas custa $75 E se você precisar atualizar e quiser atualizar seu plug-in, precisará pagar mais dinheiro. Agora, existe uma alternativa melhor, que é o AEUX e é totalmente gratuita Agora, houve muitos problemas no overload 1.2. Também há alguns problemas no uso do AEUX, e vamos examiná-los Agora, a sobrecarga tem seu próprio lugar. Ele também oferece muitas soluções novas, e há muitas coisas que ele pode fazer. Ele também pode transferir seu trabalho do Photoshop, mas esse não é nosso foco principal na criação de animações de interface do usuário É alguém que está criando coisas assim talvez com algumas texturas e coisas assim Ok, então vamos dar uma olhada no AEUX. Falamos sobre isso anteriormente, mas vamos ver se o AEUX está no Você pode simplesmente baixá-lo aqui e ler como instalá-lo, coisas bem simples, nada muito complicado. E o que você pode basicamente fazer é seguir em frente com o Figma e deixar eu mostrar como você pode usá-lo Então, basicamente, como a sobrecarga funciona. Desculpe, meu BD, o AEUX como realmente funciona é basicamente muito simples Vamos seguir em frente e criar algumas camadas diferentes. E deixe-me copiar algum tipo de imagem. Agora, isso é uma imagem. Então, vamos copiar isso, fazer aqui também. OK. Agora, é muito importante que o trabalho que você está tentando transferir esteja em um quadro. Você precisa clicar com o botão direito do mouse, acessar seus plug-ins, entrar em desenvolvimento e entrar no AIUX Depois de aberto, o que você pode fazer é basicamente clicar em Enviar seleção para AE e, em seguida, ele solicitará uma pasta. Vamos criar uma pasta, que será nosso teste AEUX Então, vamos selecionar isso. Ok, você pode ver que a imagem também foi adicionada aqui, e você pode ver que as formas também foram adicionadas. Agora, isso também funciona muito bem com gradientes. Você pode adicionar gradientes e transferi-los também. Funciona muito, muito bem. Mas há uma coisa muito importante que você deve ter em mente ao trabalhar em projetos de clientes, que é entrar na extensão e pressionar o AUX. Há muitas configurações aqui que você precisa cobrir. Você pode selecionar a opção de criar uma nova comparação automaticamente. Você também pode adicionar um caminho seguro de imagem. Eu não selecionei nenhuma pasta, então ele sempre me solicita uma nova pasta. Você também pode escolher a taxa de quadros da nova composição, que também pode ser 60, que também pode ser 24 A duração da competição deve ser de cerca de 60 segundos. Agora, por quê? Porque às vezes me arrependo o tamanho da minha composição ser realmente menor porque o cliente pediu que eu diminuísse a animação E se o que realmente acontece é que o cliente tem tantas camadas ou tantas animações complexas acontecendo ou seu personagem ou sua arte tem tantos quadros, na verdade, ou se a animação é realmente criada usando o layout automático, então há vários Cada quadro que foi adicionado aqui, na verdade, se traduz como um neo comp Por dentro do After Effects. Deixe-me tentar testá-lo novamente. Talvez isso funcione. Sim, você pode ver isso. Esse quadro foi realmente adicionado. Agora, o que realmente acontece se a animação começar daqui. Mas o cliente solicitou que a animação tivesse agora 10 segundos de duração, mas o tamanho da composição era de 5 segundos. O que você pode fazer é pressionar Control K e, basicamente, alterar a duração. Coisas bem simples, nada muito complicado, certo? Mas mas, mas, mas. O importante é que, se você tiver vários quadros dentro desse mainframe , o que realmente acontece é dentro desse quadro, haverá outro frame Então, basicamente, outra pré-competição. Você precisa abrir isso e, em seguida basicamente arrastar a camada. Então você tem que abrir isso, e então você também tem fazer a mesma coisa e torná-la mais longa. Então, por que fazer todo esse esforço para manter os 60. Simples assim, isso não aumenta o tamanho do arquivo de qualquer maneira Portanto, não há mal nenhum em fazer isso. Os parâmetros de detecção da forma devem ser verificados. Agora, diz grupos pré-competitivos. Agora, a escolha é totalmente sua, mas eu não a recomendo. E há outras coisas que você também pode pré-compor grupos, sem recomendá-las Depois disso, você tem un precomp, que neste caso, por exemplo, você pode selecionar isso e pressionar un E isso é muito útil. Às vezes, você realmente não quer fazer isso porque haverá mais de 100 camadas. Então você ficará muito confuso sobre o que devo animar e qual é qual camada Então você tem que manter essas coisas em mente. Também há algumas coisas adicionais que você deve ter em mente. Às vezes, quando você transfere uma obra de arte complicada, algumas camadas de guia estranhas também são adicionadas aqui, e há um projeto real que eu quero mostrar a você Mas, infelizmente, eu não tenho o arquivo Figma para esse projeto E o que você pode basicamente fazer é que, quando isso acontece, você pode simplesmente ativar e desativar a visibilidade das camadas no Google, selecioná-las e depois excluí-las também. Simples assim, e a guia do sistema basicamente não é nada, então deixe-a. Coisas bem simples, e agora passamos por isso. Agora, quais são as vantagens de usar o AEUX? Como mencionei, é totalmente gratuito. Quero dizer, isso é uma grande vantagem. O único problema é o problema pré-composição que acabei de mencionar para vocês, escrevam este, e vocês podem resolvê-lo apenas mantendo a duração da competição por Além disso, não há realmente muitos problemas. Às vezes, uma em 100 vezes, haveria um problema muito, muito estranho, e vamos lidar com isso também Mas vamos primeiro dar olhada em nosso estudo de caso como eu criei diferentes tipos de animações usando esse plug-in Agora, é assim que o AEUX realmente envia os dados para sua pasta Este é um projeto de cliente e o arquivo realmente tinha tantos gradientes que você pode ver as camadas individuais aqui Na verdade, isso não é tão complicado porque, em primeiro lugar , esses dados já foram adicionados ao seu arquivo, então você não precisa se preocupar se houver muitas coisas estranhas acontecendo aqui Apenas ignore essas coisas. Além disso, você deve ter em mente que, se houver uma camada virada aqui, por exemplo, assim, o AEUX ainda a copiará e colará aqui É por isso que existem várias instâncias da mesma camada. E você notará que algumas camadas têm nomes realmente limpos. Agora, isso é realmente exportado manualmente por mim. Por quê? Vou explicar isso agora em um minuto. Vamos abrir o arquivo e mostrar um projeto muito mais complexo, e vou orientá-lo sobre como você vai otimizar o arquivo. Em primeiro lugar, você sabe que não podemos usar gradientes de liberdade e também não é possível adicionar várias camadas de estilo que estão realmente disponíveis no Figma Na verdade, eles não se traduzem muito bem no After Effects. E se eles também forem traduzidos, você não poderá exportá-los tecnicamente para todas as plataformas Todos os recursos não são suportados, como você sabe, dropshat não é suportado no IUS, então tenha isso em mente, E você precisa codificar essas coisas conforme discutido nas aulas anteriores Então, basicamente, o que realmente estava acontecendo com esse pano de fundo é uma história separada, e falarei sobre isso daqui a pouco. Vamos dar uma olhada em nossas cápsulas. Você pode ver que a cápsula é basicamente esse nada animado aqui Eu decidi animar tudo aqui adicionando tudo a um nulo principal, e então isso é Sim, você pode ver, coisas bem simples, e esses pontos estão basicamente seguindo um caminho Agora, como criar isso é muito simples. O que você precisa fazer é basicamente criar um quadro-chave nesse caminho. Copie, leia o quadro-chave. Vá para sua camada de forma. Vamos criar um novo rapidamente. Deixe-me tornar o preenchimento vermelho. Deixe-me esquecer isso. OK. E deixe-me ir para a posição. Golpear. Agora, o primeiro quadro-chave deve ser selecionado e pressionar Control V. Ok. E se isso não copiar, na verdade, deveria, mas deixe-me dar uma olhada nos detalhes de como fazer isso. Ok, então depois de copiá-lo, basta colá-lo aqui e você verá que o caminho foi adicionado e que os quadros-chave também foram adicionados aqui E você notará que está seguindo um caminho. Agora você definitivamente também pode ir na outra direção. Então, vamos seguir em frente, pressionar parar e fazer isso. Agora, depois disso, você precisa cuidar desses quadros-chave intermediários e convertê-los em interpolação de quadros K para torná-los lineares e percorrer o tempo, bloqueando o tempo desses quadros-chave intermediários e convertê-los em interpolação de quadros K para torná-los lineares e percorrer o tempo, bloqueando o tempo. É isso mesmo. Faça a mesma coisa com este também. Então, ou você pode simplesmente cruzar o rove no tempo para desligar. Vou fazer isso linear. OK. E então talvez eu tenha estragado alguma coisa Sim, acho que estraguei alguma coisa. Deixe-me ir em frente e verificar o que realmente fiz de errado. Depois de copiar e colar o quadro-chave, talvez seja necessário ajustá-lo OK. E depois disso, o que você pode fazer, há duas coisas que você pode fazer. Em primeiro lugar, o que você pode fazer é basicamente colocar seu caminho e combiná-lo assim. Está bem? E então você pode colocar sua forma assim, usando o plugue. Simples assim. E depois disso, basta arrastar e soltar onde quiser. Simples assim, nada muito complicado. OK. E se você tiver curvas no caminho, basta ajustá-las e criar a seguinte animação. Simples assim. Da mesma forma que fiz as animações de linha. E então há apenas essa animação de cápsula acontecendo. Agora você notará que a animação começa com a genética. E isso termina na genética. Agora, a forma como eu criei isso é muito, muito simples. Acabei de duplicar tudo, você sabe, você verá que algumas coisas estão mais de uma vez na linha do tempo Por exemplo, o relógio uma vez aqui, o relógio está novamente aqui. Ok, da mesma forma, acabei de criar espaçamento suficiente e criei um pergaminho, que está acima aqui, e posso arrastá-lo para mostrar também que tudo está igual, basta criá-lo duas vezes acima Agora, como esses são pré-preparativos , eles não adicionam dados adicionais e esse tipo de decisão realmente otimiza seus arquivos Coisa simples, mas precisa ser feita com cuidado. Agora, o plano de fundo tinha alguns problemas e na verdade não estava sendo transferido corretamente, então eu só tinha que ir até lá no arquivo, desligar tudo, manter apenas uma camada Por exemplo, essa camada está apenas virada para baixo, desative todo o resto, ou você pode simplesmente selecionar essa camada e clicar em Exportar. E se você quiser transferir apenas essa camada, basta selecioná-la e clicar em Exportar. É isso mesmo. Depois, você pode seguir em frente e o que você pode fazer é muito importante que, pouco antes de iniciar a animação, clique aqui, exporte um quadro-chave, nomeie-o como referência e seguida, coloque-o em sua composição e na parte de trás Além disso, você pode perceber se alguma coisa está desalinhada ou algo parecido Às vezes, haveria uma questão que vamos discutir. Como abordamos este, também abordaremos esse outro erro detalhado, que acontece em alguns projetos. Mas antes disso, vamos dar uma olhada nas outras duas animações que eu criei para esse projeto Na verdade, acho que são três. Então, novamente, há várias imagens. Mesmas cartas, mesmas imagens, coisas simples. Novamente, o efeito de loop, os revestimentos são criados, tudo está dentro daqueles se movem na direção Coisas simples, nada muito complicado acontecendo. OK. E sim, é basicamente isso. E você pode excluir essas camadas adicionais quando necessário, mas se elas estiverem desativadas, elas não serão realmente exportadas. Portanto, é uma vitória de qualquer maneira. E você pode ver que essa é a composição final em que tudo é renderizado OK. E você verá que esta é a nossa moldura, novamente, o mesmo problema com os gradientes ou algo que eu estava enfrentando Então eu fiz a mesma coisa. Além disso, outra coisa muito importante é que eu use o mesmo tamanho da máscara para que tudo saia dela. OK. E como os requisitos eram esses, o cliente precisava da animação para adicionar esses espaços negativos. É por isso que eu adicionei isso. Caso contrário, eu poderia simplesmente soltá-lo também. Coisas bem simples, as mesmas cartas, meio que animadas Vamos entrar na compatibilidade de cartões para que você também possa vê-la Então, três cartas, ok. E então eu basicamente dupliquei esses cartões com o mesmo espaçamento Então, vamos seguir em frente e você pode ver agora onde essa carta realmente começa. OK. Coisas bem simples, basta duplicar as camadas para otimizar os tamanhos dos arquivos É isso mesmo. Agora, vamos dar uma olhada em nosso terceiro arquivo. Agora, isso é, vamos abrir. Ok, então este realmente teve alguns problemas, e vamos examinar isso também. Você notará que esse é um traço que eu realmente tive que criar aqui. Agora, porque às vezes os gradientes estão realmente confusos. Por exemplo, se você está adicionando um gradiente mais simples, eu também notei, que é meio estranho, que quando recebo esse tipo de arquivo do cliente, só então eu enfrento esse tipo de problema Há outro projeto que discutiremos muito em breve nesta aula, que é o CryptApject Agora, isso é de um designer conhecido como Gacofz. Colaboramos em alguns projetos. Ele é um designer realmente incrível. Um emoldurador funciona muito bem e também faz um ótimo trabalho de design Assim, você também pode conferir o treino deles. E uma vez que ele projeta a maioria das coisas, eu realmente não vi muitos problemas além dos problemas que enfrentamos nesses projetos que discutiremos. Além disso, quando trabalho com os projetos do cliente, percebi que há vários problemas de gradiente que os gradientes parecem perfeitos aqui Mas quando eu os transfiro para o AE, eu meio que vejo problemas muito, muito estranhos. Você verá que não há problemas aqui, certo? O gradiente chegou aqui perfeitamente. Mas às vezes eu só preciso recriar a camada. Não sei por que isso acontece. Não existe essa explicação sobre isso porque é apenas uma espécie de ferramenta que não tem muito suporte. Portanto, é apenas uma ferramenta com a qual você precisa trabalhar. Mas é uma alternativa gratuita, trabalhei em mais de 100 projetos com essa ferramenta, e ela funciona muito bem. Então é por isso que você sabe, requer que seja criada uma classe separada sobre ele. Então, coisas bem simples criadas aqui usando a mesma técnica. O gradiente é basicamente muito simples. A opacidade está diminuindo no canto inferior. Deixe-me ir em frente e te mostrar o gradiente. E vamos ver onde isso está. Sim. Você pode ver os pontos do gradiente. Na verdade, sim, agora você pode ver melhor. Vê? Gradiente bem simples. Nada muito sofisticado Às vezes, você também precisa fazer essas coisas manualmente. Sei que às vezes pode ser problemático, mas também ajudará você a melhorar ou conseguir um designer melhor, e isso também fará com que você se destaque da multidão e se torne o melhor criador de 1% Então, isso é basicamente para explicar e mostrar a vocês que a resolução de problemas também é, na verdade , um aspecto importante de fazer essas animações. Você simplesmente não precisa adicionar quadros-chave. Você também precisa ter em mente essas coisas, e a forma como eu criei a animação offset é bem simples No entanto, você cria uma animação simples de seixos em loop, basta criar três quadros-chave Você simplesmente os copia e cola novamente e, em seguida, basicamente os desloca Coisas muito simples, nada muito complicado acontecendo aqui também. E o fundo é basicamente apenas uma imagem. Da mesma forma que tive alguns problemas com este também. Então, basta adicionar uma imagem. Você pode ver que eu adicionei uma máscara porque os cantos precisavam ser arredondados, mas você sabe que as composições são, na verdade, quadradas em todos os softwares de composição e em todos os lugares É por isso que acabei de adicionar uma máscara retangular para corrigir esse problema Ok, coisas bem simples. Porque quando eu estava realmente transferindo isso do Figma, ele não tinha máscara, então eu só tinha que adicioná-la e o raio do canto, se houver alguma adicionada no Figma, ele não é ele não Para After Effects também. Deixe-me tentar te mostrar isso também. Eu acho que isso não funciona bem. Ah, é verdade. Então, porque talvez tenha sido realmente adicionado uma imagem, é por isso que não funcionou Mas de qualquer forma, só para manter as coisas em mente ou manter as coisas entediantes, essa é apenas uma técnica para ter na bolsa Então, agora vamos abordar algo que não discutimos até agora em nenhuma das aulas. Então, deixe-me seguir em frente e mostrar uma animação de cabeçalho. Agora, o que é realmente uma animação de cabeçalho? Uma animação de cabeçalho é algo que é exibido na parte superior de um site, ok? E neste exemplo, a animação é bem simples. Basicamente, uma IA apenas falando. Simples assim, criamos animações de bate-papo com muitos detalhes na classe intermediária e também na classe avançada Você pode conferir esses. Então, coisas muito simples estão acontecendo. Vamos ver o que há de diferente aqui que talvez não tenha sido discutido antes. OK. E há outro exemplo que abordarei em breve nesta aula que mostrará como você pode criar sistemas realmente ativos que entram em diferentes seções do site. Ok, então sim, você pode ver que há basicamente essa meia carta. Agora está trancado, eu acho. Sim, parece ser esse. Sim. Essa é uma bolha Então, basicamente, da mesma forma que fizemos animação antes na aula anterior, tudo está animado aqui. A mesma coisa, coisas M. São apenas imagens, coisas simples. Agora você pode ver que, o que eu discuti anteriormente, você pode ver que existem composições dentro de comunicações, certo Agora é aqui que você pode ter problemas se precisar prolongar sua animação. Isso aparecerá em cada composição, aumentará o tamanho do arquivo e , em seguida, estenderá as camadas Nós realmente devemos evitar esse tipo de trabalho extra. Ok, então isso é basicamente a animação. Nada muito complicado acontecendo aqui também. Coisas bem simples. E esse ícone também é apenas uma imagem. OK. Então, o que é realmente animação de cabeçalho? Deixe-me mostrar um projeto que eu criei. Espero que o site deles esteja ativo, sim. Agora, infelizmente, não consigo localizar os arquivos, talvez eles tenham sido excluídos quando os dados foram corrompidos na minha outra unidade. Mas você pode ver as animações aqui. Está bem? Então, isso é basicamente um design SVG, um design SVG completo e, em seguida apenas animado em cima de uma imagem móvel Depois, há essas mensagens do WhatsApp, bem simples de criar. E você pode ver quanto valor isso agrega, certo? E, basicamente, toda a animação do fluxo de trabalho que você pode ver. Criamos uma animação muito semelhante na classe avançada, então você pode conferir. E é basicamente isso. É assim que seu trabalho vai ficar. E as cores, os conceitos realmente importarão. Portanto, tente manter essas coisas em mente e cuidar de uma boa marca da marca com a qual você está trabalhando OK. Então, vamos seguir em frente e deixe-me mostrar outro estudo de adivinhação muito bom. Que eu criei. Ok, então vamos dar uma olhada nisso. Ok, então vamos dar uma olhada em uma marca local para a qual eu criei animações Agora, neste projeto, fiz algo realmente incrível e muito interessante. Deixe-me seguir em frente e mostrar primeiro como o site realmente foi lançado. OK. E este é, na verdade, o site de um projeto ao vivo. Então, basicamente, o negócio está ativo. Agora, isso é muito interessante. E o que eu fiz para esse projeto foi criar o logotipo também. Eu fiz o design do logotipo. Eu fiz todo o design e também a animação. OK. Então, havia apenas duas cores, apenas roxo da marca e depois verde, que eu adicionei como cor complementar. E você pode ver que a animação está funcionando muito bem. Então, isso é basicamente algo conhecido como animação de cabeçalho. Isso basicamente explica a maior parte do produto, certo? É autoexplicativo o que a empresa faz. E então temos todos os designs feitos por mim, e então temos essas animações de fluxo de trabalho, certo? Coisas muito simples, mas feitas de forma muito interessante. E então temos o ícone do Google Business, que basicamente está sendo impulsionado, certo? Então, basicamente, quando você escolhe um plano da plataforma, o que você obtém é que, se você percebe que compra, aumenta a escala , tem muitas análises , vendas em andamento, vai disso para isso, então muito crescimento acontece porque se trata de contar histórias, certo? Quando você tem total liberdade sobre o projeto, esse é o tipo de trabalho que você deve criar. E esse é o tipo de serviço que fará com que você se destaque na multidão. E então você pode ver essa animação de lupeb muito boa. Certo? Então temos esse rodapé, que basicamente mostra o que o Local B vai fazer Agora, todas as animações são muito compatíveis. Você pode ver que nada muito sofisticado está acontecendo. Não há efeitos especiais, mas ainda assim, você verá que a animação está muito bonita. Isso acrescenta muito significado e vida ao site. E é basicamente assim que você pode fazer com que as marcas se destaquem da multidão. Você pode criar um trabalho incrível. E depois de criar algo incrível como isso, o que você pode basicamente fazer é criar um bom caso de estudo a partir disso e mostrar ao mundo que é isso que você é capaz de fazer. Está bem? Então, basicamente, essas são todas as animações e vamos analisá-las rapidamente porque os designs foram feitos por mim, então não há realmente muitos problemas nesses cenários Coisas muito simples. Quando o B basicamente escolhe o logotipo, o caminho foi cortado. É uma pré-competição. A camada foi reduzida porque agora está vinculada ao próprio logotipo E o logotipo é basicamente predefinido e animado dessa forma. E eu apenas adiciono o enquadramento da tecla de posição na pré-composição, coisas bem Nada muito complicado. OK. Certo. Coisas bem simples. Está bem? E depois temos o outro. Vamos dar uma olhada nisso. Ok, então essa é a entrada de design do Illustrator. Agora, você notará que as fontes são, na verdade, eu usei uma fonte que eu tinha no meu computador, então eu simplesmente não precisei convertê-las porque os textos também não estavam animados E o foco estava apenas nos elementos. Portanto, o texto só aparece com opacidade, então não precisamos convertê-los em jogadores She Isso será um trabalho extra, não precisa disso. Muito simples, como uma animação aqui. Apenas alguns aumentam muito bem. OK. Deixe-me mostrar os quadros-chave Animação de aumento de escala bem simples. Nada muito complicado. Depois disso, temos a animação da seta, que é o caminho dos sonhos. Discutimos isso no curso avançado sobre como otimizar as setas E então temos o bot de IA. Nós temos o SEO, coisas bem simples, certo? Mas é muito significativo e realmente se encaixa em todo o estilo da marca. Depois disso, temos o impulso de negócios do Google. Vamos dar uma olhada nisso. Ok, então este é um pouco longo. Então, toda essa jornada está acontecendo. Então vamos aqui. Nós escolhemos este pacote. Vamos simplesmente descer. Agora, porque eu quero que seja , basicamente, um elemento está basicamente conectado a outros elementos, é por isso que todo o trabalho está em uma composição. E eu estava me divertindo animando, então não prestei muita atenção em adicionar pré-câmeras aqui Além disso, o cliente estava realmente disposto a confiar em mim. Ele não pediu muitas revisões. É por isso que eu estava confiante de que ele adoraria. É por isso que eu simplesmente não adicionei precams. Sim, coisas muito simples estão acontecendo aqui. Então, basicamente, essa linha chega, e acho que será difícil encontrá-la . Sim, eu acho. Deixe-me tentar encontrá-la. Talvez esse? Não. Sim, esse. OK. Portanto, o design da linha é simples, mas a outra linha é basicamente separada. Está bem? Então, ele simplesmente sai do final e, em seguida, revelamos este e o logotipo está basicamente seguindo ele Agora, todas as molduras de presente são adicionadas aqui porque a mesma camada está, na verdade percorrendo toda a jornada, então eu não precisei pré-compô-la porque é de camada única Se eu pré-compô-lo, é a mesma história. Então, nada diferente. Então temos isso: as linhas realmente tiveram algum efeito de afunilamento Não, eu realmente não queria comprometer isso, e é por isso que acabei de animar isso por meio de uma máscara. Agora, é um trabalho extra, como você pode ver, mas definitivamente vale a pena porque o efeito de afunilamento na linha parece muito bom E é por isso que tive que expandir a camada, porque você não pode adicionar efeito de conicidade na Lottie E então temos essa linha, que também é uma linha cônica Simplesmente animado. Então temos bolas escaláveis, pontos É isso mesmo. Então, temos os números aumentando de forma muito sutil Então, todo o nosso foco está aqui e temos a análise girando . Coisas simples. Uma animação de escala aleatória está acontecendo aqui com algum deslocamento em relação às camadas Então, parece muito bom, certo? Portanto, há algum deslocamento que pode ser obtido com isso. Muito simples, certo? Então temos essa animação aqui, certo? Coisas bem simples, deslocamento de escala novamente aqui . Coisas simples. Agora, uma coisa muito importante a ter em mente é que agora temos dois campos na camada. Então, para basicamente reduzir as camadas em sua composição ou limpá-las um pouco, basta selecionar uma ou duas camadas, arrastar assim e depois mesclá-las Isso não afeta a camada de forma alguma. E então é simples assim. E depois disso, temos a análise do Google. Vamos dar uma olhada nisso. Acho que essa é a animação do cabeçalho, a mais impactante. Sim. Então agora você verá que primeiro, eu criei a animação no formato do Google, certo, nas cores do Google. Mas o cliente queria muito o toque da marca, certo? por isso que eu recolori de forma simples assim. Coisas bem simples. Nada muito complicado, certo? E você notará que o verde, o amarelo, tudo basicamente o amarelo combina basicamente com o Google. O roxo é da marca. A regra padrão é que, basicamente, quando você está adicionando cores, você deve usar sua tonalidade, eu acredito, e se o número for maior que 150, você deve menos 150, ok E isso vai te dar uma cor muito complementar. Se o número estiver abaixo de 150, basta adicionar 150 a ele. Isso lhe dará o valor perfeito. Então, só uma dica de design ali. Agora, isso será muito útil para criar contrastes muito bons E o cliente adorou. Então eu disse, por que não? Vamos seguir em frente. E é basicamente isso. E se você está pensando em como a animação é criada, aqui está basicamente apenas um pouco da camada com escala 120, e depois reduzimos para cem A mesma animação em todas as camadas. Mas basta adicioná-lo com um pouco de, você sabe, deslocamento. Você pode ver o deslocamento aqui, certo? E então há apenas essas avaliações do Google surgindo, certo ? Então, um após o outro. Então, basicamente, são apenas avaliações do Google sendo impulsionadas, você sabe, elas aparecem e depois entram nisso e então temos a classificação subindo Então, estamos basicamente contando toda a história. E todos esses são, na verdade, aparentemente para seus próprios nulos, e então esses são apenas nulos sendo movidos por meio da posição Krames Então, essas são as coisas que você deve ter em mente para otimizar seus arquivos. Você pode personalizá-los mais tarde ou basicamente agora, quando estou explicando isso para você, não estou realmente tendo dificuldade em animar coisas assim Mas se você estiver trabalhando no arquivo Figma que eu realmente mostrei no projeto anterior do cliente, é difícil animá-los e também manter a organização desses Portanto, tenha isso em mente. E se você começar a se esforçar para descobrir qual camada é abanada, não se preocupe Eu também estive lá e você aprenderá com a experiência. Confie em mim. Ok, então depois disso, temos a animação do logotipo, ok? E temos a animação do logotipo em vários formatos. Vamos mostrar a animação do presente porque não há muita coisa acontecendo. Coisas bem simples. Nada muito complicado, apenas um pouco de squash and stretch, um pouco de animação e ultrapassagem nas antenas do B. E a mesma animação foi, você sabe, oferecida em vários tamanhos, e você pode ver isso. Mesma animação, mas tamanhos diferentes. Acabei de criar esta versão quadrada e depois coloquei essa pré-composição em todos os lugares. Coisas simples, muito úteis e que economizam muito tempo. Ok, então é basicamente isso para esta classe. Nos vemos na próxima. 5. 04. Resolução de erros: Ok, então nesta aula, discutiremos como solucionar alguns erros que você pode enfrentar e você não tem uma ideia como esses problemas estão sendo criados Então, vamos discutir nosso caso de estudo e dar uma olhada em alguns dos erros que estávamos enfrentando. Você pode ver que há alguma proporção de texto aqui, há alguma proporção de texto aqui e também há alguns problemas de texto por aqui. Então, como corrigir isso. Agora, é realmente surpreendente que, quando eu realmente exportei esses arquivos do meu After Effects, havido nenhum problema O que eu quero dizer com isso é quando eu exportei a animação, o que eu realmente estava vendo A animação dentro da minha prévia foi completamente perfeita, ok? Não houve nenhum problema. A animação parecia perfeita. A animação também parecia perfeita aqui. Não houve problemas. Não havia nem mesmo um único problema que eu pudesse ver aqui. E a primeira vez que isso realmente aconteceu, fiquei muito assustada porque não conseguia entender por que isso estava acontecendo. Não entendo porque o cliente estava reclamando muito. Então é assim que você realmente conserta isso. Então, basicamente, vamos importar nosso ativo para primeiro entender o que realmente estava acontecendo. E então, aprenderemos os métodos para solucioná-los, na verdade. Está bem? Então, vamos seguir em frente e adicionar nosso gráfico. Vamos fechar este projeto e importar este. Ok, tudo está adicionado aqui. Ok. Portanto, essa é a camada que estava causando o problema. Está bem? E vamos seguir em frente e criar uma animação muito simples. Ok. Vamos apenas animar essa camada Animação muito simples. É isso mesmo. Vamos tentar explorar isso. A propósito, discutimos que haveria alguns jogadores do grupo, e você também pode ver esses jogadores do grupo aqui. Está bem? E vamos em frente e você pode ver que os jogadores do grupo também podem ser desativados ou habilitados. Está bem? Mas essas camadas não têm dados. Não há nada sobre eles. E o que você pode fazer é basicamente excluir jogadores do grupo. E sua composição ficará limpa. Ok, então também abordamos esse recurso. Agora, vamos continuar e atualizar. Clique aqui, clique em nosso gráfico. E agora é só clicar em testar. Basta clicar nas renderizações atuais e você poderá ver a animação Perfeito. Agora, eu realmente não posso ampliar aqui, mas você pode ver que não há nenhum problema aqui, certo? Agora, é aqui que entra a solução do problema. Você precisa acessar o Google e pesquisar a prévia do Lottie. Ok. Existe o LottieFiles Preview. Você pode abrir isso. Há LottieFiles da Lottie e então vamos tentar encontrar alguns outros Vamos tentar encontrar vários, ok? Porque quanto mais, melhor. Então, vamos ver Ok, e agora eu vou aqui, clique em Mets Jason, arraste-o E você está vendo que não há problemas acontecendo aqui também. Agora, porque talvez eu conserte a camada na Figma, talvez seja exatamente por isso que isso não está acontecendo Não, não, não, acho que está acontecendo aqui. Vamos ampliar. Você pode ver que há esse problema, mas isso não está realmente sendo detectado em nossa animação, o que é meio estranho. Agora, para corrigir isso, vamos seguir em frente e ver se também podemos testá-lo em alguma outra plataforma. Está bem? Então, isso é basicamente plugar ou sair, e vamos clicar na animação plod Vamos apenas arrastar e soltar. Opa, não está funcionando. Então, vamos seguir em frente, copiar nosso caminho, colá-lo aqui e clicar em testar. Você pode ver que há um problema aqui também. E então vamos ver. Agora, não vamos usar isso, deixe-o. Está bem? Assim, você pode usar essas prévias do Lottie, diferentes de vários estilos e de vários sites, e depois testar sua animação E é altamente recomendável que, mesmo que você esteja confiante em sua animação, ela não demore mais do que 2 minutos, teste-a para atrair clientes melhores e fazer um trabalho extraordinário , oferecendo algum valor extra, ok? Porque é isso que vai fazer você se destacar da multidão. Ok, então agora como consertar isso. Na verdade, existem duas maneiras de corrigir isso. Agora, esses problemas são, na verdade causados por uma coisa muito simples. Há uma solução: você pode clicar na camada, clicar com o direito do mouse e criar formas a partir do texto. Agora, isso resolverá o problema. Agora, essa é a solução número um. Digamos que há um parágrafo inteiro e isso vai atrasar seu sistema Você deseja manter a camada de texto realmente preservada. O que você pode fazer é clicar duas vezes aqui e, em seguida , colocar a caixa inferior assim. Está bem? E você também pode fazer com que caia um pouco assim. Está bem? E então vamos apenas atualizar. Vamos clicar em Exportar novamente e clicar em testar novamente. Vamos apenas substituir nosso arquivo. Vamos clicar em Renderizar. Vamos esperar um minuto e ver o que acontece. Ok, então o arquivo explodiu. Vamos testar nosso novo arquivo. Vamos clicar aqui e vamos apenas a do Lottie Lab. Sim. Vamos apenas arrastar e soltar nosso arquivo. Vamos ampliar e ver se nosso problema foi resolvido. muito simples não fazer nada para complicá-lo, mas apenas uma maneira de corrigir um problema muito complicado para o qual talvez você não encontre a solução na Internet, e isso só foi aprendido por meio da experiência Ok. Portanto, outro problema que você pode enfrentar é que, na verdade, isso geralmente acontece quando você está trabalhando com gradientes, não com camadas sólidas O que realmente acontece é dizer que existe esse gradiente ou digamos que existe essa camada de forma, ok? E temos uma cor muito bonita no gradiente. Agora, basicamente, o que realmente acontece é vamos arrastá-la para dentro de uma moldura. Deixe-me ir em frente e colocá-lo aqui. Ok. Deixe-me enviá-lo para o After Effects. Agora, o que basicamente vai acontecer é que às vezes o gradiente parece muito bom aqui Não há problemas em seu design e tudo parece perfeito. Está bem? Agora, quando você estiver realmente exportando o arquivo, ao visualizá-lo aqui, o arquivo ficará perfeito Não há problemas, mas ao testá-lo no site, você enfrentará um problema muito estranho Por exemplo, esse retângulo vermelho vai ser laranja, ou isso vai ser realmente preto E você é apenas um quebra-cabeça, você só vai voltar aqui, verificar as cores e ver se você adicionou algum gradiente talvez aqui Mas não há nada. Não há efeitos, nada. Tudo está perfeito. Nesses cenários, o que você realmente precisa fazer é excluir a camada, ok? Basta excluí-lo. Não remova o campo, adicione outro preenchimento. Não, isso não vai funcionar. É apenas uma espécie de falha no código porque é apenas um arquivo Json de pontos é basicamente um arquivo JavaScript de pontos E há algum tipo de falha de código que realmente acontece Então, o que você precisa fazer é basicamente criar e escolher sua ferramenta de retângulo Ok. Vá em frente e crie a forma. E então o que você pode fazer é, se tiver problemas para copiá-lo daqui, basta entrar no seu figma e clicar nele Você pode copiar o valor daqui. Clique aqui com a tecla Alt. Aqui está o valor. Clique em OK. Vamos corrigir nosso gradiente bem rápido, assim. Ou às vezes também acontece que o posicionamento do gradiente também está confuso. Portanto, nesses cenários, você deve usar esse método em vez de apenas reorganizar o gradiente, porque às vezes isso também não funcionará Você também vai copiar essa cor, clique aqui. Então, apenas um valor como esse. Muito simples, não muito complicado. E se houver gradientes muito complicados e você não puder realmente recriar o gradiente ou se houver várias cores adicionadas a ele, e isso não é basicamente possível adicionar aqui, talvez haja um desfoque vindo dessa direção, haja um desfoque vindo dessa direção Então vá em frente, clique na camada, exporte-a como PNG e adicione esse PNG. Ok, tente comunicar essas coisas com o cliente antes de continuar, porque você pode simplesmente dizer ele que é um erro de código, não é seu problema, e você não é o único que não é especialista, mas na verdade sabe como corrigir o erro Ok, então isso explica isso. E agora, com relação à animação de Cryptia, há algo que eu deveria mostrar a vocês Que é essa animação de cabeçalho. Eu acho que isso tem a animação que eu quero mostrar para vocês. Deixe-me ter certeza de que esse é realmente o único? Sim, esse é o único. Então, Geko é muito inteligente em relação a isso e à maneira como ele fez o design, porque na verdade discutimos isso antes e eu também terei que animar os números Então, basicamente, ele criou tudo em 11, um, dois, dois, dois, três, três, três, quatro, 44. Agora, existem duas maneiras recriar a animação numérica: basicamente, você pode copiar tudo isso e colocá-lo em um quadro e depois colocá-lo no After Em seguida, basta convertê-las em camadas de forma e, em seguida, deslocá-las desta forma. Uma solução. Outra solução também é bem simples, não muito complicada. Então, deixe-me ir em frente e mostrar isso a você também. Primeiro de tudo, vamos dar uma olhada nisso e depois mostrarei a solução. O número está aqui. Depois disso, temos os 10561.794 . Você pode ver que tudo está acima para corresponder aos números necessários Bem simples. Ok. Nada muito complicado. E há outra forma meio simples de fazer isso, que é, vamos fechar isso E deixe-me mostrar também como criar a animação de subida de números. Ok. Vamos continuar, clique na camada de texto em 5.785 Ok. Agora, o que vamos fazer é basicamente entrar em frente e usar nosso painel de efeitos. Ok. E então vamos apenas torná-lo maior. Vamos seguir em frente e procurar o controle deslizante. Está bem? Agora vou adicionar esse controle deslizante aqui Agora você pode estar pensando como vamos fazer isso funcionar? Muito simples, não se preocupe, nós entenderemos. E o que eu vou fazer é basicamente colocar isso no meu controle deslizante. Bem simples. E então o que você precisa fazer é basicamente adicionar uma rodada matemática de pontos. É isso mesmo. Ok. E se houver um erro, o que você pode fazer basicamente é capturar essa parte porque eu não trabalho com muitas expressões, então posso errar Você pode ir em frente na web e simplesmente copiar e colar isso e pedir para corrigir essa expressão. Está bem? Ok, então você precisa adicionar um valor de ponto. Agora, diz: Se o piloto controla o valor do ponto, vamos apenas copiá-lo Vamos ver se isso funciona. Isso funciona. Solução muito fácil. Ok. Vamos apenas arrastá-lo. Uau. Isso funciona. Isso funciona muito bem. Agora, digamos que nosso número era “Eu não me lembro exatamente”, então vamos dar uma olhada aqui: 5785 Ok. Vamos fazer com que seja zero. Clique no quadro-chave, pressione U e vamos considerar que minha animação precisa ter 1 segundo, cinco, sete, 85. Muito simples. Ok. Bem simples. Vamos apenas tocar em nosso teclado. Agora eu vou ter que ir em frente. Agora, vamos clicar com o botão direito do mouse aqui, criar formas a partir do texto. Vá em frente, um quadro-chave, faça a mesma coisa. Avance um quadro-chave, faça a mesma coisa e faça isso até terminarmos com todos os quadros-chave Ok, então eles são criados. Agora vou desligar minha camada dessa forma , porque você deve manter essa camada na composição até que o projeto não seja concluído, pois o cliente pode solicitar que o número seja alterado, então você pode seguir em frente e fazer isso. E agora vou apenas cortar as camadas. E agora vamos clicar Effect pressionando E. Temos que excluir esses controles de slide. Ok. E acho que também existe uma maneira mais rápida de fazer isso. Então, deixe-me tentar isso. Vamos ver se funciona. Não tenho certeza de como isso deve ser feito. Então me perdoe. Não, funciona. Então, sim, funciona, e então o que você pode fazer é basicamente compensar os quadros-chave, assim como trabalhamos em nossa guia anterior Vamos voltar ao padrão e depois sequenciar as camadas dessa forma. Está bem? Então, vamos dar uma prévia da nossa animação. Então, parece muito bom. E agora, como temos apenas nove ou dez camadas de camadas de forma, isso não vai demorar Isso não aumentará o tamanho do arquivo. Funciona muito bem. Eu fiz isso várias vezes. Então, isso é algo que eu também tive que ensinar. E é basicamente isso. Além disso, há apenas algumas animações simples que eu também posso mostrar a vocês Na verdade, não está acontecendo muita coisa. Apenas algumas máscaras foram adicionadas à mesma imagem e, em seguida, as bandeiras estão basicamente flutuando. Coisas simples. Vamos dar uma olhada em nossa próxima seção. Ok, então a mesma animação numérica. Na verdade, usei o mesmo cartão da outra animação anterior, sua animação, e depois o adicionei aqui. Você pode ver que a animação disso foi adicionada aqui, e eu acabei de extrair apenas uma parte dela aqui. Depois, há apenas essa linha do caminho dos sonhos, alguma animação básica de escalonamento ou recorte nas linhas , e é basicamente isso Não está acontecendo nada muito complicado. Bem simples. Depois disso, temos essa outra animação. Que é essa. Ok, vamos resolver o problema aqui, então vocês também sabem disso agora. Depois disso, tivemos esse problema na camada de texto. Você pode ver que eu aumentei o tamanho da caixa porque era assim, um pouco assim. Então, eu apenas o aumentei muito para resolver o problema. Ok. Coisas simples, nada muito complicado. A animação também é bem simples. Isso foi feito personagem por personagem porque não havia muitos outros elementos. Então, acabei de criar o texto Shaplayer e depois desloquei tudo, um quadro-chave por É isso mesmo. Coisas simples. Nada muito complicado. E depois, basta uma simples animação em escala neste botão. Ok. Depois disso, temos a seção seis, que é essa animação de carteira. Feito de forma bem simples, apenas um toque em cima. Você pode ver que está basicamente mascarado, certo? Basicamente, a carteira tinha, na verdade, uma única forma. Então, acabei de excluir a parte superior e a recriei com um traço Então, às vezes, talvez você também precise fazer algumas pequenas iterações no design Quando você está executando uma animação. Então, há apenas uma animação simples, certo? Nada muito complicado novamente. E então eu adiciono animação de rotação e animação de escala aqui Coisas bem simples, nada muito complicado. E então temos esse efeito muito bom com o efeito H, basicamente. Então, quando isso acontece, o que realmente está acontecendo é que esse quadro realmente se anima Ok, vamos dar uma olhada. Você pode ver que a opacidade está basicamente aumentando. Então, nada muito complicado por aqui também. Coisas simples. Muito fácil de fazer. O cursor está basicamente se animando sozinho, então de forma independente, independentemente dos outros elementos, certo? Coisas bem simples, e é basicamente isso. E caso você esteja curioso para saber a aparência do site final, deixe-me mostrar isso também agora. E você verá como as loterias estão otimizadas em apenas um minuto. Vê? Agora estou abrindo isso no modo de navegação anônima, para que você possa ver a rapidez com que tudo foi carregado As animações estão funcionando muito bem, muito bem, Coisas muito simples, muito bem feitas. Veja como tudo isso parece lindo, certo? Coisas simples. E, novamente, um grande elogio a Jakafz por criar esse E foi uma colaboração muito boa. E a animação percentual nessa seção real também é feita da mesma maneira. mesma coisa. E sim, é basicamente isso. Então é isso para esta classe. Nos vemos na próxima. 6. Conclusão: Parabéns por concluir esta aula final. Espero que você tenha aprendido tudo o que eu ensinei aqui. Por favor, pratique e me avise se precisar de alguma ajuda. Você sempre pode entrar em contato comigo no Instagram. Você também pode conferir meu LinkedIn se precisar de alguma dúvida, se tiver alguma confusão, se precisar de ajuda com o projeto, entre em contato Eu adoraria ajudar vocês. Certifique-se de enviar alguns trabalhos. E também me marque quando você criar algo muito bom. Eu também adoraria revisar seu trabalho. Se há algo novo para ensinar em Lottie, eu adoraria criar outra turma Se houver algo que eu perdi nas aulas, por favor me avise e talvez eu crie outra. Mas acredito que isso abrange tudo, e agora você está pronto para se tornar o principal criador individual. Boa sorte para todos vocês e boa sorte. Espero que eu também ensine outras coisas novas, então fique atento Mas Lottie agora está completa, e eu te desejo tudo de bom Nos vemos na próxima. Cuide-se. Tchau tchau.