Guia de iniciantes para criar animações de IU

1. Introdução: Olá a todos, e bem-vindos à nossa aula de iniciantes do lottiefiles you Antes de começarmos o curso, gostaria de me apresentar primeiro. Eu sou bolt Bite e venho fazendo animações de loteria há cerca de dois Eu criei mais de 100 animações, como você pode ver aqui no meu perfil E eu sou um dos principais criadores da Ratifies Platform. E também sou vencedor oficial do torneio lottiefiles Minha animação foi baixada mais de 20.000 vezes em todo o mundo. E neste curso, eu vou te ensinar como criar sua primeira animação de Lottie e entrar nela 2. Classe 01: o que é o Lottiefiles? Quais são seus usos?: Bem-vindo à cobertura de primeira classe. Ok, então, nesta aula, veremos primeiro o que são realmente animações de loteria e por que estamos nos preocupando em aprendê-las Então, aqui estamos em lottiefiles.com. E, como podemos ver na primeira coisa que vemos na página, são animações leves, leves e escaláveis para seus cães e apresentações, sites e aplicativos móveis, ou aplicativos e anúncios, mídias sociais e Portanto, a parte mais importante é o site e os aplicativos móveis. Ok, então deixe-me dizer como e por quê. Em primeiro lugar, vamos dar uma olhada aqui quantas grandes empresas estão trabalhando com animações da Lottie Como você pode ver aqui. O que realmente Lottie faz? Então, vamos dar uma olhada aqui. Aqui está o novo padrão da indústria. Vamos ver. Como você pode ver, há uma animação formato GIF, que tem 598 KB kilobytes E há uma animação Lottie yes, que tem 66 KB kilobytes, e há Então, basicamente, com nove por cento de tamanho pequeno no arquivo. Então, digamos que deveríamos criar um AP e havia dez animações lá dentro Então, por que tentaríamos nos preocupar e criar animações de loteria E a razão por trás disso é que, digamos que quando a animação tem 600 kB é assim, e a multiplicamos por dez, ela se torna 6.000 Kb é, que se dividirá em 1024, porque isso é equivalente a Torna-se 5,8 e b, certo. Então, esses são tamanhos de arquivo realmente enormes que serão adicionados aos aplicativos móveis. E os desenvolvedores não querem que isso aconteça. Os criadores não querem que isso aconteça, que o tamanho do arquivo dos aplicativos seja apenas maior por causa das animações Não é uma abordagem muito boa. E há várias razões para isso. Não só o tamanho do arquivo, vamos falar sobre isso também. Então, digamos que, em vez disso, havia 66 animações de sarna, mas eram dez Portanto, serão apenas 660 kb, o que é menos de um MB Portanto, existem aplicativos como o Duolingo e também há uma menção especial ao Duolingo Porque o Duolingo usa muitas animações de loteria. Se eles deveriam usar animações GIF ou GIF, tamanhos do aplicativo serão duplos É muito importante que também tenhamos isso em mente. Portanto, existem várias vantagens em usar animações de loteria Tudo, embora também haja algumas vantagens. E também abordaremos isso em breve. Ok, então vamos iniciar nosso Adobe Illustrator rapidamente. E deixe-me mostrar o que exatamente quero dizer com vantagens? Como você pode ver aqui, diz animações leves e escaláveis para seus aplicativos e sites O que significa luz escalável com animações? Ok, então uma animação escalável significa, basicamente, que eu te mostro muito rapidamente Ok? Como você pode ver aqui, existem dois tipos de imagens, como você deve saber. Uma delas é a imagem rasterizada. Então, basicamente, o que é uma imagem rasterizada? Acesse isso rapidamente , basta acessar a pasta baixada e abriremos esta coleção. Há um arquivo JPEG. Arraste isso para o nosso software. Ok, então aqui está nosso arquivo e vamos deixar de lado, ok. Então, quando tentamos ampliar o arquivo, como você pode ver, ele fica muito pixelizado e embaçado Então, basicamente, JPEG e PNG, todos esses formatos são baseados em imagens rasterizadas Mas há outro formato conhecido como formato vetorial, no qual ampliamos o arquivo. O arquivo não fica embaçado. Agora você vai, você pode pensar que por que isso acontece? Na verdade, a razão por trás disso é porque o formato vetorial funciona com base em uma linha de caminho entre 0,8, entre o ponto a e o ponto B. Já porque os pixels não devedores Formato vetorial, os pixels determinaram as imagens rasterizadas que são comumente Ok, então, por favor, tenha isso em mente. Então, sim. Então, basicamente, existem vantagens. Às vezes , você pode criar animações para aplicativos móveis, que serão exibidas talvez nessas telas ou talvez em telas enormes, ou talvez em tablets móveis Então, basicamente, você não precisará pensar fornecer tamanhos de arquivo diferentes aos clientes. Você só precisa dar a eles um tamanho único e eles podem facilmente aumentá-lo assim. É como se eu estivesse ampliando este. Como você pode ver, não dá certo. Mas se fosse uma animação GIF, ela ficará desfocada e se transformará em pixels e em uma animação muito turva Como você pode ver aqui, essa animação está ficando embaçada, certo Portanto, não é uma maneira realmente eficiente. E o surpreendente é que o tamanho maior é para o formato GIF, que deveria ser menor, certo? Mas não é assim. Por que isso acontece? Na verdade, a razão por trás disso é que a animação de Lottie está basicamente de acordo com o arquivo É basicamente um arquivo JSON JavaScript. Então, basicamente converte a animação em codificação. E é assim que as animações da loteria funcionam. Então, basicamente, o formato vetorial está sendo movido por meio da codificação. E na próxima aula, aprenderemos que os arquivos de loteria podem ser integrados e como podemos usá-los para nossas vantagens 3. Classe 02: Utilitário de Lottiefiles. Ferramentas de criação de lottie.: Ok, estamos de volta e vamos entrar na guia de integração. E vamos clicar em Explorar todas as integrações e plug-ins simplesmente seu fluxo de trabalho de design de movimento Ok, desculpe, simplifique seu fluxo de trabalho de design de movimento. Então, vamos rolar para baixo e ver o que a Lottie tem a oferecer As integrações Lottie e Begginer's for são Ok, então vamos dar uma olhada. Ok, como você pode ver, existem muitas ferramentas usadas para criar animações de loteria E neste curso usaremos o Adobe After Effects para criar animações de loteria Agora você pode me perguntar por que não estamos usando nenhum outro software? E os motivos são realmente muito claros e eu vou te dizer quais são esses motivos agora, vamos abrir cada ferramenta em uma guia diferente. E vamos compará-los rapidamente. Ok, então vamos deixar o Adobe After Effects por enquanto. E isso é, de qualquer forma, animações loteria poderosas da Figma, acreditamos que as animações de interface do usuário devemos criar onde você as projeta Em primeiro lugar, discordo totalmente dessa opinião porque o design posterior tem um propósito diferente e o software de animação tem um propósito diferente O software de design não pode realizar as duas tarefas de forma muito intuitiva. E eu não o recomendo porque os padrões do setor não funcionam assim. As grandes empresas não funcionam assim. E os profissionais não trabalham assim. Como animadores experientes usarão ferramentas de animação especializadas para criar animações realmente boas, eles não usarão ferramentas de design Portanto, lembre-se de que estou tentando não usar os plug-ins Figma para criar Simplesmente não ajuda. E você também pode realmente usar o Figma agora para criar animações de loteria Mas eu também não o recomendo porque não há muita liberdade criativa quando se trata de facilitar os quadros-chave Porque o Figma não oferece gráficos I'm Speed Graph ou valores e basicamente fornece uma linha de curva de linha de base Então, basicamente, é isso que você pode controlar. Você não tem liberdade criativa sobre cada quadro-chave e não pode criar movimentos complexos com Então, por favor, tenha isso em mente. Vamos deixar isso fora do leilão. Software poderoso de animação 2D para Mac e Windows. Agora diz, comece, é grátis. Agora vamos aos preços. Seção de dólares por mês. Fature anualmente. Os preços excluem impostos fixos e aplicáveis e baixe gratuitamente para sempre, sem necessidade de guia de crédito Então, sim, veja o aprendizado. Ok, vamos esquecer isso, pois vá para design de recursos, iluminação em tempo real para que possamos ver. problema de Bertrand é que você vai se concentrar em ser criativo Fácil controle de versão, ok, isso é bom. Programa criativo. Isso não agrega nenhum valor, eu acredito. fluxo de trabalho de ponta a ponta passa facilmente da arte para a animação E conseguiremos criar da melhor forma a partir de recursos nativos. Controlamos a conexão de mangueira de borracha, compartilha paletas de cores, magia, envelhecimento, animação de texto, duplicata, O especialista em Lottie está comprovado. Então, pagaremos dinheiro pelos acompanhamentos do Dynamics, Quad Tree Ok, então, existem algumas características muito boas. Podemos adicionar alguns controles de plataforma e também podemos usar mangueira de borracha Mas há uma desvantagem em usar o software. Haverá momentos em que você precisará fornecer arquivos de origem aos clientes. E como todos sabemos, o Cavalry atualmente não é o software mais famoso para criar animações de interface do usuário Mas o Adobe After Effects tem uma franquia muito boa de criar várias coisas. Além disso. Outra coisa a ter em mente é que, às vezes, os clientes solicitam que você forneça o arquivo fonte do projeto. E quando você diz a ele que criou em cavalaria, talvez eles não consigam editá-la muito bem E eles se basearão quando precisarem comprar uma assinatura extra. Porque o adobe foi comprado por milhares ou milhões de pessoas em todo o mundo. Portanto, isso não incomodará o cliente ao editá-los. Ou talvez eles queiram pedir aos amigos que o editem ou talvez contratem outra pessoa. E provavelmente outros criadores também têm mais chances de ter uma assinatura do Adobe After Effects em vez de ter uma assinatura de cavalaria Portanto, esses são os motivos pelos quais, lembre-se de que ofereceremos serviços aos clientes. Então, por favor, tenha isso em mente. E também é um grande motivo. Outro motivo é que você também pode fazer vários tipos de outros trabalhos no After Effects. Você vai criar vídeos explicativos. Você pode fazer vários tipos de trabalho. Mas na cavalaria, você não pode fazer essas coisas. Ok? Portanto, isso limitará sua criatividade dessa forma. Ok, então vamos seguir em frente para favorecer nosso design de movimento ao nosso alcance. Como você pode ver, ele também não fornece um gráfico de valores. Basicamente, você terá que selecionar cada quadro-chave individual e depois animar, é fácil Então, basicamente, você pode simplesmente selecionar dois quadros-chave e depois facilitá-los. Você terá que trabalhar neles separadamente, ou você pode simplesmente usar a opção ambas a partir daqui, como você pode ver, para criar a animação. Mas não acho que seja realmente útil porque você vai usar várias propriedades e replicar. Não é muito rápido, como podemos fazer comparativamente no Adobe After Effects Existem vários plug-ins que o After Effects tem a oferecer, mas essas ferramentas também não os oferecem Além disso, vamos dar uma olhada nos preços. Há uma fatura anual de $12 espermatozóides por mês, apenas para 56. Dfp é exportação. E você também poderá exportar Lottie gratuitamente. E a animação pode durar até trinta segundos. Trinta segundos são realmente um ótimo cronograma. E você pode realmente tentar usar essa ferramenta. Mas, novamente, o problema do arquivo de origem também existirá. Se o cliente pedir isso, talvez você não consiga dar uma resposta feliz. Então, por favor, tenha isso em mente. Você pode ir em frente e usá-lo. Mas, como você pode ver, basta dar uma olhada na plataforma de aprendizado. Como você pode ver, não há muitas fontes disponíveis. Você também pode ver milhares de tutoriais do After Effects no YouTube Portanto, haverá mais, uma ferramenta mais acessível e fácil de trabalhar. Na minha opinião, é altamente recomendável usar o After Effects com certeza. Por causa de suas enormes vantagens. You Effects Animation Para designers e de acordo com o glucuronídeo, ok, então esse é chamado de fluxo, mas tem O problema número um é aperfeiçoar o design de movimento, criar animações complexas e elementos interativos usando camadas e elementos interativos usando camadas propriedades, não Então, basicamente, não adicionaremos quadros-chave. Usaremos codificação. Mas esse é o trabalho de um desenvolvedor, não um trabalho de animador, certo? Então, vamos pular isso já. E essa ferramenta é chamada Black Sinemet. Hum, eu realmente não acho que isso vai oferecer o que estamos procurando porque a limitação é apenas fornecer animações E essa realmente não é uma boa maneira de escolher uma mais suave só porque só podemos criar, dar animações a partir dela ou lotar animações a partir dela Então, sim, eu não acho isso porque haverá momentos em que os clientes pedirão que você crie algumas animações realmente complexas Haverá momentos o cliente poderá solicitar algumas coisas diferentes que você possa ter dificuldade em fazer este escritório do que no Adobe After Effects E aprender o Adobe After Effects é muito útil para você ou para outras habilidades. Como você será, poderá realizar vários tipos de projetos se tiver aprendido o Adobe After Effects. Então, sim, está basicamente oferecendo um bônus fazer animações de Lottie dentro do After Effects Então, sim, eu definitivamente recomendaria isso, aqueles que eu definitivamente recomendaria After Effects. Vamos dar uma olhada no animator de Cu. Como você pode ver, como usar o design de movimento para o fluxo de trabalho da sua equipe. Como você pode ver aqui, você precisa basicamente adicionar comandos verdadeiros ou falsos. Então, quero dizer, não é realmente tão difícil, mas ainda é um pouco complicado de usar se você um designer de movimento porque você não é um programador, certo Então, sim, eu realmente não recomendo este também. Existe no Inkscape e tem um problema muito grande porque agora, como você pode ver aqui, existe um tutorial em vídeo sobre como usar essa extensão que já não tem valor em Dorian Portanto, não há basicamente uma grande comunidade ao redor dela, que vai te ensinar como fazer as coisas. Ok, então o próximo é instabilidade. O Jitter basicamente oferece muitos modelos que você pode usar para criar Mas quando o cliente vem até você e pede que você crie animações personalizadas para ele, você pode ter problemas Então eu acho que você deveria ser capaz de pensar fora da caixa e criar algo incrível sozinho. Então, sim, eu também não recomendo isso. Isso é, vá em frente e verifique o formato em T. E agora a chave aqui é realmente inútil porque, ao comprar na Mac App Store, o maior problema é apenas a Mac App Store Outra edição só está disponível em alguns países. Portanto, há chances de seu cliente estar em um desses países onde isso não é permitido. Então, não é nada bom. Ok, então vamos deixar isso fora de questão. E o Adobe Animate só é usado principalmente para animação quadro a quadro E queremos fazer isso neste curso. Então, talvez seja um assunto para outro dia ou talvez quando você está criando algo semelhante ao animar, esteja tentando criar algumas animações realmente complexas com as quais você não consegue fazer no Adobe After Só então você precisará disso para funcionar. Ok? Portanto, lembre-se de que existem muitas integrações, mas apenas lottiefiles criou uma página dedicada para o After Effects criou uma página dedicada Então deve haver uma razão para isso, certo? Como você pode ver, crie uma animação impressionante com o plug-in lottiefiles para Adobe After Effects Eles também criaram um plugin dedicado para o After Effects. Então, basicamente, eles também preferem seus usuários usem o After Effects para criar animações. Então, basicamente, você pode testar suas animações no After Effects sem precisar enviá-las , o que é muito bom Então, há razões para fazer isso dentro do After Effects, ok? Então, basicamente, agora você precisa apenas baixar um arquivo de plug-in e instalá-lo rapidamente. Eu já instalei esse plugin, então não vou instalá-lo novamente. Então, voltarei para você novamente na próxima aula, na qual discutiremos os recursos suportados e aprenderemos como começar 4. Classe 03: site para desenhos. Organizando obras de arte.: Ok, estamos de volta. E como você pode ver, há um site aberto na minha tela. E é chamado de ilustrações gratuitas XYZ. E aqui está outro site que eu recomendo fortemente. É gratuito take.com. Eu gostaria que você se inscrevesse no site. Eu recomendo que você compre a assinatura e, se não puder pagar, basta clicar no filtro gratuito. E o terceiro site é um vetor de free.com. Você pode usar esses três sites se não conseguir criar seus próprios designs. Porque avaliar seus próprios designs realmente bons exige muitos anos de experiência e levará tempo para aprender a desenhá-los Então, por favor, tenha isso em mente. Primeiro de tudo. E criar logotipos, ícones ou ilustrações é outra arte em si mesma, que exige horas de esforço e anos de trabalho para ser feita Então, baixaremos nossos arquivos de design e depois os animaremos. Portanto, ao baixar um arquivo, lembre-se de que você só pode usar três formatos. Um deles é AI, o segundo é EPS e o terceiro é SVG Não use nenhum outro formato, pois eles podem conter elementos de imagem rasterizada, assim como discutimos antes. Portanto, lembre-se de que usaremos apenas EPS, AI ou SHA-512 Agora tente baixar Figma ou GIF ou esses arquivos porque eles realmente não funcionam corretamente com E o propósito de aumentar a escala das animações é arruinado porque o GIF DJ peg não pode ser E há algumas maneiras de importá-los para nossas animações de loteria Mas então os tamanhos dos arquivos aumentarão muito e não haverá nenhum propósito de criar animações de Lottie Então, por favor, evite isso. Ok? Então, sim, basta dar uma olhada e ver o que podemos fazer aqui, de tal forma que deveríamos em meados do ano. Como se houvesse vários resultados, como podemos ver aqui. Então, vamos escolher algo daqui. Ok, então eu realmente gostei desse. Esses são ícones realmente planos e eu gostaria de baixar este. Vamos fazer o download gratuito. Abra o arquivo. Haverá três formatos dentro do arquivo. Provavelmente existe o jetpack, ou seja, o EPS, e a IA Então, abrimos o arquivo AI. Selecionaremos este e agora o copiaremos e abriremos um separado, estranho Seu tamanho é de 500.500 pixels. Ok, então sim, estamos ampliando um pouco e vamos desagrupar Lembre-se de que precisamos organizar a arte no Illustrator antes de animar qualquer coisa . Mente dada pela base. Então, vamos agora separar as camadas no fundo medalhão esquerdo separado pressionando o controle para que o termo seja completo Você também pode separá-lo. Se você quiser separar isso. Se você quiser, faça isso separadamente. E agora, depois disso, clique em fazer uma seleção. A camada está selecionada aqui. Estou desbloqueando o círculo roxo Então, basta escolher essa camada e atingir essas três linhas de hambúrguer Em seguida, desceremos até esta opção Release to Layers sequence. O que ele faz é basicamente criar cada elemento em uma camada separada. Então, basicamente, cada elemento está em uma camada separada. Agora, vamos apenas retirá-lo da camada principal. Então, tudo está sozinho. Ok, excluímos essa camada vazia. Basicamente. Agora temos nosso polegar em camadas diferentes e agora podemos animá-lo. Além disso, lembre-se de que não podemos usar obras de arte realmente complexas Só podemos usar cores e formas de preenchimento simples. Você não pode usar efeitos realmente complexos, como 3D ou qualquer outro gradiente de liberdade Porque basicamente converteremos essas camadas em formas dentro do Adobe After Effects No entanto, você entra nisso em um minuto. Mas, no entanto, é assim que você precisa organizar sua arte. E agora estamos prontos para animar isso. Ok, então saberemos, salve nosso arquivo. E deve estar no formato AAAI. Por favor, tenha isso em mente. Tente não usar o sag porque SVG não pode ser importado como uma composição Vamos salvá-lo chamando-o de botão curtir e salvá-lo. Ok, então o arquivo foi salvo. Agora, passaremos para o After Effects e iniciaremos a animação 5. Classe 04: recursos suportados. Criação de animação.: Ok, estamos de volta. Agora vamos animar nosso design. Então, vamos entrar nisso. Mas antes de começarmos qualquer animação, instalei o plug-in lottiefiles e também entrei na Você pode fazer isso apenas clicando aqui. Haverá um botão de login e, em seguida, você só precisará fazer o login no navegador. Portanto, antes de entrarmos em qualquer reunião, o design, há algumas coisas que devemos ter em mente antes de fazermos isso, e eu vou explicá-las agora. Em primeiro lugar, como eu disse essas animações são basicamente loterias, as animações são basicamente sim e as animações Então, basicamente, eles são arquivos de codificação, ok? Portanto, existem algumas restrições e algumas coisas que não podemos fazer. E o que são essas coisas? Bem, existem alguns recursos realmente incríveis do Adobe After Effects que não podemos usar. E você pode me perguntar quais são esses recursos? Bem, essas características são menores criar uma competição e associar homens Isso é criar um retângulo. Ou talvez, OK, então o que não podemos usar é apenas entrar em vigor e menos. Deixe-me mostrar que não podemos perder nenhum desses efeitos. Antes de tudo, lembre-se de que não podemos usar nenhum desses efeitos. Agora, isso pode decepcioná-lo, mas há algumas restrições porque o JavaScript não sabe que existem efeitos dentro do After Effects Isso porque esses efeitos não estão dentro da codificação, é basicamente uma criação do Adobe After Effects Esses não são registros universais da linguagem JavaScript. Ok? Então, basicamente, quando a animação está sendo reproduzida, como aqui neste site, ela não sabe. O JavaScript não sabe que foi criado no After Effects ou em qualquer outro lugar. Isso não importa. Existem certas regras de cada idioma que devemos seguir. As regras são que não podemos usar um Effects do Adobe After Effects. Então, vamos dar uma olhada em quais recursos podemos escolher e quais recursos podemos usar. Além disso, lembre-se de que, se você realmente vai trabalhar como profissional, tente não usar alguns recursos que tenham apenas uma cruz e cinco marcações Use apenas recursos que tenham apenas marcas verdes em todo o gráfico. Agora, por que estou dizendo isso? Porque às vezes, e eu mesmo testemunhei, vi muitas animações na plataforma lottieanimations, que ficam incrivelmente boas no PC ou na web quando eu as assisto no meu computador ou Mas quando eu entro no meu aplicativo móvel e tento visualizar essas animações, simplesmente não funcionam porque as pessoas usam, às vezes, às vezes usam tapetes alfa que não podemos usar e alguns tipos de recursos extras, como caminhos de deslocamento ou outras coisas que funcionam no Windows, mas não funcionam no iOS Então, tente não fazer isso porque, quando você está criando animações para pessoas ou seus clientes, o usuário pode estar em qualquer tipo de dispositivo Portanto, você deve ter isso em mente primeiro. Você está resolvendo os problemas deles. Você não quer que eles pensem que a forma como essa ajuda criou essa animação, ela funciona em algum lugar, mas não funciona em outro lugar. E os desenvolvedores também pensarão que você não é profissional porque não sabe como realizar o trabalho sem erros. Então, por favor, tenha isso em mente. Use apenas recursos que estão alugando. Agora, existem exceções, mas, por favor, 99% das vezes, use apenas professores permitidos em todos os tipos de sistema Ok. Então, modele camadas? Sim Basta dar uma olhada. Todas as formas são permitidas. Últimos em retângulos angulares. Poliéster, poliéster não é permitido. Então, nossa dívida, podemos agrupar as formas, então isso é bom. Não podemos usar caminhos de corte evitados pelo repetidor individualmente. Na verdade, não tenho nenhum problema em usar Trim Paths quando os uso simultaneamente. Portanto, tente evitar talvez usá-los individualmente. Agora, não tenho certeza de como isso afeta, porque tentei usar muitos centavos impressos nas minhas animações, mas elas sempre funcionam perfeitamente e eu também as testei no Windows Então, vamos verificar se agora falha. Podemos animar o rosto em opacidade de cor, regra de preenchimento, gradiente radial ou gradiente Então, tudo isso é perfeito. Mas não podemos usar nenhum gradiente de liberdade porque o oxigênio não está disponível no Adobe After Effects Portanto, lembre-se de que você não pode usar gradientes Freedom no Adobe Illustrator Ok, então vamos entrar em traços. Podemos usar tudo em um traçado ou em várias juntas e junções on-line e letras maiúsculas com opacidade e gradientes e Transformar. orientação automática não é permitida e você realmente não pode distorcer a animação Então, basicamente, o skew também não é realmente uma ferramenta útil. Nós nem mesmo fazemos isso. Então, vamos evitar isso e não orientaremos automaticamente o arquivo ou nossas camadas Vamos animar a posição separadamente. X e Y também são permitidos. Escala, rotação, opacidade do ponto de ancoragem, parentalidade, parentalidade são muito, muito úteis E é muito útil quando você está criando animações de personagens. Então, isso será muito útil em aulas futuras. Depois disso, há interpolações do que significa introdução, interpolação que significa introdução, Na verdade, a interpolação significa que há vários tipos de quadro-chave dentro do Agora, quais são esses quadros-chave para experimentar esses quadros-chave experimentar esses quadros-chave Então, esses são basicamente quadros-chave lineares no momento que estamos vendo Quando pressionamos F9, eles se tornam quadros-chave mais brilhantes. E quando pressionamos o controle, ou eles se tornam quadros-chave de espera E quando pressionamos apenas o botão de controle, eles se tornam quadros-chave de velocidade contínua Então, basicamente, todos os tipos de quadros-chave são permitidos nas animações de loteria Essa é a razão pela qual adoro o After Effects e quero usá-lo porque agora podemos realmente ajustá-lo como quisermos. E não haverá problemas nas animações de loteria. E também podemos mudar o gráfico. Também podemos editar o valor no gráfico de valores. Obviamente, essa é uma posição, então teremos que separar as dimensões aqui antes de animá-la Ok? Então, sim, podemos definitivamente fazer isso como, então. Essas são as quantidades que o After Effects tem a nos oferecer. Então, novamente, vá em frente e verifique as máscaras. As máscaras são permitidas, mas apenas para recursos. Subtraia, adicione a opacidade da máscara e o caminho da máscara. Então, o que isso significa? Quando criamos uma forma? Como você sabe, podemos criar uma máscara a partir daqui, mas usando essa ferramenta. Então, basicamente, podemos animar essa máscara assim. Podemos animá-lo para criar basicamente uma animação no estilo alfa fosco Em vez de usar o Alpha Matte, tente usar máscaras Por favor, não tente usar tapetes alfa porque eles criam problemas muito complicados. Assim, podemos animar a capacidade da máscara e usar a opção adicionar e subtrair em A partir daqui, usaremos o resto apenas para somar e subtrair. Então, por favor, tenha isso em mente. Vamos conferir a mistura. Como você pode ver, não podemos usar nenhum desses anúncios porque há uma cruz ou alguns pontos de interrogação. Então, vamos deixar o luma matte fora da opção e o Luma Inverted Matte também fora da opção no alfabeto e o alfa inverted mate Luma Inverted Matte também fora da opção no alfabeto e o alfa inverted mate está disponível, mas apenas em aplicativos móveis. Portanto, os usuários terão problemas quando você os usará. Você, quando os usuários visualizarem suas animações no Windows ou em qualquer outra tela da web Então, novamente, vamos conferir o Much, mas ele é permitido em qualquer lugar no Windows, mas não no iOS. Então, não vamos usar esses efeitos de camada. Então, basicamente, efeitos de camada só estão disponíveis para animações da web, mas não no Windows ou no iOS e Android Portanto, também não os usaremos porque você poderá criar animações para aplicativos móveis no futuro. E não é um bom hábito usar efeitos de camada. E depois disso, há TXT para texto. Eu gostaria de dar apenas uma dica: converta seu texto em camadas de forma. É isso mesmo. Tente não fazer mais nada com seu texto pois isso criará ou causará problemas. Então crie seu texto, finalize-o e, no final, converta em felicidade O Bliss funciona em todos os lugares. Eu também os vi funcionarem no iOS e no Windows. Então, talvez se eles forem convertidos por meio de conexão, eles causem problemas, mas se você os converter manualmente , eles não causarão nenhum problema Além disso, existem algumas outras características que são expressões. As expressões não são permitidas. Elipse, o truque de pré-composição que chega lhe trará Em seguida, combinando uma cena complicada. Então, essa é uma notícia muito boa. Estou tentando esticar, na verdade, não é necessário porque você deve criar a animação da maneira que ela deve ser criada, não apenas criá-la em 1 s e depois demorá-la por muito tempo, excluí-la da opção. O remapeamento do tempo também não é permitido. Então, vamos escapar de seus dois marcadores. Eu não usei nenhum deles em nenhum momento, mas talvez haja um diamante Eu vou usá-los. Então, sim Ok, agora uma coisa a ter em mente, que é muito importante, é que cada forma deve ser uma forma vetorial. Como discutimos anteriormente, essas animações são vetoriais escaláveis Portanto, para criar uma animação de Lottie sem nenhuma falsa, é muito importante que quaisquer camadas que você vai usar, elas tenham uma estrela como essa. Basicamente, o que essa estrela significa é que a camada é um vetor completo, ok? Então, basicamente, é uma camada de forma. Portanto, lembre-se de que essa estrela está disponível ou sua animação terá problemas. Agora, antes de começar a animação , notei um pequeno problema no arquivo. O arquivo era basicamente um gradiente linear. Mas depois convertemos um gradiente em camadas de forma dentro do After Eles realmente não funcionam bem. Eles se tornam cinza e não mudam a cor. Então, basicamente, teremos que usar cores planas por enquanto. Nesta aula, usaremos somente cores planas. Também existem maneiras de utilizar o gradiente, mas ele requer alguns plug-ins complexos e é muito complexo E isso será demais para essa aula para iniciantes, mas com certeza abordaremos isso nas próximas aulas avançadas Então, vou mudar a cor para gordura. É isso mesmo. Então, agora vamos apenas importar esse botão para o Adobe After Effects. Portanto, ao importar a peça, lembre-se de que usaremos a composição, não o tempo de gravação, mas usaremos não o tempo de gravação, mas usaremos usaremos E vamos escolher o tamanho da camada e clicar. Ok, e agora vamos criar uma nova coluna. Vamos dar um nome a ele. Animação. Botão. Pressione Enter e são apenas 500 em 500 pixels. Assim como nosso DNA. Agora vamos entrar em nossa composição de design e copiar todas as camadas pressionando Control C, e vamos colá-la aqui, controle V, onde você fecha a composição de design Agora vamos selecionar todas essas camadas e, como sabemos, precisa haver uma estrela aqui. Então, vamos percorrer essa grade de opções e acessar Criar formas a partir da camada vetorial. Ok? Então, apenas com esse clique, convertemos camadas em camadas vetoriais. Então, excluiremos as camadas do Illustrator. E agora, antes de animarmos algo, basta renomear algo, basta renomear O de baixo é um círculo. O do meio é o pulso, eu vou chamá-lo. E o superior é BOM. Ok? Então, qualquer um faz um círculo e nossas mãos separadamente. Nossa animação parecerá mais natural e interessante. Vamos ampliar um pouco e vou para o sexto quadro-chave Vou criar outro quadro-chave e vou para o número dez, e vou criar um quadro-chave novamente Agora, isso será capaz de encontrar uma posição e nossa estrela não deve ser do zero. Ok? Então, no meio, deve estar uma posição de ultrapassagem. E vou selecionar todos esses três e vou simplificá-los rapidamente e com a aparência. Bom o suficiente. E agora eu tenho quaisquer riscos médicos e quero controlá-los como se fossem uma camada. Mas eu não sou capaz de fazer isso agora. Então, como vamos fazer isso? Se quisermos fazer isso, vou em frente e crio um objeto nulo O que é uma coisa muito simples dentro do After Effects, se você já usou o não fornecido. Vou renomear este e chamá-lo manualmente de CTRL C. Ctrl basicamente significa controle. E quando estamos manipulando personagens, basicamente isso é o universal Sou códigos usados para controladores. E vou emparelhar essas duas camadas com esse controlador que criei no pulso. Ok, então agora está patenteado. Então, agora é só animar esse controlador. Admito sua rotação e escala. Então, vamos abrir essas duas propriedades e eu criarei e definirei seus quadros-chave Eu criei meu primeiro quadro-chave que também criarei o Middle Positions Overshoot. Vou adicionar mais rotação em talvez dez. E a posição inicial pode ser de cima, acho que Will entrará no círculo batendo Apertando o valor em -45 graus. Isso será reduzido para zero. Isso aumentará até 110% da balança, e eu usarei todas elas Veja como fica. Perfeito. Agora eu não quero que todos os elementos venham ao mesmo tempo. Então, talvez eu queira acrescentar algumas explicações. E eu quero adicionar uma lacuna entre a diferença. Ok. Então, antes de fazermos isso, gostaria de primeiro dizer que sempre que você estiver criando animações para seu portfólio, lembre-se de que você está criando essas animações em loops perfeitos, exatamente como esta que eu criei E no meu, no meu perfil, talvez haja uma ou duas animações que não são um loop perfeito Mas eu criei 100 para animações no total, que não são de perfil E centenas deles são. Tenho certeza absoluta de que centenas deles são loops absolutamente perfeitos Portanto, ao criar suas animações para seu portfólio, lembre-se de que será melhor criar loops perfeitos porque as pessoas poderão usá-los com mais facilidade do que Então, vamos criar nossos quadros-chave. Fecharemos nosso ciclo aqui porque não deve haver lacuna após a conclusão da animação. E agora não deveria voltar atrás. Ok, então talvez vamos ainda mais longe para que todo o intervalo seja de 1 s e a animação feche aos 2 segundos completos. Então, vamos prosseguir com quatro quadros-chave, 1234. Copiaremos esses quadros-chave um por um copiaremos e colaremos o Controle C e o Controle V. E continuarei Então Q filma a partir daqui. E vou colar tudo isso um por um também. Ok? Então, agora nossa animação é criativa perfeitamente. Agora vamos apenas adicionar alguns. Ok, então, como você pode ver, adicionar alguma lacuna realmente adiciona muito efeito. Então, basicamente, torna as coisas mais alinhadas e claras. E eu rastreio realmente funciona bem. Esse elemento está vindo depois do outro. Então, realmente faz sentido. Ok, então parece uma bagunça. Quando o círculo aparece na tela e o botão curtir aparece, parece perfeito Mas então, quando o círculo desce? O grande termo parece estranho. Acho que seria melhor se a língua falasse primeiro. Então, acabei de trazê-lo de volta à referência e eles estão no mesmo estado. Então, eu apenas trago esses dois quadros-chave, até mesmo dois quadros-chave até mesmo dois quadros-chave Portanto, haverá que dar a eles os EUA de cada lado. Então, agora você só tem um loop. Ok? Agora você pode ver que parece muito, muito melhor, certo? Ok, então vamos manter nosso cabeçalho em 1 s e 23 quadros-chave e pressionar N. E agora esse é o loop perfeito de 2 s. Como você pode ver, nossa animação parece perfeita. Agora é hora de exportar nossa animação no formato Lottie. Antes de fazermos isso, vamos apenas observar que os recursos do plugin lottiefiles apenas atualizarão E isso se aplica a todas as nossas colunas. Ainda não tenho certeza se o decomp, que está aberto aqui, ele mostrará todas as colunas que estão disponíveis dentro de um projeto Então, por favor, tenha isso em mente. Agora, nossa composição de botão de animação é aquela que tem mais animação Então, vamos clicar no botão Configurações. A primeira opção são os metadados do Lottie. Não nos importamos com isso. Então, vamos deixar que existe uma opção de expressão. Como você sabe, não podemos usar expressões, mas existe a opção de usarmos expressões e convertê-las em quadros-chave Mas vai aumentar em relação aos olhos de Lottiefiles. Então, o que não queremos fazer. Depois disso, há ativos. Ao usar a opção de ativos, podemos incluir imagens dentro de uma animação de Lottie, mas não queremos usá-las porque imagens rasterizadas não são realmente boas para animações de loteria Existem algumas exceções, mas somente quando chegar a hora, nós a usaremos somente quando chegar a hora Então, esse não será o caso em 99% de chances. Então, vamos deixar isso e selecionar para exportar camadas ocultas. Não há camadas ocultas. As camadas sabem que não há expressões seletivas apontando para composições externas. Não, elas não são tão antigas Agora vamos seguir em frente e clicar na seta. E como você pode ver, nossa animação parece perfeita. E há um botão de download, ok, abaixo disso, podemos salvar o espaço de trabalho de animação Você precisa criar um espaço de trabalho e , em seguida, clicar Carregar e a animação será carregada nele Ok, então nossa animação agora está carregada. Mas quando descemos e damos uma olhada aqui, como você pode ver, a sobreanimação é de apenas 5,8 kb E o tamanho escuro da Lottie de 1,8 Kb é realmente incrível. Ok? Assim, podemos baixar a animação clicando neste botão no formato JSON E podemos enviar isso para cliente baixando-o aqui. Talvez se fosse um projeto de um cliente. Depois que esse é lançado, há um recurso de suporte Jaeger, como podemos ver, nenhum problema encontrado É uma notícia muito boa porque usamos apenas os vencedores permitidos pelas animações do lottiefiles É por isso que não há problemas. Ok, estamos acostumados com recursos. Como você pode ver aqui, ele mostrará tudo. Mas usamos apenas os recursos que são muito altos. Então, isso é muito bom. Esta é a razão pela qual eu disse para você usar apenas os recursos permitidos pelo lottiefiles E abaixo está um gráfico aleatório, que eu nunca usei. E eu não sei o que isso significa, na verdade, porque talvez não seja mais o trabalho de um desenvolvedor. E abaixo disso, há uma cor de fundo que podemos mudar, mas absolutamente não, não mudaremos porque nossa animação deve ser quartos transparentes para que as pessoas possam usá-los em qualquer lugar sem mexer no fundo E a transferência do Begginer permitirá que eles a usem com muita facilidade nos sites e aplicativos móveis Então, basicamente, mesmo quando esse medo, as animações devem ser planos de fundo transparentes Vamos continuar em nosso site, nossas animações públicas E isso vai para outra classe. Basta atualizar nossa página. E, como você pode ver, a animação está aqui. Ok, então aqui estão alguns recursos que podemos usar. Podemos realmente recolorir, pois também podemos criar cores de quarto Podemos ativar como hotlinks. Então, basicamente, como você disse, essa foi uma animação exclusiva que você criou apenas para seu amigo. Você vai querer mostrar isso para o mundo. Você apenas habilita isso porque está limpo. E então você copiará o link daqui e que aparecerá. Dessa forma. Você também pode usar isso aqui e copiar esse código. E você pode simplesmente enviar esse código para seu amigo desenvolvedor. E eles poderão adicionar isso facilmente em seus efeitos. Então, se fizermos isso, você não quer fazer isso. Talvez você queira fazer o upload disso para o público. Você pode fazer isso pressionando o botão de compartilhamento e publicando na comunidade E você pode clicar em publicar. E a partir daqui você pode adicionar um título, talvez como o botão Curtir. E então você pode fazer o upload do arquivo After First, o que você não precisa. E depois disso, há etiquetas. Talvez tenha sorte. Talvez tipo bastão, talvez animação, talvez loop Portanto, isso aumentará as chances de suas animações de loteria serem baixadas Assim, você pode adicionar espacialmente quantos quiser, talvez o plug-in Lottie para Adobe After talvez o plug-in Lottie para Adobe After Effects marcar quais ferramentas usamos Usaremos o Adobe After Effects porque também o usamos. Você também pode usar o Illustrator. Se existe o Illustrator, essas opções, agora não há. Então, vamos dormir lá. Vamos digitar aqui uma descrição da nossa animação, que é a animação de um botão Curtir. E cumpriremos as diretrizes confirmadas e poderemos publicar, ter animação. E é assim que você pode criar suas próprias animações de loteria E desejo a você o melhor para criar sua primeira animação de Lottie publicá-la e compartilhá-la com uma bola e começar a chamar atenção e criar um portfólio muito bom Sinta-se à vontade para me marcar ao criar suas primeiras animações, Gagne nas redes sociais e meu perfil será Então, estou ansioso para criticar o trabalho. E, por favor, não se desencoraje pensando que meu trabalho é realmente incrível Lembre-se de que essas são animações de colecionador e na verdade, exigiam muito mais tempo e esforço para serem Essas animações requerem de quatro a 5 horas dentro do After Effects, existem várias camadas, então não era uma aula adequada para ensinar tantos trabalhos, mas com certeza trarei aula mais avançada na qual ensinarei essas coisas E você não precisa se preocupar com isso. Eles estarão disponíveis muito em breve. E talvez você possa continuar praticando enquanto isso com os ícones cada vez mais simples, assim como eu fiz Então, as pessoas também adoram essas animações. E eles também foram baixados há muito tempo. Há 15 curtidas na minha animação e ela foi baixada mais de 100 vezes ou mais de 50 vezes. Tenha um pouco de fé e comece a animar as coisas. E eu vou te ver muito em breve. 6. Mensagem final: Olá pessoal, muito obrigado por assistir meu primeiro curso. Peço desculpas pelo meu inglês porque não sou falante nativo E compartilhe seus comentários sobre o curso. E meu marco é conseguir dez alunos somente com esse curso E sempre que isso for alcançado, começarei a trabalhar na segunda curva , que será lançada logo depois Certifique-se de me seguir nas redes sociais para obter dicas e truques importantes. E estou ansioso para ver que vocês eram animações. E, por favor, cuide de si mesmo. E bolt Bite estará de volta em breve.