Guia avançado para criar animações de UI | Lottiefiles.

1. Introdução: Oi, pessoal. Sou Bold Bt e bem-vindo ao Guia Avançado de UI para criar animações de UI Espero que você aprenda muitas coisas novas neste curso. E neste curso, vamos basicamente analisar vários novos aspectos. Este é o curso de arquivos Advanced Lotti e começa exatamente onde o curso intermediário termina Lá dentro, você trabalhará com plug-ins complexos, aprenderá a solucionar erros de exportação e renderização que, na verdade, quebram arquivos de produção e animam as máscaras de forma clara em todas as cenas. E um pouco da minha experiência é que eu criei vários projetos da Lotti Animations e, além disso, criei mais de 100 animações que estão ao vivo no meu perfil do Latifis e que estão ao vivo no meu perfil do Latifis Também sou criador certificado de vencedores de animações do Latifitore, além de especialista em Webflow, efeitos posteriores de quadros, efeitos posteriores de quadros, Figma Então, estou ansioso para criar algo incrível juntos, e vou mostrar a vocês um trabalho realmente excelente que também fiz para clientes. Esta aula é para animadores que já conhecem fundamentos dos arquivos Lotti ou concluíram o curso intermediário e que desejam trabalhar em nível de produção pronto para o cliente Então, boa sorte para todos vocês, e vamos começar. 2. 01.Complex Plugins: Ei, bem-vindo de volta. Ok, então bem-vindo à primeira aula deste curso. Ok, então nesta aula, veremos quais são os plug-ins que vamos usar neste curso. E, assim como o curso anterior, eles servem apenas para ajudar você a economizar tempo. Você pode concluir o curso inteiro sem comprar nenhum desses. Ok, então vamos mergulhar agora. Ok, então o primeiro plug-in que vamos usar é o GifGun two Um será AEUX. Ok. Você precisa clicar neste link do GitHub, clicar nele ou simplesmente clicar neste e baixar um Ok. E, desde o início, você pode simplesmente assistir a este vídeo e aprender o que ele faz. Ok, mas aprenderemos isso na aula futura. Então, vamos pular isso. Hum, você pode simplesmente ir em frente e baixá-lo. Ok. E depois disso, o processo para instalar isso está aqui, ok? Este plugin é para dois softwares, basicamente, ok. E um deles é um esboço e o outro é o After Effects E o terceiro é Figma. Ok. E faremos uma ligação entre Figma e o After Effects. Por que estamos fazendo isso? Existem alguns problemas que você pode enfrentar ao trabalhar no Illustrator ou talvez não possa pagar pelo Illustrator, digamos que, se você só tem acesso ao After Effects, pode simplesmente usar o Figma Ok, e esse plugin também é gratuito. Você deve usar isso para acelerar seu fluxo de trabalho e evitar alguns erros que discutiremos. Ok, continuando, e antes de continuar, assista a este tutorial e lembre-se de instalar este plug-in no After Effects e no FiCMA , assista a este tutorial e lembre-se de instalar este plug-in no After para que instalar este plug-in no Effects e no FiCMA funcione perfeitamente, pois ele criará uma ponte entre dois softwares e, em pois ele criará uma ponte entre dois softwares e, seguida, poderemos importar arquivos Ok, seguindo em frente, depois instalar isso usando esse método, você pode simplesmente ir em frente e comprar este também. Isso vai ser uma cópia fácil, e isso vai te ajudar muito, também. Esse é muito barato e economizará muito tempo, além de não ser bom apenas para muitas animações Isso o ajudará em todo e qualquer projeto do After Effects. Eu te garanto isso. Ok. E outro plug-in que usaremos será um plugin dentro do Figma, que é get waves Se você quiser conferir isso, basta digitar wave na seção plug in e você obterá as ondas. Ok. E você pode simplesmente usar isso para criar animações de ondas E como podemos entrar em detalhes sobre isso? entraremos em detalhes sobre isso em breve na próxima aula. Ok, então vamos usar esse plugin. Então, vá em frente e baixe esses plug-ins em seu PC e estaremos prontos para começar. Muito obrigado 3. 02. Como solucionar erros: Ok, então estamos de volta. E vamos entrar nos efeitos posteriores e começar a trabalhar. OK. Então, nesta aula, o que discutiremos são os problemas fundamentais, que eram a sobrecarga de Está bem? E era um plug-in pago, como você deve saber. Então, custou 55 dólares, certo. E às vezes isso pode causar alguns problemas. Vamos seguir em frente e mostrar que tipo de problemas isso pode causar. Ok, então estamos dentro do After Effects. Agora, vamos conferir nosso design. OK. E vamos abri-lo dentro do Illustrator OK. Então este é um arquivo SVG que me foi fornecido pelo cliente, ok? E eles precisavam dessa animação. Agora, vamos selecionar isso e levar isso para o After Effects, mas vamos verificar o tamanho 1920 por 1920. Vamos fazer uma nova composição e torná-la 1920. Está bem? E vamos colocar essas camadas no After Effects. OK. Então, se você perceber que há um pequeno problema, ok? Como você pode ver, o gradiente da camada não corresponde ao gradiente aqui, certo? O gradiente está abaixo aqui, e esse gradiente também não está certo Este tem o cabelo verde, mas na verdade ele tem isso aqui. Portanto, o famoso uTuber Austin Bowens, do Ray V Studio na verdade, corrige esse problema bastando editar o gradiente dentro do After Effects, e isso resolverá Obviamente, podemos fazer isso. se fosse o logotipo de um cliente, certo, e você deveria oferecer uma animação perfeita do logotipo dele? E se você editar o gradiente uma forma errada e se você criar apenas uma versão um pouco ruim do logotipo deles apenas bagunçando o gradiente Então isso não é realmente aconselhável, certo? Portanto, não devemos mexer com os temas de cores e gradientes dos clientes, Então, nesse caso, o que devemos fazer é encontrar uma maneira animá-los exatamente como são Outra maneira que pode vir à sua cabeça é que talvez possamos usar o arquivo do ilustrador em vez disso Vamos seguir em frente e clicar em salvar como. Vamos voltar aqui e copiar esse caminho e colá-lo aqui, e chamaremos isso de, converteremos isso em um arquivo de ilustrador de IA e vamos clicar em salvar OK. Vamos apenas bater. OK. E agora vamos tentar trazer essa animação de volta para o arquivo. Só me dê um minuto. Acho que não está salvo no local certo. Sim, houve um erro. Ok, vamos fazer com que seja logotipo, anel. OK. Ok, então o arquivo está salvo. Agora vamos fechar isso e minimizar isso também. Vamos usar isso em vez disso. Vamos seguir em frente com o After Effects e tentar usar isso. Se usarmos sistema de camadas ou camada de gravação, isso não importa, na verdade, porque quando a arrastamos aqui, como você pode ver, precisamos que ela seja convertida em camada de forma para que funcione Hum, para que funcione no arquivo Lottie. Mas sempre que você converter as camadas, isso ficará cinza porque os gradientes não podem ser convertidos usando as camadas do Adobe After Effects e convertendo-as em camadas de efeito A After Isso não criará o gradiente. Ela aplica somente a cor do campo. É isso mesmo. As cores de campo plano só se aplicam. Ele não aplica o gradiente. Então, o que fazemos agora? Bem, há uma solução, felizmente, e vamos descobrir isso Ok, vamos abrir o Figma, ok? E o que vamos fazer agora é arrastar esse SVG aqui E se seu design ainda não estiver em SVG, o que você pode fazer é simplesmente abrir arquivo AI fornecido pelo seu cliente e salvá-lo, salvá-lo como e apenas convertê-lo em um SVG e ficar seguro É isso mesmo. E eu apenas mantenho versão 1.1 e funciona perfeitamente. Mas se em alguns casos isso não funcionar perfeitamente , obviamente você pode ajustar essas configurações e tentar descobrir isso também. OK. Então, agora temos o SVG. Então, vamos dar uma olhada no Figma, certo? Está aqui. E como você pode ver, os gradientes são exatamente os mesmos que deveriam ser, certo Então, vou reduzi-lo um pouco. Depois disso, vou clicar com o botão direito do mouse e entrar nos plug-ins, entrar na seção de desenvolvimento e clicar em plug-ins seção de desenvolvimento e clicar em AEUXPlugin , E isso vai aparecer. OK. E então eu vou selecionar essas camadas. É importante que as camadas estejam dentro de uma moldura. Se não houver moldura, crie uma e clique neste botão. Ok, diz três camadas e duas. Ok, então vamos agora para o AE. OK. Então, como você pode ver, agora os gradientes estão perfeitos e algumas coisas devem ser lembradas, que são muito importantes porque podem mexer com sua mente que são muito importantes porque podem mexer com sua Também haverá algumas camadas extras importadas quando você importar qualquer ativo do FIGMA Agora, por que isso acontece? Na verdade, eu não sei, mas eu realmente sei que essas são camadas guia, então você só precisa selecioná-las e excluí-las, e isso não causará nenhum dano ao seu arquivo. OK. E depois há essa camada vazia também. Você também pode excluir esse. Então, existem apenas duas camadas agora, ok? E agora nosso gradiente é perfeito. Agora, isso é realmente incrível. E agora, é realmente incrível que esse plugin gratuito funcione melhor do que um plugin pago que custa $55 Mas, obviamente, há vantagens em usar a sobrecarga porque ela oferece muito mais, na verdade, e você pode trabalhar outro no After Effects e no Illustrator Além disso, é muito mais importante saber que o Lister é um software de design, não um software de design de interface de usuário, na verdade Portanto, ele oferece muito mais ferramentas, e você pode projetar com muito mais liberdade dentro do Lister, Mas, no final das contas, se você não puder pagar isso, poderá simplesmente converter seus ativos em SVG e depois colocá-los Pigma e depois convertê-los em Ailiers como Ok, então você deve ter isso em mente que haverá alguns reflexos. Outra coisa que é muito importante que você deve ter em mente é o tamanho da moldura realmente se tornará o tamanho da câmera. Além disso, quando um cliente envia um design para você, e se há muitos quadros dentro de um design, o que realmente o After Effects fará é converter cada quadro em uma pré-composição Como você disse, havia mais molduras, certo. Havia outra moldura aqui. Vamos tentar isso, talvez funcione ou talvez não. Então, deixe-me ir em frente e tentar isso. Acabei de clicar na seleção Santo. Então, como você pode ver, ele criou esse quadro e, em seguida, existe esse quadro. E então, como você pode ver, eu criei outra moldura, certo? Também existe essa moldura. Está bem? Então, as camadas estão dentro disso. Portanto, o número de molduras que estão no design será a criação de molduras, molduras e molduras dentro do After Effect. Agora, pode ficar muito confuso quando você está trabalhando em um design de interface de usuário do AP talvez porque haverá muitos quadros, certo Então, o que você vai fazer nessas situações é selecionar as molduras e, em seguida, reagir aos itens a partir dessas molduras, ok? E então você pode simplesmente excluir as camadas. E se o designer realmente usou o autolayout, certo? Então, quando você remove os elementos da moldura, eles se movem aqui e ali. Então você tem que simplesmente desligar o layout automático, na verdade. Ou outra coisa que você pode fazer é simplesmente levar todos esses ativos. Ok, para o After Effects, digamos, vamos escrever mais uma vez. Vamos selecioná-lo e fazer isso mais uma vez. Está bem? As camadas são enviadas agora. OK. Agora o que você pode fazer é abrir o compartimento, ok Ok, então as camadas não estão dentro da moldura, como você pode ver. Então, eles não foram exportados. Vamos fazer isso mais uma vez. Vamos excluir tudo isso primeiro. OK. E vamos começar do zero. Vamos clicar aqui. Ok, quatro camadas são enviadas aqui, ok. Há uma composição de molduras, e depois dentro há uma composição de molduras, e depois há camadas internas, certo Então, o que você pode fazer é simplesmente excluir as camadas de guia, e então você pode usar essa composição, na verdade, Controle C, e então fechar todas elas e depois criar uma nova composição e depois colá-la lá Está bem? E funcionará perfeitamente. Você pode usar esse método para evitar os quadros e camadas extras e o ATC OK. Então, na verdade, temos a compreensão desse plug-in Então, o que ele realmente faz, certo? Então, vamos passar para o próximo plug-in, que é esse, o Easy Copy, certo? E o que esse plugin faz é isso, vamos em frente e eu vou abrir a animação agora. Ok, bem, basta clicar em Não salvar. Ok, então o que vamos fazer agora é mostrar a vocês vários exemplos de projetos, na verdade. OK. Então, vamos dar uma olhada neles. Ok, então essas são algumas animações que eu fiz para o nosso cliente OK. E como você pode ver, existem várias animações, certo? E nós animamos as partes aqui dentro, na verdade. Ok, como você pode ver, os dentes não estão com boa aparência e depois estão sendo consertados. Se soltarmos a camada, você poderá vê-la melhor. Vamos ver sozinho, certo? E então a capa fica em cima deles e o efeito se completa, na verdade Como se essa sobreposição da mandíbula estivesse cobrindo e consertando isso. OK. E vamos seguir em frente, como você pode ver. Ok, então vamos supor que eu enviei uma animação para o cliente, e ele adorou tudo sobre ela, certo? E o cliente quer que eu use exatamente a mesma atenuação, o mesmo tipo de sensação em todos esses ícones, certo? Então, o que vou fazer sobre a coisa certa. Temos que ter algo em mente sobre isso, que combinamos com a flexibilização, certo? Então, o que podemos fazer é dizer que esse foi o ícone que eu fiz para o cliente. Hum, tudo bem? Esse foi o ícone que eu fiz para o cliente. E esse momento é perfeito. Ele diz que adora, certo? Então, eu quero igualar a flexibilização. Vamos supor que essa seja uma atenuação personalizada como essa. OK. Eu quero animar todos os outros e copiar a flexibilização disso Está bem? Não os valores da posição, mas apenas a flexibilização. Então, como fazemos isso? Não podemos fazer isso com os recursos nativos do After Effects. Então, usamos plugins para coisas assim. Então, o que vamos fazer agora é clicar no botão copiar e, na verdade, há duas opções no painel de colar. Ok, o que vamos fazer é acertar essa e depois seguir essa camada. Então, como você pode ver, eu já usei isso, acho que vou selecionar esses dois e vou clicar em Es. Está bem? Então, esse projeto dura, na verdade, três anos. Eu fiz esse projeto há três anos, então talvez eu não estivesse usando plugins ruins naquela época. Então, sim, agora é muito bom conferir meu trabalho e ver quanta melhoria eu fiz. E, como você pode ver, agora isso ficará melhor e consistente em todos os ícones do site deles, certo? Portanto, o cliente provavelmente ficará mais feliz. Ok, então podemos ajustar essa flexibilização também, certo? E apenas reproduza este. C, certo? Portanto, esses plug-ins são realmente úteis nesses termos. E a outra coisa que você pode fazer é também valorizar as cópias. Digamos que queríamos outra camada por trás dela. Vamos apenas duplicar este. OK. E não havia quadros-chave neste E essa era outra camada, e tinha alguns problemas nela, digamos, ok? Então, tinha uma cavidade dentro dela. Ok, vamos reduzir a escala também, talvez fazer isso por aqui. OK. E basta ajustar o caminho também porque é uma cavidade. Então, vamos arruinar o caminho. OK. Foi minha culpa. Eu só conserto isso agora. Ok, certo? Portanto, existem duas maneiras: na verdade, podemos criar a camada tão bem quanto aprendemos no curso anterior. Mas digamos que, por algum motivo, ou talvez eu queira adicionar algum deslocamento na animação É por isso que eu também não quero que a camada seja criada pelos pais. Então, o que estou pensando é que talvez devesse haver alguma compensação, certo Então você pode simplesmente selecionar essa camada. Copiar. Na verdade, ele copiou a atenuação e o valor, mas colará o que mandarmos colar Está bem? Então, o que vou fazer agora é pressionar P no meu teclado , pressionar o quadro-chave e clicar no valor Está bem? Agora, diz que, se você estiver copiando e colando vários ess, deverá selecionar o mesmo número de números ou vários números de quadros a serem copiados OK. Então, vou criar dois quadros-chave. OK. E vamos selecionar este, clicar em Copiar, selecionar esses, e eu vou clicar em valor. Veja, eu copiei o valor agora, ok? O envelhecimento não foi copiado. Agora vou apertar Es também. Então, agora o envelhecimento também foi aplicado. OK. Então, agora eu quero adicionar alguns, digamos, offset Então, vamos fazer isso agora. OK. Ok, então está funcionando perfeitamente, certo? Portanto, esse é o principal uso do plugin. E agora isso é realmente uma suposição de uso muito simples. Mas, como você sabe, no curso anterior, fizemos toda uma cena de animação de personagens da maneira certa. Nas situações em que há mais de 150 camadas que animamos, podemos apenas animar uma camada e aperfeiçoar sua atenuação e depois copiar essa atenuação e colocá-la em qualquer outro lugar, certo? Simplesmente não precisamos percorrer todas as 150 extremidades da camada , selecioná-las e depois aliviá-las manualmente. Então, talvez algumas camadas sejam desmarcadas ou desmarcadas enquanto fazemos o processo Então, o que podemos fazer é aplicar a atenuação em uma camada e depois copiá-la, selecionar todas elas e clicar em Ease Portanto, esse é o principal uso desse plugin. OK. Agora, o que vamos fazer é ver outro exemplo de animação e usar outro plugin. Então, vamos fazer isso agora. Vamos fechar esse projeto e eu vou criar uma nova composição. OK. E então eu vou fazer com que seja 1080 por 1080 Ok, é só dar um nome para bebe. E agora vou seguir em frente e criar uma elipse. Isso vai fazer dele um círculo agora. OK. Eu só vou fazer com que seja uma cor azul. Eu gosto desse, certo? Um, mais parecido com um roxo. OK. Conseguimos, e agora vou fazer com que o traço seja zero. E eu vou em frente. Agora, digamos que havia uma flecha dentro disso, ok. E eu queria que isso fosse animado. Certo? criar uma flecha bem rápido. OK. Eu vou seguir em frente e fazer isso. OK. Agora, o que eu vou fazer é seguir o caminho, e depois vou dar volta, na verdade, desse jeito. OK. Então eu vou apenas duplicar este Vou apenas girar isso 190 graus. OK. Então eu vou abrir o caminho desta. Eu só vou bater em G. Vamos colocá-lo no centro. Em primeiro lugar, isso funcionará melhor. Ok, assim. Eu vou para a banheira, ele vai bater em C e meu teclado, vai atingir o ponto de ancoragem aqui OK. Então, nosso botão agora está criado. OK. Então, agora o que vou fazer é querer essa animação ondulatória. Quero que o botão enfatize que, na verdade, estão acontecendo muitos carregamentos ou downloads. Então, uma animação de onda deve estar dentro disso, ok? Então, antes de fazer isso, isso não vai fazer nenhum contraste, certo? Então, eu quero que haja um toque no botão, na verdade, também. Então, faça com que seja 20. E vamos torná-la também uma cor mais clara. Assim. OK. E então eu vou seguir em frente e tornar este mais longo assim, certo? E então temos que criar a animação interna, certo? Tipo, queremos que esse círculo seja animado. Ok, vamos simplesmente desligar nossa sensação na camada acima. O que você pode fazer é clicar nesse botão aqui e ele simplesmente desaparecerá Vou apenas alternar entre as opções, e agora estamos vazios OK. Agora estamos vazios no campo. OK. Então, agora eu vou desligá-lo, desligá-lo, certo? E como você pode ver, ele só tem um traço, então vou bloqueá-lo e bloquear esses também. Agora temos que criar uma animação de onda. Agora, o que podemos fazer é não usar efeito de distorção de onda, na verdade porque dentro de Late não funciona, certo? Portanto, teremos que usar outra coisa porque não podemos usar esse método. Há outra técnica avançada que eu gostaria de destacar, podemos usar, mas não é aconselhável, na verdade. O que podemos fazer é, na verdade, fazer disso um precom antes de tudo, para que eu possa explicar para você Vamos apenas controlar Z desta vez. Não. Ok, vamos seguir em frente e pré-preparar este Círculo de ondas, vamos chamá-lo. Ok, e vai continuar e fazer com que seja rastreado automaticamente. Vamos entrar em camadas. Vou clicar em Rastreamento automático. Ok, vou torná-lo Alpha, e você também pode ajustar as configurações, isso é só para dizer o que ele pode fazer. Ok, eu só vou fazer isso 1 segundo antes de começar. Portanto, meu software não precisa passar pela miséria de animar e corrigir esse Eu só vou fazer com que se aplique, ok? Agora, como você pode ver, existem vários pontos no caminho, certo, e ele é animado. Agora, o que eu posso fazer é ir em frente e criar um retângulo, na verdade, e eu vou dar a sensação de que ele vai perder o traço E eu vou copiar a máscara daqui. Ok, e eu vou colar aqui. Eu só vou usar a máscara. Vamos desligar isso e vou fazer com que acrescente, certo? É e eu vamos entrar no retângulo, na verdade, no caminho do retângulo, e ele vai arrastá-lo OK. Então, agora vamos jogar e ver. Vê? A animação é compatível com Lottie agora porque Lottie suporta máscaras, mas, mas, mas, mas, mas há um problema Vamos apenas atualizar essa lista. Está bem? Não está picando por algum motivo Ok, então ok, eu vou seguir em frente e salvar o caminho, na verdade. Vamos chamar isso de animação. Talvez isso faça o arquivo funcionar. OK. Bem, na verdade, essa também é uma dica profissional de que, se seu arquivo não for salvo, isso também acontece, às vezes, que o plugin pudimn não funciona Ok, então você precisa se certificar de que seu arquivo foi salvo. Além disso, às vezes também atrapalha os arquivos de renderização Portanto, é melhor salvar o arquivo, na verdade. OK. Então, agora vou seguir em frente, selecioná-lo e, em seguida, vou até aqui. Em seguida, vou simplesmente copiar o caminho e colá-lo aqui. E vou chamá-lo de teste V. Vou apenas clicar em renderizar. Ok, então ele é renderizado e agora vou verificar o arquivo Path Como você pode ver, na verdade são 2,2 KB no momento, certo? E vamos entrar na nossa camada de After Effects e vamos pré-visualizá-la. OK. Ok, então houve um erro, na verdade. Na verdade, eu renderizei o errado. Volte e renderize a composição certa. Eu apenas faço com que façamos testes. Vou simplesmente substituí-lo. Ok, então está feito. Vamos verificar o tamanho do arquivo agora. São 82 KB, certo? Ok, agora vou voltar aos nossos After Effects e vamos pré-visualizar a animação aqui. OK. OK. Como você pode ver, a animação é perfeita, certo? E o tamanho do arquivo é 82 KB no momento. E tem apenas 1 segundo de duração, na verdade. Na verdade, testei esse método com várias camadas e vários projetos, mas não é ideal porque pode funcionar em uma situação ideal como essa, em que você precisa animar a animação por apenas 1 segundo Agora, obviamente, você pode criar clones desses, mas o quadro-chave individual na verdade cria mais dados Então, eu realmente não recomendo esse método, na verdade. Mas, obviamente, se não houver outra escolha, você pode definitivamente experimentá-la se seu cliente não estiver satisfeito com o método que vamos tentar agora. Então, vamos seguir em frente e fazer o outro método, na verdade, ok? Então, vou continuar e duplicar este novamente. Eu só vou desbloquear o superior. Vou simplesmente fazer com que o golpe zero e fazer com que seja um fracasso. E eu vou apenas selecioná-lo. Vou apenas selecioná-lo e copiar a cor. Vamos também salvar o arquivo durante o trabalho. E vamos simplesmente deletar esse arquivo. OK. E agora vou abrir o plugue, na verdade, e acessar os plug-ins getaways Agora, vou criar uma nova onda. OK. Você pode adicionar variação à onda. Você pode fazer isso assim. A propósito, você também pode criar edifícios como esse. E você também pode fazer picos como esses. Você também pode usar esse botão aleatório para randomizar o padrão, mas vou me limitar à onda Além disso, este realmente controla os comprimentos de onda no design, e esse botão realmente diz onde ele desenhará a onda na parte superior ou na parte inferior da esses plug-ins são muito úteis na criação de WV imions Mesmo dentro da prototipagem, isso realmente ajudará você a fazer prototipagem Acho que esse é muito bom. Também posso usar o randomizador, mas acho que esse parece bom Eu também vou mudar a cor agora. Então isso parece perfeito para mim. Agora, o que eu posso fazer é selecionar essa camada. Vou entrar no desenvolvimento do plug-in. Pressione AEX e coloque essa camada no After Effects. Agora, diz que a camada deve estar dentro de uma moldura. Agora, como essa camada está fora da moldura, vamos soltar a moldura e arrastá-la para dentro da moldura Agora, clique nele e vamos levá-lo para o. Ok, como você pode ver, edte a moldura também. Então, vamos deixar a moldura, copiar isso, voltar para nossa contagem principal, e aqui está. Agora, cabe a você decidir como trabalhar com isso. É totalmente sua escolha de liberdade criativa. Agora, eu só estou fazendo essa onda ficar pequena, na verdade, ok? E eu vou animar isso agora. Ok, então vamos seguir em frente e animar isso. Em primeiro lugar, o que vou fazer é selecionar o caminho is. Vou apenas fazer com que ele se converta para o caminho de Bezier. Ok, vou clicar em Path, criar um quadro-chave e ele selecionará meu caminho WV agora e pressionará Pentool e selecionará essa ferramenta aqui, que cria uma máscara nas camadas da Selecione-o, adicione um ponto, controle V para colá-lo. E agora vou selecioná-lo e trazê-lo aqui. OK. Agora vou editá-lo até que ele atenda perfeitamente às minhas necessidades. Ok, agora vou fazer isso basta clicar em Adicionar uma máscara. Ok, vou desligar essa camada. Agora vamos animar isso. E como vamos animar isso? Agora? Bem, existem maneiras diferentes, mas vamos tentar esta. Vou apenas dar ao quadro a posição e vou seguir em frente. 12 quadros. Eu vou trazer a onda para cima desse jeito. OK. Vou voltar ao caminho e tornar essa parte inferior realmente mais longa, porque então ela funcionará melhor. Vamos apenas selecionar isso e arrastá-lo para baixo assim. Ok, perfeito. Agora, o que realmente está acontecendo é que vamos consertá-lo rapidamente, e vai bater em você no meu teclado. Vou criar outro quadro-chave na minha máscara e depois selecioná-lo e arrastá-lo para baixo. Simplesmente. É isso mesmo. Isso é o que eu tenho que fazer. Vamos continuar e reproduzir a animação. Como você pode ver, é bem plano, na verdade, certo? Então eu a coloco de volta para baixo e isso vai fazer minha máscara ficar aqui. OK. E agora vou deixar minha camada abaixo, certo? Então, vou fazer com que se mova dessa maneira. OK. E agora vou arrastar minha máscara assim. OK. OK. Então, vamos tentar isso agora. Veja, obviamente, a animação é muito curta, na verdade. É por isso que não parece bom. Mas vamos tentar isso em um comprimento maior. Oi. Ok, então isso parece melhor, certo? Isso parece melhor. Ok, então não há animação até o momento. Vamos apenas criar um quadro-chave de quadros-chave na posição aqui e fazer com que ele se arraste totalmente para trás assim Ok, então há um erro agora, certo? Na verdade, vamos ter que consertar a máscara. Vamos verificar agora. Ok, então está funcionando, certo. Mas há um pequeno problema, que é que deveria estar, eu acho, por aqui, certo? Portanto, a onda deve estar se movendo muito rápido. Ok, então eu vou arrastar isso até aqui. Só está seco agora. Ok, veja, perfeito. Agora, o que podemos fazer é criar várias camadas disso também e criar outra variação de velocidade. Também podemos ajustar a flexibilização , certo? Podemos resolver isso como quisermos, certo? Isso é para nossa liberdade criativa. A escolha é na verdade, como usamos essa abordagem, e vamos tentar fazer algo com ela. Ok, como você pode ver, há uma pequena variação na onda, certo? Então, na verdade, faz com que pareça líquido . Você vê, certo? Então, tudo se resume a contornar isso e criar animação em ondas se torna muito fácil e simples. Obviamente, você pode usar o efeito de guerra de ondas e também criar animações de ondas usando isso Mas eu realmente não recomendo isso, porque acho que essa abordagem é muito melhor, e você pode editar a camada com mais facilidade, na verdade, porque Hum, digamos que você precisa editar a onda, basta seguir em frente e fazer alguns ajustes no caminho certo. Mas se você estiver usando o waver, precisará fazer o ajuste no efeito, retraçá-lo, rastreá-lo automaticamente novamente e aplicá-lo novamente à forma Então, acho que esse método funciona melhor e também faz com que o tamanho do arquivo seja menor, na verdade. Então, vamos verificar o tamanho do nosso latifle, na verdade. Hum, eu só vou tentar este. A propósito, isso também tem duas camadas agora, então talvez o tamanho do arquivo seja maior, mas vamos verificar agora. Vamos terminar. Então, vamos verificar nosso arquivo exportado para ver seu tamanho Ok, então, como você pode ver, o tamanho do arquivo é de nove KB agora, certo? Assim, você pode ver a grande diferença entre os arquivos. É realmente enorme. É muito grande, certo? Então, como você pode ver, o tamanho do arquivo será muito, muito pequeno se usarmos essa abordagem. Ele está aumentando o tamanho do arquivo em dez vezes. Eram cerca de 90 quando estávamos usando o Wave Work, e agora são apenas nove. Então essa é uma grande diferença, certo? Então, esses são os principais motivos pelos quais esses plug-ins ajudarão você a melhorar as animações criativas , tornar sua animação mais otimizada e destacá-lo da multidão Ok, então é isso para esta aula. Te vejo na próxima. 4. Lottie as Service: Olá a todos, e bem-vindos de volta. Antes de continuarmos com a próxima lição, há algo que eu queria destacar, na verdade, que foi deixado de fora na aula anterior, que é esse último plug-in, que também é o GifGun Então, isso é basicamente apenas para ajudá-lo a criar animações rápidas de GIF ou presentes para que você possa enviá-las ao cliente, na Não há realmente grandes vantagens nesse plug-in, exceto que se você estiver criando animações de presentes, especialmente para clientes, isso economizará muito tempo e também criará tamanhos de arquivo muito otimizados E há muito poucas configurações no plugin, na verdade, e você também pode acessá-las. Ele também pode fazer com que você use gradientes em suas animações, então não criará um presente tão incrível devido à limitação de 256 cores oferecidas pelo formato de presente Ok, então, por favor , tenha isso em mente, e há algumas configurações que você pode ajustar aqui. Então, sim, uma vez que você seleciona a composição e aperta o botão de presente M, o que ela faz é renderizar toda a animação, depois renderizá-la, e então você pode simplesmente clicar duas vezes nela e pré-visualizá-la Vê? Certo? É perfeito. Ok, então esse é o único uso disso, e é 188 Kws Ok, então vou apenas simular isso, e agora vamos passar para a próxima aula, que é um projeto de cliente, na verdade, o que eu fiz no passado, mas vale a pena dar uma olhada, na Na verdade, o cliente solicitou que o arquivo final fosse a animação gif É por isso que, ao longo de todo o projeto, você notará que não há camadas ha. Mas, em vez disso, o design está em arquivos de lista ou do Photoshop. Ok. Então, como você pode ver, essa é a competição principal Em vez de Alpha combiná-lo com o telefone, eu também poderia ter usado a técnica de máscara simples, ok? Isso não é realmente um grande problema, na verdade. Então, sim, mas os requisitos do cliente estavam na animação Jif, na verdade, eu realmente não me preocupei em criar uma máscara Ok, então eu vou abrir o compartimento principal. Agora vamos examinar os slides e eu vou dizer que essa animação também poderia ter sido feita em Lotti , possivelmente E foi há muito tempo que fiz esse projeto, na verdade. Mas se eu estivesse fazendo esse projeto hoje, obviamente o tornaria melhor. Além disso, eu sugeriria meu cliente e, provavelmente, apenas o forçaria a tomar a decisão de usar um Lotti em vez de usar uma animação de presente Ok. Então, vamos dar uma olhada nos slides agora. Esse é o primeiro slide. Ok. E aqui estão as camadas do ilustrador. E como você pode ver, os designs são um pouco complicados, digamos, como você pode ver aqui, ok? Existe uma alternativa para isso, assim como discutimos no curso anterior, que também podemos importar as imagens. Certo? Então, definitivamente também poderíamos convertê-los em PNGs e depois exportá-los E então podemos incorporá-los aqui para reduzir o tamanho do arquivo feminino Se houver mais de 100 camadas nesse design, você definitivamente pode fazer isso para criar uma situação mais otimizada pois existem vários designs como esse. Então, talvez seja melhor usar PNGs desses em vez de usar SVGs porque, na verdade , existem muitas camadas Então, talvez o PNG tenha menos tamanho em vez do SVG, na verdade Então, agora vamos dar uma olhada em nossas comunicações. Ok, então eu vou abrir este, e vamos abrir nosso primeiro slide. Ok, então, no movimento do corpo e na conexão, podemos, na verdade, ir frente e reabrir o corpo e se mover para dentro. Ok, então, como você pode ver, havia uma opção no plug-in que não discutimos antes, na verdade, que era essa opção. Na verdade, essa opção é muito útil nesses casos, porque digamos que esse design realmente tornou todo o café com leite muito pesado devido à complexidade das camadas Então, o que poderíamos fazer é voltar ao nosso arquivo do Illustrator É só ver qual arquivo esse país seleciona, certo? Vamos abrir nosso arquivo de seleção de país. Está bem? Ok, nosso arquivo agora está aberto. E agora, como você pode ver, há muito mais camadas, certo? Então, o que podemos fazer é criar essa camada sozinha, na verdade. Na verdade, é solo no momento. Então, vamos clicar nele e começar todas as camadas ou podemos simplesmente entrar na IU Arquivo, copie este, experimente aqui. não precisamos redimensionar isso Na verdade, não precisamos redimensionar isso porque, se aumentarmos o tamanho do arquivo, isso também aumentará o tamanho do arquivo da imagem, que realmente não queremos fazer porque vamos usar um PNG, então isso afetará nossa otimização e tamanho Eu apenas guardo para controlar todos os turnos. Eu só vou fazer disso um PNG. Vou clicar em salvar e agora vou ver o caminho. Agora vou chamá-lo de Cingapura. Ok, Singapura PNG. Ok. Então, agora o que posso fazer é pesquisar Cingapura aqui. Não é exportado para cá. Deve ser um erro. Ok, então Cingapura agora é exportada. Então, vamos prosseguir e arrastá-lo para os efeitos posteriores. Ok, agora o que vamos fazer é arrastá-lo até aqui e combiná-lo. Vou aplicar o efeito de preenchimento, e agora vou ficar bem, então isso parece perfeito. Eu só vou deletar o efeito. E eu vou simplesmente desligar esse. E agora eu vou fazer essa, na verdade. Portanto, considerando que este era um projeto de animação do Latty, ele realmente nos ajudará a reduzir os tamanhos anteriores, na verdade, e também a otimizar os tamanhos dos arquivos em vez de usar um SVG, podemos usar um E então, o que podemos fazer é que, no painel Ativos, podemos escolher a opção incluir inJSN, e ela também incluirá a imagem Eu posso deixar a compressão em 80%. Funciona quase sempre bem. Se houver problemas no tamanho do arquivo ou a animação não parecer muito boa com o design, você pode definitivamente ajustar esses números de compressão e exportá-la novamente. E isso também incluirá a imagem e também aplicará a compressão à imagem. Então, sim, é assim que funciona. Ok. Então, essa é uma forma de otimizar seus arquivos, na verdade. , tudo se resume a encontrar a solução certa para Na verdade, tudo se resume a encontrar a solução certa para o seu problema e tomar a decisão certa, para aumentar a flexibilidade do arquivo e também reduzir o tamanho do arquivo. Portanto, funciona perfeitamente nas situações mais ideais e perfeitas. Ok, então vamos para o próximo slide agora. Tudo bem, então vamos dar uma olhada na animação desta primeira vez. Ok, então todas essas camadas são animadas na verdade, para essa camada nula Está bem? Então, o que ele faz é basicamente que acabou de fazer a imagem, por enquanto, também podemos criar isso e assim. Veja, eu basicamente estou criando um efeito de clique, na verdade, certo? Então é assim que funciona porque esse projeto foi criado há muito tempo, como você pode ver, existem alguns erros aqui. Ok. Então, esse botão é clicado e, em seguida, passamos para o próximo slide, como você pode ver aqui O próximo slide aparece. O que acontece com o slide anterior? Como você pode ver, ele desliza para longe com a posição. Ok. E a próxima tela é associada à anterior, de modo que, quando sai da tela, arrasta a que está atrás dela E o mesmo princípio é aplicado em todas as telas. Como você pode ver, quando uma tela é exibida, ela arrasta a outra para trás Ok. Então, vamos continuar, certo? Esses são apenas dois quadros-chave de posição simples, então não há muito o que explicar sobre isso. Então, vamos abrir este e dar uma olhada nisso. Ok. Então, essas poucas camadas são associadas a esse nulo e estão criando um efeito de clique Como você pode ver, eu apenas rotulo as camadas que eram necessárias para mim e, em seguida, adicionei uma animação em escala, como você pode ver aqui. Ok. E o que acontece depois disso é que há um próximo slide, ok? E então ele rola para baixo. Ok. Então, como você pode ver, a composição é realmente maior por dentro, há muitos dados Então, acabei de aplicar os quadros da posição K com os pais e tudo Agora, como você pode ver, existem alguns erros de design, na verdade, porque, no passado, eu não pensava muito em design e também não me concentrava muito nele. Mas agora, à medida que melhorei, se eu fizesse o projeto novamente, certeza consertaria esses pequenos erros sozinho para melhorar o design. Ok. Então, continuando, o que realmente acontece neste slide é que ele clicado no mesmo botão, da mesma forma que no slide anterior Como você pode ver, tudo isso pode ser Latty, na verdade, certo? O texto pode estar atrasado. Tudo pode estar atrasado em vez de apenas a imagem. Definitivamente, podemos exportar um PNG e importá-lo aqui, e o resto do item pode ser convertido em camadas de forma, na verdade, certo? Ok. Então, continuando, o que realmente acontece é que esse botão clicado, eu acho que sim Esse botão é clicado. Agora, o efeito de preenchimento é aplicado, obviamente, mas definitivamente podemos aplicar os mesmos quadros-chave à propriedade de cor se for uma camada de forma. Então, sim, isso também é compatível muito tarde. E como você pode ver, ele é clicado, com o botão direito, clica nele e depois fica roxo Ok. E então o que acontece é vamos para o próximo slide. Ok, então esse é o próximo slide. Ok, então isso se transforma na camada de onda, na verdade. Então, basicamente, o aplicativo está dizendo que você pode enviar presentes para qualquer pessoa e também anexar um nó de voz de 30 segundos. Então, isso se converte, ok. Vamos dar uma olhada na animação. Como você pode ver, está se achatando, ok? É uma animação muito simples. Não há nada realmente difícil acontecendo. É apenas animação em escala. É isso, certo? Ok. E o microfone interno também é reduzido. Sim, certo? Como você pode ver, quando tocamos nele, ele aumenta e depois diminui. E então essa linha vem, na verdade. Agora, é muito importante notar isso, como você pode ver, há um arquivo de áudio, na verdade, que foi criado para isso Agora, vamos encontrar essa camada, na verdade. Essa é uma camada de visualização. Na verdade, como você pode ver, efeito de espectro de áudio é adicionado a isso. Então, na verdade, ficou animado como o torno anima. Ok. Vamos entrar no arquivo e dar uma olhada. Como você pode ver, a voz está animada aqui, certo? Ok. Então, como fazemos isso tarde? Bem, existe uma maneira simples, e vamos analisar isso. Ok, então existem duas maneiras, na verdade. Vamos examinar os dois. Ok. Vou criar com. Vamos chamá-lo de voz de teste. Ok. Agora, o que vou fazer é seguir em frente e criar uma linha. Ok, assim, certo? Vou fazer com que seja de apenas dez pixels. Agora vou apenas alinhar o centro. Agora podemos fazer duas coisas. Na verdade, podemos adicionar peças de acabamento. Ok. Vamos tentar isso. Vamos fazer 50, fazer os outros 149 Ok, para que haja um pouco de dt. Ok. E agora o que vamos fazer é fazer ela arredonde os cantos. Isso vai ficar melhor, eu acho. Vê? Isso parece melhor. Ok. Então, vou usar o quadro-chave de ambos. Vou ampliar um pouco mais. E vamos tentar animar isso. Vamos fazer isso ir aqui, fazer com que vá aqui, aqui, na outra direção. Dois quadros depois, um vem aqui. O outro vai aqui. Ok. E então você pode simplesmente passar por eles e depois fazer um pouco, e então você pode simplesmente clonar os quadros-chave, como fizemos no curso anterior Ok. A propósito, expliquei esses plug-ins no curso anterior. Portanto, se você precisar entender como usá-los, basta conferir os cursos anteriores. Ok, você pode ver, ok, isso funciona, certo? Ok. E você pode simplesmente usá-lo e vamos tornar o caminho mais longo, na verdade, assim. E então, como você pode ver, você pode simplesmente usar o mesmo método e fazer isso várias vezes. Está bem? E então continue. É isso mesmo. E então você pode recriar tudo isso e também, vamos fazer com que sejam três Portanto, também há pequenas linhas entre eles, se você quiser. Ok. E vamos jogar isso. Certo? Agora, obviamente, você também pode compensar os quadros-chave. Mas vamos tentar isso. Isso vai dar certo. Vamos trazê-lo aqui. E agora vou fazer com que seja aleatório, na verdade. E eu vou dar o passo dez, e vamos clicar na sequência e ver o que descobrimos. Ok, então houve um erro. Isso será um, mas o deslocamento será dez. Ok, erro meu. Ok. Vamos jogar isso. Ok, então vamos jogar isso. Certo? Então, parece que a voz está sendo enviada ou tocada. Ok. Mas outro método que podemos tentar, que é muito mais simples e fácil Agora, isso pode afetar um pouco o tamanho do arquivo, mas é muito mais fácil de editar e você também pode aplicar as revisões do cliente com muita facilidade Ok, eu criei esse caminho. Ok, mesmo método. Vou fazer dez, para que possamos ver claramente. Eu vou fazer tudo isso. Então, novamente, em maiúsculas. Ok. E agora o que vou fazer é não adicionar peças de aro. Em vez disso, vou clicar na minha propriedade de escala e adicionar uma expressão. Está bem? E como a expressão funciona é basicamente complicado de explicar, mas se você estiver familiarizado com as expressões, será fácil de entender. Mas se você é novato em expressões, então eu recomendo que você confira um tutorial básico sobre isso no YouTube, talvez. Ok. Então, vou digitar alguns valores agora. Eu só vejo como isso parece. Ok, então, como você pode ver , parece que funciona, certo. O que podemos fazer é chegar a 80, certo? Ok. E vamos tentar fazer com que o valor do saque 200 e ver o que vai acontecer Ok. Como você pode ver, isso não parece realista. Então, vamos reduzir para 20 novamente e fazer isso de 1800, ver o que isso vai fazer, certo? Parece que a voz está sendo tocada. Ok. E vamos voltar para 50 apenas para ver a diferença. Ok, então o que você pode fazer é criar várias cópias disso, certo. Você também pode ampliá-los ou simplesmente definir o caminho e torná-lo mais longo nas duas pontas, certo? E se você precisar ajustar os comprimentos de onda, basta editar É isso mesmo. Isso é tudo que você precisa fazer. Você só precisa copiar a mesma camada novo e de novo e de novo. E então o que você pode fazer é simplesmente editar a expressão gal. Veja, parece mais realista, certo? Há alguma randomização em cada camada. E para os pequenos nós ou nós na voz, você pode simplesmente selecionar isso e torná-los menores, ou fazer um desses pequenos e depois copiar aquele, certo? E então você pode criar a onda a partir disso dessa forma. Ok. Desculpe, foi minha culpa. Ok, vamos tentar jogar isso. Vou aguentar 2 segundos, e vamos jogar isso. Veja, isso parece mais realista. Obviamente, você pode reduzir ainda mais algumas das camadas, mas você entendeu. Agora, como exportamos essa animação? Ok, isso é muito importante. Agora, o que fazemos agora? Eu só vou, hum, selecionar nosso Vice Comp de teste Vou apenas entrar nas configurações e, como você pode ver, não há opções extras selecionadas. Agora, vamos tentar exportar isso e deixe-me dizer que isso não vai funcionar, ok? Ok, então teste o Voice, Não. Ok, então essa é a animação do pré-visualizador. Como você pode ver, está funcionando, certo, mas ainda há algo a se ter em mente. Antes de enviar o arquivo para o cliente, você precisa verificar o café com leite, na verdade, e ele pode não funcionar talvez no celular ou talvez na web Portanto, antes de enviar isso, basta acessar as configurações, acessar a configuração de Rolar para baixo, entrar nas opções de expressão e selecionar converter expressões em quadro-chave Clique em salvar e, em seguida, você pode voltar aqui. Como você pode ver, o tamanho é de 20 KB. Vamos apenas substituir isso. É hit render. E vamos verificar o tamanho do arquivo novamente. Ok. Como você pode ver, o tamanho da voz agora é 89 KB porque converteu todos os valores em quadros-chave Ok, então sim, isso também funcionará da mesma forma na verdade, no plugue de movimento corporal. Mas se você renderizar a animação com esse método , ela funcionará perfeitamente em todas as plataformas. Ok. Então, vamos voltar aos nossos estudos. Então, sim, você pode adicionar a animação usando isso. E depois disso, o botão é clicado no próximo botão, na verdade, certo? E o que acontece é que a voz toca um pouco aqui e depois passa para a próxima, certo? Ok, então o que está acontecendo aqui é que vamos abrir este. Ok, então isso é apenas uma camada de texto, basicamente uma camada de forma, e estamos usando uma máscara para revelar o nome. E então há uma camada de cada linha que está mascarada. Ok, então é tudo uma camada, eu acho, sim. Há três máscaras na mesma camada. Ok. Então, sim, isso também funcionará perfeitamente no final, mas eu recomendo que você escolha uma linha para uma máscara e depois duplique a mesma camada Não use quatro máscaras na mesma camada porque, se a máscara se interromper, a máscara tardia poderá falhar ou não funcionar perfeitamente Ok. Voltando à competição principal, após a revelação da mensagem, o próximo botão é pressionado novamente e você está na página de checkout e rola para baixo Como você pode ver aqui dentro. Agora, todas as camadas são associadas a uma camada, que é a quinta camada, a última E então, porque não havia necessidade de adicionar objetos, é por isso que ele é animado dessa forma. Está bem? Então, ele rola para baixo. Pressione você como você pode ver, aqui está a animação em escala do botão. Ok. Agora, para quem você enviou, ele passa para a tela de acesso e, em seguida, você pode ver como há uma animação de bate-papo Agora, vimos animações de bate-papo na verdade, no curso anterior Agora, este não está sendo animado muito bem se o compararmos com aqueles. Agora, a razão por trás disso é porque a utilidade da animação de texto e do propósito do bate-papo aqui é muito menor porque apresentamos toda a ideia do aplicativo. Certo? Portanto, a interação entre duas pessoas não é realmente tão importante porque nosso produto não se baseia na interatividade delas Agora, se você está animando bate-papos de bots de bate-papo com IA , a interatividade é o que mais importa Mas, nesse caso, a produtividade, o produto, a empresa, o que a empresa faz é o que mais importa, que já foi mostrado na animação anterior. É por isso que animamos isso de uma forma muito rápida e apressada, certo? Como você pode ver, a notificação chega à pessoa e, em seguida, ela diz: Obrigado. E então, no último slide, quando a pessoa clica na mensagem, na verdade, vamos ver, acho que ela é clicada Não, isso não acontece. Ok. Então, sim, este se abre, e então o que acontece é que os nós de voz são reproduzidos. Isso é muito fácil. Isso é apenas uma camada de forma de onda, e na verdade é uma camada branca por dentro, como você pode ver, então todas as camadas estão separadas, Hum, eu poderia ter usado a fusão, mas acho que não tinha esse plugin antes Caso contrário, eu não precisaria criar uma pré-composição sobre isso. Então, você pode ver que esse tipo de coisa pode economizar uma pré-competição inteira, na verdade, certo? Assim, você pode apenas mascarar uma camada em vez de pré-compilá-la. Eu poderia ter apenas mascarado isso em vez de voltar para essa competição Sim. Então, isso funcionará de forma mais limpa, eu acho, se tivermos que criar ideias ou mudar a cor, na verdade. Você pode simplesmente escrever a camada e alterar a cor em vez de voltar para dentro e alterar a cor. Ok, então isso é reproduzido e então eles recebem meu botão, clicado e a animação termina Então é assim que poderíamos ter conseguido a mesma animação usando animação artística também. É por isso que foi muito importante mostrar como você também pode criar esse tipo de animação importando ou usando as opções de exportação de incluir as imagens dentro de suas animações usando esse recurso e também usando expressões quando necessário para determinadas camadas, como a Voice que tínhamos no slide anterior Ok, então é isso para esta aula na próxima. 5. 04.Estudo de caso do projeto: Bem-vindo de volta ao curso. Ok, então estou abrindo um projeto para clientes e vou tentar mostrar máximo possível de exemplos de como eu entrego projetos de clientes e como eu crio suas animações, porque a parte principal e o foco principal desses cursos é ensinar vocês como criar animações para seus clientes, na verdade, Então, esta é uma animação que eu criei para um cliente, na verdade, alguns meses atrás, ok. E o que eles queriam basicamente era criar um software de IA que ajudasse os alunos a criar sua própria educação na educação de crianças e estudantes. Ok, então, sem mais delongas, basta consultar nosso arquivo. Vamos voltar para nossa composição principal. Então essa é a nossa principal competição. Ok, existem duas comunicações principais. Então, também temos uma composição, particularmente essa, que na verdade é renderizada Não é esse, na verdade. É esse, o de renderização. O cliente realmente solicitou, no final, que toda a animação fosse mostrada dentro de um desktop, na verdade, porque era a versão desktop de sua IA. Então, acabei de pegar esse desktop de um site de ações gratuitas e, em seguida, esses são apenas players de ações. Ok, acabei de usar a sobrecarga e inseri-la aqui usando a sobrecarga Ok. E agora o que está acontecendo, o que está acontecendo aqui é que vamos entrar nisso. Ok, então essa é a animação principal. Vamos entrar na primeira fila. Ok, como você pode ver, existe esse avatar. Em primeiro lugar, não podemos transformar esse avatar em SVG. Então, isso é apenas um avatar de IA, e esta é uma imagem PNG. E eu uso a mesma opção que mostrei na aula anterior ao entrar nela e manter a opção de imagem disponível, certo? Selecionar aquela que inclui as imagens rasterizadas no arquivo JSON e, em seguida, essa imagem é renderizada Ok, então isso é apenas animar de forma muito simples. Ok. Então, isso é basicamente pensar e orientar. Esse é o lema desses três quadros-chave que estamos tentando mostrar Ok, vamos voltar para nossa competição principal. Então, vamos pressionar U no nosso teclado para que possamos ver. Ok, então essa é a primeira camada que anima. Aumenta a escala, ok. E depois há essa camada de texto. E eu usei a primeira opção aqui na configuração, a opção Glyphs. Ok, marque este e você pode continuar editando o texto, e ele o converterá enquanto renderiza o arquivo em reprodutores de compartilhamento, na verdade Ok. Então, a primeira linha realmente anima usando uma máscara, uma máscara muito simples, ok E há dois quadros-chave na máscara e ela revela. Agora, há algo importante a destacar aqui, que é que alguém pode pensar que não é uma forma profissional de animar isso talvez porque as pessoas queiram que o efeito de escrita realmente mostre letra por letra, certo? Você pode conseguir isso convertendo isso em um player compartilhado e , em seguida, simplesmente compensando-o por um quadro-chave, como fizemos no curso anterior Mas isso não é muito aconselhável nessa situação porque, à medida que avançamos por aqui, há toneladas de texto realmente animadas Portanto, levará muito tempo para definir um quadro-chave para cada letra, na verdade, porque então isso se tornará duas ou três vezes maior Vai levar ainda mais tempo, na verdade, certo? Atualmente está tomando. Vamos ver quanto tempo está demorando. Está demorando cerca de 6 segundos, certo? E então a animação levará cerca de 18 segundos. Então, na verdade, não queremos que o usuário fique entediado com a animação, porque essa é uma animação tocas, Só que, se você olhar a animação, poderá entender completamente o que a IA é capaz de fazer por você. Portanto, nosso trabalho é criar uma animação que retrate o significado em muito menos tempo. Ok. Então, todas essas formas são apenas formas, formas simples, certo? Portanto, há apenas animações em escala. Os pontos de ancoragem são deslocados neste local usando esse plug-in, que discutimos no curso anterior. Muito simples. E essas são apenas as camadas fiscais usando a mesma técnica de máscara. Tudo isso é revelado, certo? Ok. Então, quando tudo isso é animado e esse botão se revela, ok, ele é revelado, e então o clique acontece no botão de envio. Ok. E então o que acontece é que entramos na segunda competição. Ok. Vamos bater em você no nosso teclado. Como você pode ver, ele se posiciona na direção superior. Ok, você também pode verificar a flexibilização aqui. Ok, ele também vai na direção superior com a opacidade, então basicamente desaparece E então o A começa a gerar a resposta. Vamos entrar nessa competição. E antes de continuarmos, vou abrir o ilustrador para mostrar o arquivo de design que o cliente realmente me enviou Então, deixe-me te mostrar isso bem rápido. Ok, então esse é o arquivo que o cliente realmente me enviou. Esta é a página principal. Agora, como você pode ver, fiz algumas modificações. Eu removi o fundo dessa senhora e substituí o fundo camada de forma simples Ok, porque eu preferia que o cliente usasse um círculo simples no fundo em vez de usar um quadrado, porque então queremos poder animar essa senhora dentro dele Então eles concordaram. Ok, e então o que acontece é que esse é o primeiro slide. Na verdade, essa era uma referência à versão do aplicativo móvel. Na verdade, eles não precisavam desse. Na verdade, eles cancelaram essa versão. Então, escolhemos apenas este. Na verdade, não trabalhamos nesse. Era apenas uma moldura de estilo. Ok. Então, aqui estão todos os textos que o cliente disse que a IA escreverá. Ok. Então, essa é a razão pela qual não pudemos fazer o efeito letra por letra, na verdade, porque isso levará mais de 50 segundos para ser animado por causa de tantas letras Ok. Então, como eu animei isso Vamos voltar ao nosso ilustrador, ao nosso último pedido de desculpas, e vamos ver como eu animei isso. Ok. Então aqui está a competição. Eu fiz com que fosse realmente maior. Como você pode ver, aumentei a altura. Vamos voltar ao nosso ilustrador e verificar a altura aqui Acho que também são 5.000 aqui. Mas vamos dar uma olhada. Ok. Então, como você pode ver , são 3.200 pixels Está bem? Então, na verdade, eu o aumentei porque queria criar um efeito de rolagem, na verdade. Agora, eu poderia ter excluído esse espaço superior também. Mas o cliente realmente precisou disso muito rápido. Então, eu estava apenas procurando criar a animação, e não havia mal nenhum em criar esse espaço em branco, na verdade, porque não havia outros objetos ou camadas complexas. Então eu simplesmente continuei. Mas, definitivamente , deveria estar no topo aqui. Sim. Ok. Então, primeiro de tudo, essa camada é animada da mesma maneira Ok, sem diferença. Não aumenta porque já fizemos isso, certo? Então, por que aumentar a escala? Novamente, porque está apenas escrevendo a resposta agora. Tudo bem, então como o texto está sendo animado? Vamos dar uma olhada nisso? Os parágrafos são divididos em camadas de máscara, ok? E então o que acontece é que há uma máscara. Vamos falar com você em nosso teclado e, como você pode ver, há quadros-chave de posição e quadro-chave de opacidade Como todo o propósito de mostrar animações de IA ou IA usando software de IA, também há um grande elemento na criação de animações de IA que você deve ter sempre em mente, que é que a IA reduzirá o tempo que a tarefa levará se você não usar Está bem? Então, a IA basicamente economizará muito tempo. Então é isso que estamos tentando enfatizar aqui: ele produz resultados muito rápidos. Então, todas as camadas são simplesmente compensadas, como se estivesse usando este plugin, simples assim Ok. E tudo isso é animado, certo? E depois disso, o que acontece é que, como você pode ver, escrevemos a pessoa que está usando a IA escreve outra pergunta. Está bem? Basicamente, uma pergunta complementar. E então a IA também responde a isso, certo? Animação bem simples. Nada muito complicado. Vamos voltar à nossa composição principal e ver como eu criei o efeito de rolagem Ok, como você pode ver, aqui estão os primeiros quadros E de posicionamento. Ok, vamos desacelerar essa. E como você pode ver, aqui está. Ok. Então a animação começa a partir daqui, ok? E até aqui, não está animado em posição. É apenas uma chave de opacidade desde o início. Agora, a partir daqui, a posição animada porque o texto está cheio na tela, então ele sobe e então o que acontece é voltamos para a parte inferior dessa camada porque queremos mostrar que, assim como o Whatsapp, a barra de digitação está abaixo na tela, então ela deve ficar na parte inferior da tela por aqui até que seja escrita Ok. E depois disso, digitando. Ok, o que acontece é que um fato muito simples acontece, na verdade. Vamos voltar e verificar isso. Ok. Então, o que acontece é que aqui essa camada de texto sobe. Deixe-me ligar isso. Ok. Então essa camada sobe e essa camada tem a chave de opacidade emoldurada Vamos pressionar você no teclado e ver. Como você pode ver, essa camada vai embora, desaparece, certo? E então esta se posiciona na direção superior. Ok, e é isso. Não há animação adicional em andamento. Ok, então isso é derivado de nulo, na verdade, e o nulo Na verdade, toda a barra é animada com esse nulo, e esse nulo realmente é animado na direção superior, de modo que o ícone da pessoa também se mova na direção superior junto com Ok. Então, só para salvar alguns quadros-chave, acabei de adicionar um objeto nulo Então, depois dessa animação, eu apareço novamente, e então ela está sendo animada novamente, e ela digita todas as respostas novamente da mesma forma. Vamos voltar à nossa composição principal e dar uma olhada. Ok. Então, agora ele mantém a animação por aqui por um tempo e, em seguida, a animação da posição começa novamente. Ok. E simples assim, a animação se completa e começa de novo. E é isso. Ok, eu vou resolver isso e você pode ver toda a animação Ok. Então, esse foi um projeto muito simples. E agora eu quero mostrar um pouco, semelhante também, que era o projeto de outro cliente, na verdade. Ok, então essa é a animação que eu criei. Vamos dar uma olhada nisso. Ok, então é isso. Ok, então, basicamente, isso também serve para verificar o tamanho do arquivo anterior do projeto anterior. O tamanho final da animação foi a versão para desktop, na verdade eu tinha apenas 261 Kb e pronto Como usamos essa opção dentro do plugue móvel interno do corpo, a opção de glifo, é por isso que o tamanho do arquivo era muito Vamos abrir este projeto agora e mostrar o que eu fiz neste e como eu o criei. Agora, para este, eu criei o design sozinho. Então, vamos dar uma olhada no design, porque ele não é tão desafiador quanto você imagina. Ok, então o cliente basicamente me enviou uma animação, que eu não posso compartilhar com você por causa de sua privacidade, porque eles não queriam que ela fosse compartilhada em nenhum lugar a quem eles estavam se referindo, na verdade. Ok, então, basicamente, essa é uma ferramenta de IA, que automatiza a geração de leads de vendas Ok, então essas foram as cores do cliente que eles forneceram e essas foram as fontes. Essa foi a exigência do cliente. Acabei de criar seis retângulos e copiar e colar os valores aqui Ok. E depois disso, o que eu fiz foi criar esses botões, essa animação de botão. E esses botões são realmente muito simples. E, como você pode ver, os traços e preenchimentos estão no botão Existe apenas um tipo de letra. Existe esse pequeno ícone. tentei combinar o esquema de cores do cliente Na verdade, tentei combinar o esquema de cores do cliente para manter tudo alinhado com sua marca E então a flecha cai. Então, basicamente, alguém envia um formulário e depois entra em contato por meio da campanha ativa A primeira coisa que realmente acontece é que um formulário é preenchido e , em seguida, o contato é feito por meio da campanha ativa que eles estão usando, e então eles responderam ou não Eles responderam sim à pergunta quatro no formulário de empate? Se for sim, eles enviarão um link com desconto. Caso contrário, eles enviam um link sem o desconto. E então, em qualquer condição, eles esperam por dois dias. E então, se eles abrirem o e-mail, se sim ou não, certo, eles alertam para que façam um acompanhamento por telefone e, se sim, marquem com o lead de autoatendimento, certo? Ok, e então o cliente solicitou algumas mudanças. Além disso, essa é uma dica muito útil. Na verdade, você pode simplesmente duplicar o arquivo enquanto cria as visões do cliente Então, o cliente realmente queria que a caixa fosse feita à mão. Então, eu apenas adicionei alguns pontos de ancoragem na caixa e depois os ajustei e fiz com que não fossem um caminho reto e apenas adicionei algumas curvas, e E depois disso, eu simplesmente o duplico na mesma caixa em todos os lugares Além disso, eles solicitaram que o formulário fosse na cor azul, ok. E os outros estavam em rosa. Além disso, eles pediram que eu mudasse a cor das flechas, e eu fiz isso Depois que o design foi aprovado, eles também solicitaram que eu adicionasse o ícone ZPR aqui, mas insistiram que tudo deveria estar alinhado à marca Ok. Então, depois disso, eles aprovaram a versão, e então o que eu fiz foi, na verdade, esse é o feedback da versão anterior, certo? Eles me disseram o que mudar, e então eu apliquei a mudança. Ok. Depois disso, o que eu fiz foi seguir em frente. Agora, como essas partes não são porque os traços não podem ser animados dentro do After Effects ou digamos que a ponta das setas quando importamos o outro arquivo, vamos fazer isso e mostrar como funciona Ok, vou selecionar isso. Vou ver meus efeitos posteriores. Vou abrir uma nova composição e agora vou torná-la branca Ok. Agora vamos clicar em OK, para que eu possa mostrar o que acontecerá se eu importar este. Ok. Como você pode ver, ele não adicionou a ponta da flecha. Então, nós também precisávamos disso. Então, o que eu fiz foi selecionar tudo isso e seguida, entrar no objeto e expandir a aparência. É isso mesmo. E então ele as converte camadas de forma para que eu possa animar cada elemento sem problemas E esses traços continuam sendo traços. Ok. Ok, então agora o que realmente acontece é que, quando o design foi feito, eu o trouxe para cá e, em seguida, criei essa composição de design primeiro Certifique-se de inserir o design apenas em uma comunicação separada antes de animá-lo Então duplique a composição, ok? E então o que você pode fazer é criar a animação em uma composição separada. Dessa forma, você terá esse design aqui. Digamos que eu adicione alguns quadros-chave aqui e ali. E devido a algum erro ou algum problema ou talvez um erro ou apenas um erro, eu estrago o design Então eu posso simplesmente voltar e pegar o design real daqui. Ou se a animação for interrompida, posso simplesmente excluir essa composição e duplicá-la novamente e recomeçar a Ok. Então essa é a pessoa que está na plataforma e está basicamente passando por uma jornada. Ele ou ela está passando por uma jornada, certo, através do formulário. Então, o cliente também queria que a animação tivesse Zomi em efeitos Então, como podemos realmente criar isso? Porque não podemos usar três D Lers porque eles não são suportados por arquivos atrasados. Então, o que fazemos sobre isso? Então, para isso, eu acabei de criar toda a animação, primeiro lugar, ok? E então eu reduzi o tamanho da composição, ok, para apenas 500 por 500 pixels porque essa foi a solicitação do cliente E então o que eu fiz foi criar toda essa animação e depois transformá-la em um objeto nulo, que é, como você pode ver, Aqui, como você pode ver, se uma parte não está sendo animada, há quadros-chave em todas as instâncias, como na posição e na escala Como fizemos um projeto muito complexo no curso anterior, talvez você saiba que adicionar quadros-chave fictícios é muito importante para ajustar o tempo da animação posteriormente Ok. Então, o que acontece é que vamos passar por isso. Vamos apenas registrar esse nulo. Vamos pressionar nosso teclado e examinar todas as camadas. Vou pressionar, ok. E, como você pode ver, existem apenas duas camadas que estão sendo animadas, na verdade. O primeiro é esse personagem. Então, basicamente, o objetivo desse design ser perfeito é muito importante porque o design é o elemento essencial aqui. Em todas as animações mais prováveis, o design é muito importante E nesses casos, porque é uma animação de vitrine de produto ou animação de introdução a um produto Então, nessas animações, esse design realmente importa muito Ok, então esse garotinho realmente se anima para baixo, ok, chega E então o mesmo quadro-chave é adicionado aqui, ok? Por aqui, não há interpolação entre eles ou, se houver, verdade não importa, porque assusta aqui embaixo e porque está por trás Portanto, realmente não importa como está sendo animado. Ok, então o que acontece é eu apenas uso a escala nesse nulo e o posicionamento, e pronto Então, estamos basicamente percorrendo um caminho, certo, e então estamos apenas navegando dentro dele Ok. Então, acabamos de entrar neste fórum, e então a escala diminui, que cria esse efeito de zoom. Na verdade, estamos apenas usando a escala aqui. Não estamos usando nada sofisticado, mas ainda assim fizemos o efeito perfeitamente, certo? A pessoa entra no S e então o que acontece é esses são os mesmos quadros-chave duplicados aqui para que a animação seja mantida aqui e, depois disso, ela é animada novamente Espere dois dias, certo? Ele se move daqui para aqui, e então nós descemos daqui, e então esse cara se anima novamente assim E então voltamos a diminuir o zoom novamente, como você pode ver, isso está aqui, escala de 100%, e agora é escala de 50%. Está bem? Nada muito complexo, muito simples. E agora isso se arrasta para baixo nesta coluna. Ok. E à medida que se arrasta até aqui, voltamos a ampliar Ok. E como você pode ver, vamos até aqui agora, e a animação termina aqui, certo? Perfeito. Está bem? Nenhum problema foi resolvido com sucesso. Ok, então isso também era muito compatível, e a fonte acabou de ser convertida em reprodutores de compartilhamento usando a mesma opção, certo? Esse, o cs. Simples assim, nada muito complexo. Agora vamos ver uma animação muito simples e outro exemplo, na verdade. Ok, agora vamos dar uma olhada neste projeto. Agora, isso foi criado para outro cliente. Neste, o design foi realmente fornecido no Figma, mas houve alguns pequenos problemas que eu resolvi, na verdade Eu converti o design em SVG. Ok. E então o que eu fiz foi, como você sabe, as imagens são importadas diretamente do Figma se usarmos o AeuxPlugin como usamos na Ok. E então o que acontece é que a animação é realmente muito simples. Na verdade, havia alguns problemas nessas linhas. Então eu acabei de editá-los no SVG. Deixe-me abrir o arquivo de design, na verdade. Então, posso mostrar que, como você pode ver aqui, este é um exemplo mais simples. Deixe-me abrir outro. Ok, então, como você pode ver neste, eu desenhei as referências. Ok, então deixe-me ir em frente e desligar isso para que eu possa explicar o que fiz. Ok, então esses são os que eu desenhei. Ok. Esse é o design fornecido pelo cliente. Está bem? Como você pode ver, se eu arrastá-lo aqui sozinho, você pode ver que há segmentos na seta, mas deve ser apenas uma linha simples. Agora não consigo animá-lo usando partes de acabamento porque é um preenchimento, certo Não podemos animar um preenchimento. Então é por isso que eu fiz foi criar essas camadas roxas em cima disso. Basicamente, refiz as linhas para aplicar uma melhor atenuação nas animações Fiz isso com todas as animações que o cliente me solicitou. Eu mesmo criei todas as flechas novamente. Isso levou apenas 5 minutos, mas tornou a animação muito mais fácil e eu não precisei mascarar as camadas. Acabei de usar o caminho de corte, como você pode ver aqui. Como você pode ver, o final do caminho de corte é animado, na verdade, e nada mais está sendo animado E temos um efeito muito simples. E então esse cabeçalho também é animado usando o final e o início em 50 50, modo que seja animado a partir do centro A outra animação é muito simples. Há opacidade nos botões e também há uma escala. Ok. E depois há apenas a animação da imagem, é apenas opacidade. É isso mesmo. Obviamente, essas são muitas camadas, então pode parecer um pouco confuso Mas se você assistir ao curso anterior, a classe intermediária, parecerá muito fácil acompanhar. Ok, então isso é apenas uma animação em escala, e havia alguns padrões que eu segui nas animações, que são: a animação em escala é dez, 20, 21, 22, 23, 24 Cada animação em escala tem 24 quadros, ok, como você pode ver aqui. E também essa animação, essa também é a animação AirScale Como você pode ver, isso também dura 1 segundo. Ok, então você precisa criar alguns padrões ao criar animações, várias animações para o cliente Você precisa manter esses padrões e segui-los em todas as animações que criar. Isso o ajudará a fornecer resultados consistentes, e você pode simplesmente anotá-los em um bloco de notas, na verdade como qual valor será qual, a escala será de 24 FPS ou será de quadros Ok. A animação da linha terá apenas 12 quadros. Você pode simplesmente escrever isso, na verdade. Ok. E isso tornará seu trabalho muito fácil. Ok. E eu recomendo fortemente que, se você estiver usando designs Figma, não crie todas as animações em um arquivo, na verdade, porque as camadas podem ficar muito problemáticas ou se o cliente realmente criar o design que foi dado a você, se cada elemento tiver uma moldura, certo, como discutimos em uma aula anterior, então cada elemento será colocado dentro Então você só terá que passar por com, com, com comp. Mas agora esse não é o caso aqui porque acabei de colocá-los dentro do estator E então o que eu fiz foi usar isso e usar a sobrecarga e levar isso para o After Effects usando straor em vez de usar Figma E então eu simplesmente exportei essa imagem de avatar do Figma separadamente e depois importei isso aqui Ok. Então foi assim que eu criei isso, e é por isso que usei o mesmo projeto de animação para todas as seis animações que fiz para o cliente As outras animações também são muito parecidas e simples. Então, eu não acho que seja necessário passar por todos eles. Mas existe esse elemento de consistência, que você verá em todas as animações. Se eu jogar todos eles um por um, você não conseguirá ver a diferença ou não haverá nenhuma variação na animação. Será muito semelhante e fará sentido que sejam todos do mesmo cliente ou da mesma empresa e sejam colocados na mesma página do site. Sim. Portanto, esses são alguns pequenos detalhes que você pode ter em mente ao animar ativos para o cliente Ok, então foi isso para esta aula. Te vejo na próxima. 6. 05. Máscaras de animação: Nesta aula, aprenderemos como criar o efeito de escrita que você pode ver na tela, e eu o criei para vários projetos de clientes, como você pode ver. Na verdade, é muito simples de criar no After Effects, mas é um pouco complicado se você precisar criá-lo em um JSON Lottie compatível com versões posteriores Então, vamos começar e vou mostrar como isso é feito, na verdade. Portanto, existem várias maneiras de fazer isso no Lottiefiles, principalmente no After Effects Então, vamos criar nossa nova composição e deixe-me orientá-lo sobre isso Então, criaremos uma composição de 1.900 por 1080 pixels. E depois disso, o que vamos fazer é dizer que nosso cliente sou eu mesmo agora, porque não queremos entrar em detalhes sobre trabalhar para um cliente agora, porque este é apenas um exemplo para mostrar como as coisas podem ser feitas. Então, vamos aumentar o tamanho e, depois disso, mudaremos a cor também. E depois disso, vamos transformar isso em camadas de forma, como já discutimos, que as camadas de forma são compatíveis em Lottiefiles Depois disso, iremos para o Motion Tools e extrairemos todas as camadas. Então, como mencionei, existem várias maneiras de fazer isso. Então, uma maneira simples de fazer isso é muito simples , ou seja, vamos procurar as janelas e acessar o painel de efeitos e predefinições Agora vamos procurar um efeito de derrame. Vamos apenas arrastar e soltar aqui. Então, agora vamos selecionar essa camada e, em seguida, vamos criar uma máscara em cima dela. Veja como você pode fazer isso, clique neste botão e, em seguida, clicaremos na máscara e criaremos uma camada. Depois disso, vamos criar outra máscara como essa. Agora, isso é apenas para mostrar quantas maneiras você pode fazer ou alcançar esses resultados. Agora vamos selecionar todas as máscaras e mudar sua cor para vermelho para que possamos vê-la claramente. Vamos apenas aumentar a dureza do pincel para 100. Vamos apenas aumentar esse tamanho. Ok. Depois disso, o que vamos fazer é ampliar um pouco. Vamos seguir em frente e animar isso. E vamos revelá-lo em transparente, certo? Ou revele a imagem. Você pode ver que se quiser revelar essa máscara em transparente, você pode ver que isso está acontecendo. E depois de selecionar a imagem original revelada, é isso que obteremos . Então você pode ver que estamos criando um efeito de escrita com bastante facilidade. Você pode usar isso para criar um ponto de referência. Antes de tudo, crie um guia aproximado para sua animação de tipos. E depois disso, você pode enviar isso para o seu cliente. Depois que eles aprovarem, você pode informá-los de que haverá pequenos erros como esse se sobrepondo Isso não deveria estar acontecendo Mas você pode explicar a eles que essa é apenas uma visão geral aproximada da flexibilização da animação Você pode usar essa técnica simples para criar toda a animação em 10 minutos, porque a animação da Lottie vai demorar mais Assim, você pode simplesmente mostrar isso ao cliente e obter sua aprovação. E outra técnica a ser usada aqui é que existe outro método, que é deixe-me mostrar isso agora, que será permitir que eu remova as máscaras da camada. Vamos seguir em frente e criar uma camada de traçado. Agora, além disso, agora o que podemos fazer é usar a opção Alpha mat. Então, vamos colocar o tapete Alpha sobre a camada, e agora, depois de criar o traçado, você precisa ir aqui e adicionar caminhos de acabamento Agora, o que vamos fazer é animar o caminho de corte. Dessa forma, o que você pode fazer é basicamente fazer com que as diferentes partes da camada de animação tenham atenuações diferentes Mas no caso anterior, não poderíamos fazer isso. Agora, esse é outro método que você pode usar, mas também é útil apenas para referências. Isso também não pode ser renderizado perfeitamente na animação Lottie Então, vamos simplesmente deletar isso. Agora vamos ver o que realmente pode funcionar nos arquivos Lottie Vamos clicar em nossa camada e vamos criar uma máscara de camada de forma como essa. Você também pode alterar a cor da máscara para poder diferenciar entre a cor da camada de forma e a cor da máscara Vamos seguir em frente e criar, criar um quadro-chave e depois retroceder assim. Simples assim. E agora você pode ver. Agora, esse efeito é realmente compatível com Lottie Agora, depois disso, o que você pode fazer é criar outra máscara, clique aqui, desenhe uma máscara. Depois de criar a máscara, o que você precisa fazer é animar essa também Vamos retroceder quadro a quadro, porque se animarmos as palavras iniciais, na verdade, na linha do tempo, não conseguiremos lidar com muitas dessas alças, que podemos manipular agora com muita facilidade, porque temos que lidar agora com uma alça por vez, mas esse não será o caso se seguirmos na direção para frente Então, é melhor fazer isso dessa maneira. R No primeiro quadro K, o que você precisa fazer é simplesmente tirar isso da sua forma. Dessa forma, o primeiro quadro K está sempre limpo. Agora, digamos que queremos que a primeira camada seja concluída e, em seguida, o resto do B comece a ser animado. Então, vamos escolher a próxima máscara e colocá-la aqui desta forma E agora você pode ver que está animando. Esse método funciona muito bem. Agora eu criei várias animações para projetos de clientes Agora vou mostrar como eu os criei. Você verá que existem algumas pequenas lacunas e problemas como esse. Vamos abordá-los em um curso muito complicado, que será uma aula separada. Então, discutiremos isso em detalhes em uma aula futura. Vamos dar uma olhada em nossos outros projetos. Portanto, este é um logotipo do Revibe, animação em tela inicial que eu criei Você pode ver a animação do logotipo que eu criei. Então, como você pode ver, eu uso a mesma técnica que acabei de te mostrar. Então, há esse R, e isso é na verdade, animado de baixo para cima Agora você tem que ter uma coisa em mente: como você escreveria para si mesmo um R em uma cópia ao escrevê-la, você sabe, imagine que você está escrevendo isso, você sabe, assim. Então é assim que vamos animá-lo. Então, primeiro, o R vem da parte inferior e depois da segunda linha. Agora, usei uma camada separada para isso porque queria ter controle separado sobre camadas separadas, e você pode ver que eu fiz basicamente a animação do caminho de reversão aqui também na máscara E depois disso, há essa terceira camada também. E, a propósito, todas as camadas têm todo o caminho disponível para isso. Você também pode removê-lo se houver mais de um caminho, mas se houver um caminho, o que você pode fazer é mantê-lo lá. Eu recomendo fortemente que, porque o que realmente acontece é que, depois de animar tudo, vamos simplesmente soltar a camada E você notará aqui que há uma pequena lacuna. Agora, o que realmente acontece é que se eu excluí o caminho anterior, digamos que tudo foi excluído. Não havia dados aqui, apenas esses dados, então você não poderia realmente sobrepor esse quadro-chave no topo dessa camada para corrigir esse problema Portanto, você deve ter essas pequenas coisas em mente antes de animar Agora, como eu fiz isso várias vezes e fiz mais de 100 projetos como esse, é por isso que eu sei essas coisas antes de criar a animação. Mas quando estiver começando, você terá que ter essas coisas em mente antes de criar as animações Depois disso, temos a animação E. Que é uma parte dupla. Então esta é a última parte, e depois há essa parte E, que também é feita da mesma forma que você escreveria um E. Então, é muito simples de fazer. Nada muito complicado por aqui também. E depois disso, temos um simples. Depois disso, temos a IA, que na verdade só é feita por animação em escala vertical porque não precisávamos fazer a animação do caminho aqui. Não era necessário. Então temos B, e depois disso, temos E. T E é na verdade uma duplicata desse E. O E original está realmente sentado aqui, na verdade Eu apenas usei isso como referência para poder arrastar a anterior exatamente para onde ela pertence. Você pode ver que tudo se encaixa perfeitamente, certo? Então, tudo está onde deveria estar. É por isso que você também precisa manter as referências em sua composição Você pode retirá-lo após a aprovação do projeto do cliente. Você também pode ler a camada final. Ou, se você também puder desativar a visibilidade da camada, ela na verdade não será renderizada, portanto, também não aumentará o arquivo Lottie Json Portanto, ele funciona completamente sem problemas. se você está preocupado com o fato de que, se a animação quadro-chave por quadro-chave adiciona mais dados, na verdade, isso não acontece, porque não estamos usando o recurso de rastreamento automático aqui, É por isso que é surpreendente que, uma vez que não usamos o recurso de rastreamento automático e fazemos a animação quadro a quadro sozinhos, isso não aumente o tamanho do arquivo. Então, isso só acontece quando você está criando o efeito de rastreamento automático, certo? Você não está fazendo isso sozinho, quadro a quadro. Além disso, uma coisa a ter em mente, que é muito importante, é se você quiser ajustar vários, como fez essa animação quadro a quadro, agora deseja aumentar ou diminuir a velocidade. É uma velocidade. Você também pode alternar e arrastar os quadros-chave para ajustar a velocidade Então é assim que você cria o efeito de escrita. Agora, eu também queria mostrar alguns exemplos realmente cruciais, porque às vezes o vetor nem sempre é a resposta. Agora, o que eu quero dizer com isso? Aqui está outro projeto de um cliente, que eu quero mostrar a vocês porque isso destaca algo realmente, muito importante. O cliente realmente compartilhou esse arquivo e eles queriam essa animação vetorial, mas eu não usei esse método. Agora, por quê? Porque se você notar no arquivo do ilustrador, isso é na verdade um pincel Agora, os pincéis não são realmente exportados para você, não como um traço Então, basicamente, eu tive que expandir o arquivo. Na verdade, o cliente forneceu o arquivo expandido, mas não importa se ele também forneceu um arquivo de traçado, pois os pincéis não são realmente transferidos para After Effects usando o método de sobrecarga Eles apenas transferem um derrame. E se eu usar essa camada de forma, o que ela está realmente fazendo é que agora eu tentei fazer isso, mas na verdade meu PC estava muito atrasado porque cada elemento aqui, como essa camada, cada camada está na verdade se tornando uma camada separada dentro do After Effects Então, essa camada está, na verdade, criando mais de 200 camadas. É por isso que essa não é uma solução ideal. Por essa razão, o que eu fiz foi fechar todas as camadas, e uma por uma, o que eu realmente fiz manter uma camada aberta por vez, uma camada visível, e então apertar a tecla Control A shift, e então eu obtenho essa transparência PNG 24, arquivo fora dela e salvo E eu fiz isso com cada camada individualmente. E uma vez que tudo isso foi feito, o que eu fiz foi pegar aquelas camadas assim, todas essas peças separadas. Deixe-me fechar isso e te mostrar. Eu apenas arrasto e solto isso aqui. Vou criar uma nova composição. Vou selecionar tudo isso e depois mostrar que temos tudo no mesmo local. Depois disso, o que eu fiz foi bem simples. Vamos desligar todas as camadas e deixar eu te mostrar. Acabei de criar uma máscara, simplesmente assim. Dessa forma, você também pode ajustar a velocidade e a facilidade com bastante facilidade Então você pode simplesmente fazer a flexibilização como quiser, certo? Então, depende de você. Depende totalmente de você como você deseja lidar com a velocidade e a flexibilização. E também, porque o tamanho da tela era muito pequeno, deixe-me mostrar, que era de 400 por 200 pixels. Portanto, o tamanho da camada não é realmente grande. A tela inteira tem cerca de 200 pixels de altura, como você pode ver. Portanto, essa camada terá apenas cerca de 50 pixels, provavelmente, ou até menos. É por isso que os tamanhos dos arquivos eram realmente ótimos. Então eu usei essa abordagem em vez de usar a outra. exemplo, não optamos pela abordagem vetorial aqui, e está muito bem. As animações funcionam muito bem, e o cliente realmente e o cliente realmente queria algo que você conhecesse que funcionasse muito bem Esse é o objetivo principal de criar animações Lottie. Eles não precisam estar atrasados. Eles não podem ser grandes ou pesados. E deixe-me mostrar os tamanhos finais do arquivo agora que há 18 KB, é 150, é 150. São 160 6 kilobytes e 140 E deixe-me mostrar outras animações também para que você também possa dar uma olhada nelas Você pode ver que eles também são criados da mesma maneira. Então, simplesmente fiz a mesma coisa. Em todas as outras animações também, certo? E então você pode simplesmente pré-compô-lo e também levá-lo para qualquer composição que quiser. E o cliente não queria a escalabilidade porque eles seriam usados como assinatura em algum lugar do site Então, eles o usaram em tamanhos muito pequenos. Então, como você pode ver, isso parece realmente lindo. Agora, há outra limitação que um projeto tinha e que eu quero mostrar a vocês. Deixe-me mostrar a animação primeiro. Dê uma olhada neste. Então você pode ver que a sensação do design é muito superficial e, na verdade, eles foram muito mal feitos. Então, deixe-me mostrar o que quero dizer com isso. Infelizmente, eu não tenho o arquivo de design, então deixe-me mostrar o design dentro da animação, como a animação está realmente surgindo aqui. Então, deixe-me mostrar como essas coisas estão organizadas e como o design foi mal feito, pois você pode ver que essa mão está sozinha, mas você pode ver que as peças estão realmente muito quebradas. Então, nesses casos, o que você precisa fazer é trabalhar com o que você tem. Você realmente não pode reclamar disso. Você precisa encontrar uma solução para essas coisas. Então você pode ver que há uma animação muito minimalista feita porque eu só animei as coisas que estavam adicionando significado a Além disso, devido ao campo do estilo de jornal, eu queria manter uma abordagem muito minimalista Então, há essa animação de pássaros, que é bem simples. Há apenas a rotação na camada e, em seguida, há apenas o pássaro subindo e descendo. É isso mesmo. E então há um piscar de olhos discutimos as piscadas na aula anterior, para que você possa conferir. E você pode ver que há apenas uma aba de broto aqui. Fora isso, há apenas um simples piscar de olhos nesta senhora, da mesma forma Há apenas um pequeno momento nas sobrancelhas porque elas também eram uma camada separada Além disso, também há um pouco de momento nas duas mãos. Além disso, há apenas um gato que anima, a orelha estava realmente separada, então fiz questão de animar alguns detalhes nela E então essa orelha foi muito mal feita porque faz parte da camada da cabeça. Portanto, há apenas um caminho. Deixa eu te mostrar. Você pode ver que a cabeça inteira é realmente impulsionada por isso. É por isso que mantive o movimento minimalista. Se eu adicionasse muita animação, eu poderia simplesmente trazer o ponto de ancoragem até aqui e basicamente, você sabe, colocar tudo na camada Mas se tivesse muito movimento, distrairia toda a cena porque não há muita animação acontecendo em qualquer outro lugar. Então, eu só queria manter a animação muito minimalista e dei vida ao gato apenas animando as orelhas, porque os gatos têm o hábito de fazer isso o tempo todo Além disso, há apenas um momento visual. É isso mesmo. Bem simples. Então, na outra metade da ilustração que mostrei, que é a parte certa, o que eu fiz também é realmente muito simples. Você pode ver que existe uma scooter, que aparentemente está prestes a ser anulada, que está apenas balançando como se o E então, por outro lado, há apenas esses membros de cactos que estão apenas fazendo uma animação de rotação, Além disso, existem apenas essas animações de folhas que estão sendo balançadas pelo vento no ambiente É isso aí, e há apenas animações sutis nas nuvens, que também podem ser pagas em loop Então, todas essas animações, ambas as animações, são apenas animações em loop que têm os mesmos pontos inicial e final Então, o objetivo de mostrar tudo isso é que, às vezes, não temos as soluções ideais ou a situação para oferecer o que realmente queremos oferecer. E nesses cenários, só temos que trabalhar com o que temos. Agora, não é que não possamos animar essas coisas também. Nós podemos. Mas o fato é que podemos obter resultados realmente excelentes usando alfinetes de marionete, mas essa não é realmente a solução ideal quando você está trabalhando com Lottiefiles porque os solução ideal quando você está trabalhando com pinos de marionete não funcionam em Lottiefiles resultados realmente excelentes usando alfinetes de marionete, mas essa não é realmente a solução ideal quando você está trabalhando com Lottiefiles porque os pinos de marionete não funcionam em Lottiefiles. Portanto, você deve ter essas coisas em mente antes de animar ou criar qualquer coisa e deve comunicá-las seu cliente antes de iniciar o projeto Então é basicamente isso. que você aprenda algo novo nesta aula, e nos vemos na próxima. 7. Conclusão: Estou orgulhoso de todos por terem chegado até aqui neste curso e parabéns a todos por concluírem o guia de arquivos de lote avançados. Agora, haverá dois cursos que estarão disponíveis em breve, e haverá trabalho realmente empolgante chegando, e você poderá oferecer excelentes serviços depois de assistir a esses cursos. Agora, vocês estão prontos para criar serviços atrasados para seus clientes, e eu desejo a vocês tudo de bom. Deixe-me saber se vocês precisarem de algum tipo de ajuda e se precisarem de algum tipo de orientação, realmente me contatem no Instagram se precisarem algum tipo de orientação sobre os projetos de seus clientes, estarei mais do que ansioso para ajudar Certifique-se de enviar alguns trabalhos para a classe e também revisar meu trabalho. Eu adoraria ouvir de vocês como estou fazendo essas aulas e também saber o que posso melhorar em minhas aulas. Boa sorte para todos vocês por criarem animações perfeitas para seus clientes, e a Bold Bite voltará muito em breve com novos projetos empolgantes Muito obrigado Cuide-se. Tchau tchau.