Introdução ao Rive | O que é Rive e como usá-lo?

1. Boas-vindas ao curso: Meu nome é Bold Bt e venho criando animações Lotti nos últimos cinco Sou um criador de arquivos Lotti, vencedor do torneio que foi hospedado em seu discord Também sou um especialista certificado pela Trem e, recentemente, acabei de me tornar um especialista em rios E acredito que agora é o momento certo para compartilhar minha opinião e compartilhar meu conhecimento ou experiência limitada que adquiri com as ferramentas e compartilhar o que aprendi até agora. E mostre o que Rife pode fazer, basicamente, e por que deveríamos nos preocupar em aprender E quais são as outras ferramentas com as quais podemos compará-lo e quais são as vantagens que ele nos oferece em vez de apenas usar outra coisa? Então, vamos entrar nisso. 2. O que é o Rive?: Ok, então o que é RIV, na verdade. Vamos começar do início e entender o que é RIV Então, vamos pesquisar no Google o que é RIV. Está bem? E vamos abrir nosso primeiro link e aprender o que é RV Vamos dar uma olhada nessas informações. RIV é um mecanismo interativo de design e animação que permite que designers e desenvolvedores criem animados e codifiquem gráficos responsivos em uma única Ok, ao contrário das ferramentas tradicionais de animação linear que exportam arquivos estáticos, uso do RIV é um sistema de máquina de estado para criar animações que reagem dinamicamente aos dados de entrada e gatilhos do usuário em e gatilhos Ok, então este é basicamente um site de RV, e o RIV basicamente oferece dois tipos de uso Você também pode usar o RIV no navegador e também pode baixar o aplicativo, que abordaremos em um minuto E então temos essas interações muito boas que você notará quando eu mouse sobre a parte direita do botão Basicamente, uma pata de gato sai desse lado, e se eu passar o mouse sobre o lado esquerdo, uma pata sai daquele lado, e se eu me afastar do botão, você verá que o gato está basicamente tentando me agarrar Então, isso é basicamente ativado usando a máquina de estado. E, basicamente, máquinas de estados diferentes estão conectadas a esse botão. Agora, o que é realmente uma máquina de estado, onde abordaremos isso com muito mais detalhes. Você pode ver que esse botão é muito bom e você pode ver como a animação está sendo executada sem problemas. Não tem atraso e é tão lindo, certo? E isso é realmente incrível. Assim como quando assistimos algo como Latte em um site ou algo que acabou de ser criado em uma base de código, talvez tudo funcione tão bem quanto agora Agora, por que estamos nos preocupando em aprender sobre RV? Vamos abordar isso um pouco agora. Podemos criar tudo isso dentro do RV, para que possamos criar animações para Então, vamos abri-las. Então, interface do produto. UI do jogo e, em seguida, também há aplicativos móveis. Então você pode ver que a Figma realmente usou o RIV para as animações da página de destino A metafia também usou animação. Bend Health também os usou, e você pode ver diferentes tipos de animações, certo? A noção também usou o RIV, e faremos uma comparação mais tarde sobre qual é a diferença entre RV ou Então você pode ver que todas essas animações são realmente criadas dentro do RV Agora, vamos dar uma olhada no que mais podemos criar nisso. Você pode ver que também pode criar uma interface de usuário de jogo. Então, sim, basicamente, você pode criar interfaces de usuário de jogos inteiras e, além disso, você pode ver várias outras coisas vinculadas aqui na análise. Discutiremos tudo isso com muito mais detalhes. Continuando, também temos aplicativos móveis, para que você possa criar a animação que é usada dentro dos aplicativos móveis. Ok. Então, do ponto de vista de um criador de lotes, o que o RV faz de forma diferente é basicamente uma ferramenta que pode fazer animação em palavras simples Ele também pode fazer muito mais coisas. Mas vamos simplificar as coisas por enquanto, para que você possa entender e digerir as informações com muita facilidade A propósito, essa é perspectiva de um designer Slash Animator que estou lhe dando Se você é um desenvolvedor e está assistindo a este vídeo, então o que eu recomendo é que você assista este vídeo de Isa Genus, e eu recomendo fortemente que qualquer pessoa que esteja em desenvolvimento ou tenha tocado em algum desenvolvimento, ou mesmo se você for apenas um designer, altamente recomendável que você dê uma olhada neste vídeo especial de Isa Gantus Espero que ela tenha abordado algumas coisas muito boas mais algumas coisas muito boas, porque eu realmente amo essa, e eu recomendo dar uma olhada no YouTube, porque isso vai realmente esclarecer sua mente de como realmente funciona o lado de desenvolvimento do Rise. Ok. Então, vamos seguir em frente e agora dar uma olhada em alguns dos exemplos que eu criei. Então eu criei essa animação interativa. Agora, algo realmente surpreendente aqui é que você não pode realmente recriar essa animação dentro de nenhum outro software que eu conheça, exceto o RV, basicamente Você não pode fazer isso. Obviamente, o deus do estúdio de Santa Monica não o usou para criá-lo, eu acredito Eles usaram algum motor de jogo por trás de tudo, obviamente, e talvez tenham construído tudo em código. Mas se você está trabalhando nisso, basicamente você é um desenvolvedor de front-end e gosta basicamente de animação e design de interface de usuário, esse tipo de coisa é feito o tempo todo para botões, animações de interface de usuário, e você também pode fazer algumas animações de personagens E, basicamente, há muitas coisas novas que você pode criar. Mas o interessante é que isso é em tempo real. Na verdade, isso não é um vídeo, ok? E outro exemplo é esse. Este também é o logotipo interativo de God of War, que eu animei e você pode ver. Que isso também seja interativo. Agora, você não pode criar essas coisas no Latte, por si só, e é isso que faz o Rive se e é isso que faz o destacar do Latte E a forma como isso é feito é basicamente usando a máquina de estado. E discutiremos isso em detalhes sobre como você também pode fazer isso sozinho. Mas isso é apenas uma introdução para mostrar o que o RIF é capaz de fazer? E é basicamente isso. Espero que você entenda o que Rife pode realmente fazer, e nos vemos na próxima aula Ok, então agora eu acho que você entende o que Rife pode fazer. Vamos para a próxima aula. 3. Lottie vs Rive: Ok, então neste vídeo, vamos comparar Rb versus Lotte Então, vamos seguir em frente e nos aprofundar nisso. Ok, então aqui, basicamente, temos a comunidade Late Files, e você pode ver que existem vários fóruns, basicamente vários, e você pode acessá-los. E sim, você pode basicamente aprender o que a comunidade está dizendo, o que a comunidade está fazendo. E você pode ver que, basicamente, essa é a comunidade deles. OK. E depois há o descarte do RV A propósito, RV também tem uma comunidade. Vamos seguir em frente e me deixar river a comunidade. Deixe-me abrir isso. Sim. Assim, podemos comparar algumas pequenas coisas. Ok, então esta é a comunidade para RV. Ok, então vamos em frente. Sim. Portanto, há muitas solicitações de recursos. Há uma conversa geral acontecendo. OK. Então, sim, vamos seguir em frente e agora falar primeiro sobre algumas coisas que devemos. OK. Então, no vídeo anterior, discutimos que basicamente podemos, sim, comparar RI com Lotte. Então, Lotte revolucionou a forma como os designers oferecem animações lineares leves para web O RI está resolvendo um problema maior. Nossa missão é fazer história nos gráficos 3D hardcore com um novo formato gráfico de uso geral para todos os softwares e interfaces de usuário, e a animação é apenas uma parte desse poder Com um otorrinolaringologista e um pipeline para projetar, criar e executar gráficos interativos em todas as plataformas, RIs supera os formatos lineares para permitir visuais interativos e responsivos Portanto, a renderização personalizada do Rive garante arquivos menores e desempenho mais rápido sem comprometer a liberdade do designer Guide compara RV e Late nas principais dimensões para ajudar as equipes a escolher a ferramenta certa para seu projeto Ok, então, como isso indica, RIV basicamente não está substituindo o Latte, Ambas as ferramentas oferecem diferentes tipos de soluções em palavras simples. Basicamente, o melhor para respostas e saídas interativas de interface do usuário são gráficos prontos para produção com interatividade orientada por estado e entradas ativas Como você pode ver, o botão de início do Ga está aqui, certo, exatamente como discutimos anteriormente. And Late é basicamente uma animação linear leve para sites de marketing e interações com aplicativos. SN traz animações lineares com interatividade limitada. Exatamente. E então você também pode fazer muitas coisas novas. Há um layout de responsividade, que você basicamente não pode fazer em Lotte Não é basicamente algo que você pode fazer. A vinculação de dados não faz basicamente parte do domínio Lott. Recentemente, eles introduziram tokens de movimento, mas isso não funciona exatamente da mesma forma que a vinculação de dados RIs. E a vinculação de dados RIs oferece muito mais complexidade e oferece resultados possíveis muito intuitivos. E depois há o anúncio da plumagem, onde vou falar um pouco sobre isso Depois disso, temos máscaras e sim, basicamente, são na verdade documentos, e essas coisas são basicamente adicionadas. Além disso, a PU acelerou a renderização . E então, basicamente, sim, vamos falar sobre isso. Você basicamente fará o design no Illustrator, animará no After Effects e depois exportará usando plug-in de movimento corporal ou também poderá usar o LatifiPlug in e, em seguida, executar o LatJSNFLE, que é basicamente o formato dot Jason. Discutimos tudo isso principalmente em meus cursos ou aulas anteriores. Você pode conferir esses. Se você quiser recomendá-lo fortemente, abordamos vários projetos complicados diferentes, e os princípios de animação da interface do usuário são, na verdade, os mesmos. A ferramenta basicamente oferece uma melhor execução. Em alguns casos, o lote é melhor ou o After Effects é melhor Em alguns casos, o RI vai ser melhor. Mas os fundamentos são os mesmos, então eu recomendo que você os confira se estiver interessado em aprender, principalmente sobre animação de interface de usuário, e obtenha todas as informações possíveis que você possa ter Então, eu recomendo fortemente dar uma olhada neles. E além disso, há basicamente a biblioteca. Você pode executá-lo basicamente em quase todos os lugares. Ok, além disso, eles têm alguns estudos de CSS e, depois disso, temos essa foto interativa também no site. Ok, então RIV e Lotti, a principal diferença é a diferença do pipeline Basicamente, o gasoduto Lotte é basicamente isso, mas o gasoduto RV é completamente diferente O editor é, na verdade, aquele que o RIV construiu. O formato é dot RIV. Não é apenas um formato estranho, como o JSON de pontos. Agora, não é ruim ter uma animação Json com pontos. Só que, na época, a tecnologia, na verdade, Henan Torosi, fundador da Lotti, criou o formato Late, e ele é criou o formato Late, e ele Eu tenho um grande respeito pelo cara, e ele fez um trabalho incrível. Mas ele simplesmente não foi criado para oferecer essa complexidade ou oferecer a interatividade que o RIV pode oferecer, na verdade Portanto, o formato dot RIV pode realmente ser exportado do próprio RIV Portanto, nenhum outro software realmente o exporta. Na verdade, o tempo de execução é criado por si só, pela equipe do Rive, e o renderizador também é criado pela mesma Abordamos muitos problemas diferentes aulas em que ensino todos os diferentes tipos de animações que podemos criar usando animações tardias usando After E nessas aulas, você verá muitas coisas que, na verdade, não estão traduzidas da maneira que deveriam Vemos outra coisa no After Effects e outra coisa na web. E é meio estranho, mesmo quando estamos usando os recursos suportados Mas esse não será o caso no RIV. Uso RV há mais de um ano, quase 1,5 anos, e nunca enfrentei um problema estranho como esse há um problema estranho Só há um problema estranho quando alguém não está usando o renderizador certo para o RIF. Às vezes, você precisa ativá-lo Quando basicamente eles lançaram o novo renderizador e tiveram que fazer algum tipo de troca, e naquele momento, houve alguns problemas, mas depois disso, não houve outros problemas OK. E se você tiver alguma informação sobre café com leite, saberá que ele não oferece brilho, basicamente, Um grande ponto positivo do uso do RI é que ele pode realmente oferecer difusão vetorial. Agora, o que é plumagem vetorial? Na verdade? Vamos pesquisar penas vetoriais em RV E, basicamente, é apenas uma ferramenta que basicamente permite adicionar desfoque, simples assim, certo? Mas você pode fazer muito mais usando o desfoque aqui. Você pode basicamente manipular os desfoques. Você pode criar todos os tipos de animações e ver efeitos muito bons sendo criados por elas, e o desfoque pode realmente ser Você pode ver que o mouse está se movendo e, basicamente, o cursor está sendo seguido pelo efeito de brilho, certo? Você pode ver coisas incríveis criadas usando os desfoques, certo? Agora, você não pode fazer essas coisas, principalmente usando Latte. Agora, essas são algumas coisas que mudam o jogo. Além disso, também há outras coisas que eu gostaria de abordar, que são: vamos frente e deixe-me mostrar aquele estudo de caso, que é, sim, esse , a noção Um. Tenho notado uma revolução muito interessante, digamos interessante, digamos que a Rive basicamente criou, que é que basicamente todas essas grandes empresas estão usando RV para criar a animação Agora, a noção é algo que a maioria das pessoas conhece e todas as animações de IA de seus assistentes são, na verdade , interativas e criadas usando RV Agora, ninguém está usando Lotte. Não sei o motivo por trás disso, mas na verdade experimentei o Lotte Creator sozinho e não acho que as ferramentas sejam realmente intuitivas. Por exemplo, em RV, basicamente, quando você cria uma animação, o que você pode fazer basicamente é começar de um estado de animação e depois entrar em outra linha do tempo Basicamente, vamos considerar que essa é a composição do After Effects, certo? Então, uma composição para outra transição simples assim. Mas Lotti não funciona dessa maneira. Em Lotte, você tem que trabalhar em uma composição e, em seguida, basicamente bloquear a área de trabalho, como faríamos no After Effects, e então você tem que reduzir essas seções e depois anexar essas seções e criar a animação. Não acho que seja uma boa maneira contornar isso porque eu a testei, mas também não adorei os resultados, e foi muito confuso usá-los para alguém com minha experiência que usa o After facts Não sei se sou só eu sendo tendencioso, mas, sim, eu realmente não vi alguns projetos realmente importantes criados recentemente dentro da Lotti Além disso, há uma coisa muito importante a ser mencionada aqui, que é que vamos verificar a plataforma de arquivos Lotti, ok E deixe-me te mostrar algo muito bom. Ok, então vamos dar uma olhada nos clientes. Sim, vamos ver todos os estudos de caso. Ok, então você verá aqui que diz faça um jargão, e vamos clicar nele E você pode ler muitas coisas aqui. Agora, como realmente R basicamente surgiu é que a história é basicamente simples. Basicamente, o Duolingo foi o primeiro cliente ou usuário do Está bem? E a equipe realmente começou a usar RV pela primeira vez, eu acho porque isso não é apenas informação inventada Go Rosso, que é basicamente o fundador da RV. Eles basicamente mencionaram isso em um podcast ou em uma entrevista. Sim, você pode ver com Rosso, CEO da RV. Então, o irmão gêmeo de Nutsure Luego, eu acredito, é o sim, Luigi oso, sim Então, esses dois são o CEO da RV e caras incríveis, na verdade, muito solidários e são realmente um dos CEOs mais fáceis de contatar Então, eu realmente aprecio a forma como equipe de RV está desenvolvendo a ferramenta e como eles são tão receptivos o tempo todo Então, é realmente algo surpreendente para mim. Também abordaremos isso com mais detalhes. Então, basicamente, o Duolingo basicamente está usando o RIV, e o RV basicamente não era Ele estava sendo usado apenas pelo Duolingo na maioria das vezes. E então, basicamente, o que realmente aconteceu é que algum outro animador discutiu isso com Guido que talvez eles devessem lançar porque outras pessoas também gostariam de usá-lo Agora, Joy Cornman, da School of Motion, também mencionou algo sobre RV que é realmente uma ferramenta incrível RV é a maior nova ferramenta para designers de movimento dos últimos dez anos Ele permite que você faça o que o Flash também usou, mas de uma forma muito mais poderosa. Agora, eu não sou tão velho que tenha trabalhado com o flash, para ser honesto. E, basicamente, quando lançaram o Rive, muitas pessoas ficaram muito felizes com o fato de o flash estar de volta e estar muito melhor agora Então, talvez alguém experiência suficiente no uso do flash saiba do que realmente se trata. Além disso, também houve alguns estudos com convidados realmente incríveis. Em primeiro lugar, o Duolingo, como discutimos, atualmente foi basicamente o primeiro cliente ou usuário de RF e basicamente mudou completamente para animações mudou completamente E o personagem duplo de Lingo basicamente pode fazer Agora estamos basicamente abordando o que R é possível fazer E, basicamente, se você ler todos os detalhes, notará que todos esses sons na verdade, são basicamente aparelhos bucais diferentes. Mas eles são basicamente conectados via back-end com a vinculação de dados Dessa forma, basicamente, você pode ver que eles realmente transformaram tudo, e a boca basicamente se move com base em como as palavras estão sendo ditas ou no som que estão produzindo, e a vinculação de dados basicamente aciona esses momentos bucais Agora, tudo isso está acontecendo em tempo real. O recurso de linguagem super duo, o recurso pago, na verdade permite que você faça uma videochamada com Lily E Lily está basicamente usando o recurso de vinculação de dados do R, o que é realmente surpreendente, e está basicamente falando com você E está basicamente ouvindo você e respondendo a você porque esses dados estão basicamente anexados à animação do Rive, e isso se traduz na animação, pois aciona diferentes entradas Está bem? Agora, pode ser muito difícil de entender. Mas, em palavras simples, digamos que o número um está de boca fechada. Deixe-me abrir um Figma e ilustrar isso melhor Ok, então vamos dar uma olhada no que eu estava tentando te dizer. Ok, então vamos dizer que isso é uma boca, e temos poses diferentes aqui. E isso é, digamos, a língua ou a boca fechada ou a abertura da boca, e então somos basicamente alguns sons diferentes saindo da boca do personagem, ok? E, basicamente, digamos que temos essas quatro entradas diferentes Está bem? Então, essas são apenas quatro bocas diferentes, vamos até uma e deixe-me ampliá-la. OK. OK. E, basicamente, isso serve apenas para simplificar os propósitos da ilustração, para que você possa entender os conceitos. Está bem? Então, digamos que essas são as quatro poses e elas precisam basicamente fazer malabarismos entre Agora, basicamente, quando o usuário está basicamente falando, Lily não está falando nada, certo? Então, basicamente, digamos que o número três é a boca fechada, certo, assim. OK. E, basicamente, este será ativado. Automaticamente porque os dados estão basicamente ouvindo e a animação tem a condição que, quando o usuário estiver falando, você precise ativar o número três. Mas assim que o usuário parar, você deverá responder usando sons diferentes. Então, digamos que esse é o som de A, e esse é o som de T, e esse é o som de F, certo? E então, basicamente, ele está tentando dizer cheio, então, para um quadro, ele mudará para ar F ou L. Por exemplo, algo assim. F 000 e, em seguida, L. Então, ele vai fazer isso automaticamente porque a ligação de dados está anexada a isso e a lógica foi criada dessa forma. E, basicamente, algo assim é criado em RV e você pode ver, você sabe, a ligação de dados sendo conectada uma à outra, certo? Então, algo assim. Você pode ver estruturas como essa na animação de RV o tempo todo Então, é assim que basicamente funciona no back-end. Agora, veja alguns outros exemplos de como o RI é realmente diferente. Está bem? E por que estou realmente pensando que poderia ser caso de uso potencial ou uma ferramenta que você deveria aprender para criar animações de interface de usuário. Agora, se você observar a comunidade Late ou a discórdia Late, verá que não há nenhuma atividade Você verá que há apenas uma mensagem em julho. Ninguém está respondendo. Este é, eu acho, moderador. Além disso, você pode ver que a comunidade está meio morta. Agora, eles anunciaram oficialmente que a comunidade mudou para cá Agora, vamos dar uma olhada no bate-papo e você verá que, em 22 de julho, há duas mensagens e, em seguida, temos 21 de julho, uma mensagem. E então, basicamente, você pode ver a diferença. Então, basicamente, todo o mês de julho ou um mês inteiro é basicamente coberto por 20 ou 30 mensagens. É isso mesmo. Então, basicamente, não há muita conversa na comunidade e não parece que muitos usuários ativos o estejam realmente usando. E mesmo se você pesquisar no LinkedIn, coisas assim, você não encontrará muitos casos em que as pessoas estejam criando coisas assim E talvez porque haja uma limitação nos recursos da loteria Além disso, não acho que haja nenhuma razão específica para isso. Talvez as ferramentas sejam limitadas porque há muitos recursos que não estão incluídos, além do desfoque ou da vinculação de dados Por exemplo, vamos dar uma olhada em outra coisa, que são malhas Então, vamos em frente e deixe-me procurar malhas no Rip, ok Introdução às malhas, mesh é Rye, basta abrir vários links para que eu possa mostrar o que podemos fazer Então você pode ver que pode criar essas estruturas estranhas e complicadas, certo? Então, basicamente, essas são imagens, imagens simples, você pode adicionar basicamente malhas em cima delas e, em seguida, coisas animadas de forma bem simples O Late não oferece esse recurso, e o formato Jason basicamente permite que você trabalhe apenas com o formato vetorial RIV basicamente também resolve esse problema porque você pode contornar malhas, e não resolve o arquivo, porque você pode ver que, como as malhas estão funcionando, você pode criar animações muito, muito complicadas muito complicadas E eu mesmo tentei. Eu não sou muito bom com malhas, então minha experiência é muito limitada com isso, mas não é Tenho certeza disso porque você pode ver aqui como isso é lindo, e isso é apenas uma imagem ou duas imagens ou apenas dividir algumas imagens no Photoshop, e então você pode simplesmente anexá-las aqui Uma coisa realmente importante a mencionar aqui é que você também pode inserir arquivos do Photoshop em RF e, em seguida trabalhar com eles , com bastante facilidade E se houver efeitos adicionados sobre essas camadas, eles basicamente não criam muitos problemas. Além disso, uma coisa muito importante a mencionar aqui é que existe outra ferramenta no RI, conhecida como ferramenta óssea, que na verdade oferece o equipamento, e você pode montar basicamente usando o que quiser E isso é algo realmente incrível. O Late não oferece todos esses recursos. Você não pode criar animações realmente interativas e criar animações de personagens é realmente uma preocupação aqui, porque todo mundo está tentando criar um novo Lingo duplo porque o Lingo ou basicamente a tendência da interface do usuário mudou muito nos últimos anos Basicamente, nem todo mundo está tentando criar o aplicativo mais minimalista Mesmo que algo como Notion, que é basicamente conhecido por seu minimalismo, também esteja usando um mascote animado aqui, que representa sua IA, E a maioria da empresa está basicamente tentando adotar uma abordagem de animação de mascote em que toda a identidade esteja basicamente ligada a um mascote ou personagem que basicamente guia o usuário Por exemplo, há um exemplo muito bom que é Byte Paul, algo semelhante ao personagem do Duolingo e você pode E com toda a probabilidade, acho que isso também foi criado no RIV Não tenho certeza porque isso não foi mencionado em algum lugar, mas se você pesquisar em algum lugar, também poderá encontrar o tema por trás disso. OK. Além disso, você também pode anexar áudio. verdade, eu não usei áudios usando o Late Na verdade, eu não usei áudios usando o Late porque o Lot realmente exporta o áudio em um arquivo separado Mas, na verdade, isso volta à mesma discussão que foi mencionada aqui. Toda a animação, efeitos sonoros, tudo está dentro de um único arquivo, o arquivo datery, mas esse não é o caso quando você está exportando um arquivo JSON porque o arquivo de áudio é exportado separadamente E então você tem que dar isso ao desenvolvedor, e ele terá encontrar uma maneira ou anexá-la de alguma forma, você sabe, também uma coisa muito importante a ter em mente é que Lottie não oferece interatividade, enquanto o que realmente o RIV melhora é o que basicamente é o grande benefício de usar o RIV é o aspecto de resolução de problemas, ou seja, está criando a animação, você não precisa, não é só a ferramenta pode fazer animação interativa. A ferramenta basicamente permite que você adicione todas essas interações dentro do criador ou do próprio software. Então, basicamente, você não precisa causar muita dor de cabeça ao desenvolvedor ou à equipe de back-end. Basicamente, você pode adicionar toda a interação aqui, então basicamente ela pode ser gerenciada pelo animador, o designer de barra e o desenvolvedor que está fazendo a que está fazendo a Você pode criar toda a lógica aqui e, basicamente, basta anexar todos esses dados ao back-end É isso mesmo. Bem simples. Você não precisa digitar nas condições em que, se o mouse estiver aqui, basta aumentá-lo. Você não precisa fazer tudo isso. Você não precisa passar por toda essa dor de cabeça e, basicamente, o que estamos tentando fazer como animador ou designer é basicamente resolver problemas complexos E se você vai criar outro problema para seu cliente , basicamente não está agregando valor ao projeto ou você não está basicamente se tornando um solucionador de problemas para o projeto ou para o cliente, certo? Então, o incrível aqui é que você lida com tudo isso sozinho , não está apenas criando bagunça extra para a equipe de desenvolvimento lidar E uma coisa realmente incrível aqui é que você também pode ver coisas assim que também sinalizam os problemas Há um console que realmente mostra o que você está realmente fazendo na animação. Está bem? E então você também pode fazer alguns testes aqui. Há algumas mudanças. Há tanta coisa de Rive que você pode fazer E também uma coisa muito importante a mencionar aqui é o aspecto comunitário, ok? Agora, como há muita discussão em andamento, digamos que a maior parte dessa pesquisa está basicamente morta agora, talvez porque eles tenham se mudado para cá, mas você pode ver que não há muita discussão acontecendo aqui também Mas vamos compará-lo com a comunidade de chegada. Agora, você pode ver, vamos rolar para baixo e ver quantas mensagens ou bate-papo estão acontecendo por dia. Então, é o primeiro dia, e estamos subindo, estamos subindo, estamos subindo. É o segundo dia. E então temos o dia três, e então você tem o dia quatro. Agora, e não há muita coisa acontecendo neste dia. Então, obviamente, isso acontece. E então, sim, muitas mensagens. E você pode ver que as pessoas estão basicamente compartilhando e criando coisas. Agora, deixe-me voltar para o Late Community ou Chat. Você realmente não vê pessoas mencionando coisas assim. Então, aqui, algum problema é mencionado. Fora isso, na verdade não são coisas criadas pela comunidade, certo? E enquanto que, vamos apenas Jac chegar à comunidade, você pode ver que há muita coisa acontecendo Está bem? E algo realmente surpreendente aqui é que é muito mais fácil entrar em contato com a equipe. Você também pode marcar Guido. Ele é basicamente o fundador da equipe ou basicamente o fundador do Rive, como discutimos E eu estava basicamente passando por alguns problemas porque estava tentando enviar um contra-desafio, mas na verdade não consegui encontrar uma opção na ferramenta. E Guido basicamente me respondeu porque em uma hora, eu acho, e se ele não entrar em contato, outra pessoa da equipe o fará Portanto, há um apoio constante, o que é realmente incrível. E a parte mais chocante para mim é que eu agradeço muito à equipe que eles enviam as atualizações muito, muito rápido Tipo, basicamente, o RV basicamente atualiza o software semanalmente E eu não estou brincando. Às vezes, ele também é atualizado duas vezes por semana. Basicamente, às vezes eles estão apenas depurando algumas coisas. Às vezes, eles estão adicionando um pequeno detalhe que a comunidade solicitou. Além disso, basicamente, você também pode compartilhar seu trabalho. Para que você possa compartilhar, você pode ver que muito trabalho está sendo compartilhado aqui. Certo. Então, as pessoas estão basicamente criando shows inteiros por dentro, como você pode ver aqui Mas eu não vi todas essas coisas usando café com leite. E, na verdade, acho que será a conclusão final disso é que empresas como a Spotify também usaram Agora, o que eles usam é realmente interessante wrap do Spotify é algo que as pessoas esperam no final do ano E eu acredito que você entende o que é o Spotify Arab , onde basicamente você entende ou basicamente verifica que tipo de música você estava ouvindo o ano todo e basicamente, essa animação árabe do Spotify foi criada usando E algo realmente interessante de se notar aqui é que o Spotify tem muitos ouvintes ou usuários E, basicamente, a vinculação de dados foi, por exemplo, anexada. Para o perfil do usuário, por exemplo. Então, porque todo mundo basicamente verá seu rosto no Spotify, certo, ou todo artista na plataforma será realmente adicionado à animação do Spotifyer Então, isso é feito basicamente por meio do uso de vinculação de dados. Por exemplo, se voltarmos aqui, vamos criar quatro círculos para dizer que temos quatro artistas, certo? Então, basicamente, o que temos aqui é que agora definitivamente há muito mais artistas do que quatro, mas estamos apenas tomando isso como exemplo, certo? E, basicamente, o que realmente está acontecendo é que, por meio da vinculação de dados realmente está acontecendo é que realmente está acontecendo é que, digamos que eu ouço esse artista, certo? Agora, chegue, basicamente, o Spotify tem meus dados. Agora, basicamente, criará minha animação com base no que estou ouvindo ou em qual artista estou ouvindo. Agora, a foto do perfil atual desse artista será anexada ao meu maior número de ouvintes ou o artista que eu mais ouvi será adicionado aqui ao meu maior número de ouvintes ou o artista que eu mais ouvi será adicionado Então, basicamente, o espaço reservado dentro dessa animação é basicamente um espaço reservado Basicamente, responderá a cada criador que a plataforma tem. E uma vez que corresponda a esse ponto de dados, basicamente escolherá esse ponto de dados. Agora, não vamos ver tudo isso definitivamente porque o RI é muito, muito bom. E por que isso? Porque, como discutimos anteriormente, ele tem seu próprio pipeline. Portanto, a animação funciona muito bem. E nós realmente não vimos nenhuma reação negativa de que a animação tenha quebrado, você sabe, quero dizer, se uma equipe gosta de um Spotify usando alguma coisa, então eu não acho que haja motivo para se preocupar E o Duolingo era basicamente o OG das animações de mascotes no campo da interface do usuário, e basicamente o produto deles é o produto mais animado da Internet, E se essas ferramentas estão usando, quais são as principais ferramentas, como se fossem o 1% melhor, certo, em seus domínios E se eles estiverem usando essas ferramentas, acho que estariam usando as melhores ferramentas porque também são os melhores caras ou as melhores empresas em seus domínios ou áreas de especialização, certo? Então você pode ver que eles também estariam pensando em criar a animação em algo que é um rótulo de escala, e definitivamente é um rótulo de escala, e é por isso que eles usaram o Rive em vez de usar qualquer outra coisa Então eu acredito que isso abrange tudo o que Ri pode fazer, o que Lotti E eu acho que isso abrange tudo o que Lotti não pode fazer, mas, em vez disso, Rf pode realmente Então eu acredito que agora você tem a compreensão do que Rife pode realmente fazer e do que Lotti E acredito que você tenha feito algo novo neste vídeo. Vamos passar para a próxima. 4. After Effects vs. Rive: Ok, agora vamos comparar o After Effects com o RIV. Então, vamos dar uma olhada no After Effects. Em primeiro lugar, realmente, coisa muito importante é que, no After Effects, você tenha muitos plug-ins e scripts. Agora, o script também foi adicionado à RI, mas não funciona da mesma forma Basicamente, existem ferramentas e extensões pré-fabricadas e coisas assim. Agora está dentro do Aftereffects, definitivamente porque também é uma ferramenta muito mais antiga Além disso, o caso de uso ambos os softwares é muito, muito diferente. Agora, como o aftereffects é um software de composição ou software de animação 2.5 e é basicamente criado para duas animações em D ou três animações ou composição em D, basicamente, você pode fazer muitas coisas no After Effects. um software de composição ou software de animação 2.5 e é basicamente criado para duas animações em D ou três animações ou composição em D, basicamente, você pode fazer muitas coisas no After Effects. Você pode criar vídeos explicativos, você pode fazer animação de personagens Você pode fazer composição, um ótimo exemplo do que realmente é usado Um ótimo exemplo do uso do After Effects é Jalex Rosa, que é basicamente um diretor de composição. Eu o considero basicamente diretor que cria basicamente todas essas animações. E se você realmente assistir a um dos vídeos dele, notará que ele basicamente faz a composição final dentro do After Effects, e o resto do vídeo é criado em blenders, às vezes coisas desse tipo em enopod, e às vezes animação quadro a quadro, coisas assim , mas o resultado final é na verdade composto dentro do notará que ele basicamente faz a composição final dentro do After Effects, e o resto do vídeo é criado em blenders, às vezes coisas desse tipo em enopod, e às vezes animação quadro a quadro, coisas assim, mas o resultado final é na verdade composto dentro do After Effects. Então, coisas de ação ao vivo, vídeos explicativos, coisas assim são, basicamente, vamos dar uma olhada em diferentes exemplos de vídeos explicativos Agora, digamos que essa cena teve que ser criada em RV Agora, definitivamente, você pode criar isso no Rive. Mas se você quiser criar algumas transições realmente mágicas, você quer contornar cinco exemplos de apenas 60 segundos de animação, certo? Idealmente, não é a melhor ferramenta, pois foi criada para animação interativa, não para vídeos explicativos Agora, da mesma forma, o After Effect é criado para composição e animação complexa, não para animação interativa É por isso que não oferece o formato Dottery. Agora, Hernan Tosi é basicamente o fundador do plug in de movimento corporal e também inventou o formato Late Jason E algo realmente importante a destacar aqui é que, como a empresa está evoluindo muito, essa também é uma notícia empolgante de que, basicamente Hernan Tosi também se juntou à Rive, aliás Então, o fundador do Flat Hernan Torisi se junta à RV. Vamos ler um pouco sobre isso também. Então essa é a lenda em si. E você pode ver, como ele diz, quando encontrei Rive pela primeira vez há alguns anos, eu estava navegando pelo site deles Em todo o conjunto de ferramentas que eles desenvolveram , conheci Guido e Luigi, basicamente os CEOs chefes que compartilharam seus planos E foi um momento de cair o queixo, interatividade, o editor, máquina de estado, os ossos, as restrições e muito mais, e muito mais Eu me tornei um fã instantâneo e venho acompanhando o progresso deles desde então. Quando me convidaram para fazer parte da equipe, fiquei entusiasmada com a oportunidade, mas por motivos pessoais não pude aceitar naquela época passar do tempo, o R se tornou uma ferramenta ainda mais incrível, com todo mundo falando sobre ela e usando-a cada vez mais. Finalmente, as coisas se alinharam e eles tiveram a gentileza de estender a oferta mais uma vez Eu disse imediatamente, e esta semana começa minha jornada com um projeto e uma equipe incríveis. Ok. E, basicamente, esse post é de 16 de outubro de 2023, certo? Então, agora, isso também é algo realmente surpreendente para mim, quero dizer, talvez não houvesse mais tanto potencial no Latte que Hernan também se juntasse à Rive Ou talvez ele pudesse ter pensado que, por que não inventar algo semelhante a isso, mas usar Latte em vez disso ou desenvolver algo parecido Não sei por que ele não fez isso. Eu não sou o especialista aqui, mas o ponto positivo aqui é o lado positivo da história ou a parte boa da história, ou seja, deve haver uma razão pela qual um especialista como ele realmente se juntou a Ri, certo? Então, é como se ele pudesse ver a visão ou a atualização ou, quero dizer, alguém que basicamente desenvolveu Lotte. Se ele entendesse que o R tem tantos recursos ou atualizações interessantes e estivesse entusiasmado em se juntar à equipe, então, obviamente, há algo sobre a ferramenta, certo? Ok. Então isso era algo que valia a pena mencionar, então pensei, vamos fazer isso, ok? E agora, em relação ao RV ou ao Lotte, algo realmente importante que devo mencionar, é que eu criei todas essas animações dentro do After Effects usando o After Effects, basicamente e depois exportei usando o movimento corporal, conecte-o Agora, se eu tivesse que criar algo assim, eu ainda escolheria o After Effects. Por quê? Porque o gerenciamento de camadas é muito fácil e vai me poupar muito mais tempo. Atualmente, o gerenciamento de camadas no RIV é horrível. Talvez mais ferramentas de atalho sejam adicionadas, talvez fique melhor Não tenho certeza, mas atualmente, se houver 400 camadas, é muito mais fácil gerenciar todas essas camadas dentro do After Effects se você as comparar com o RIF E por que eu escolheria algo assim ou um trailer? Porque quero dizer, o RV oferece muito mais recursos, você pode fazer muito mais coisas. Eu só escolheria isso nos casos em que não quisesse nenhuma interatividade Se eu quiser criar algo que seja uma animação perfeitamente repetida, então eu só vou escolher o After Effects, basicamente Está bem? Porque eu posso ajustar um editor gráfico com muita facilidade. Existem teclas de atalho. Existem extensões, existem plugins, existem scripts. Basicamente, posso simplesmente compensar os quadros-chave, coisas assim, muito fáceis de fazer Eu não posso fazer tudo isso facilmente R. Algumas dessas coisas têm que ser feitas manualmente. Então, essas são as principais diferenças, eu diria, entre as ferramentas. Além disso, se um projeto exigir algo como dizer que você precisa adicionar interatividade a alguns elementos, mesmo que seja um botão, certo? Ou mesmo que seja um personagem que tem três pausas, feliz, irritado e triste, talvez, você sabe, coisas assim , então definitivamente você terá que fazer essas coisas em RIV Agora, você pode dizer que, se estiver criando algo como, digamos, a animação dual olingo, certo? Se você estiver criando algo assim, deixe-me voltar para a página do Duolingo Está bem? E se você estiver criando uma animação como essa, que é muito complicado agora, nesse caso, digamos que há 400 camadas com as quais você precisa trabalhar. Agora, nesse caso, porque você tem que trabalhar com interatividade, quero dizer, você terá que comprometer o gerenciamento de camadas Você realmente não pode fazer algo sobre isso. Então, o ponto chave aqui é que o que você está realmente tentando criar, ok? E se o resultado final for algo de animação interativa, então, definitivamente, vá para o RIF, ok? E em relação ao design, eu recomendo fortemente que, em vez de usar o Illustrator, tente usar o Figma porque isso também funciona muito bem Ou, basicamente, você pode simplesmente copiar e colar, exportar SVG do Illustrator também para o Figma e, em seguida, ou basicamente exportar o SVG e depois soltar o SVG com o dragão e trabalhar com ele Agora, vamos discutir tudo isso em detalhes, mas se você estiver trabalhando ou criando algo como, basicamente, se você vai trabalhar com as animações da interface do usuário, talvez seja o design da interface que foi criado no Figma Então você pode realmente copiar e colar coisas do Figma, com muita facilidade Definitivamente, estou esperando por alguns plug-ins para tornar as coisas muito mais fáceis Por exemplo, sobrecarga do Battle x, certo? Acho que eles têm planos na verdade, de criar sobrecarga para a chegada Então eu ainda estou esperando quando isso acontece, porque então você pode clicar em um clique e então, você sabe, tudo está pronto Então, estou realmente ansioso por esse momento. Então, eles mencionaram esse detalhe em algum lugar. Não tenho certeza se conseguiremos encontrar isso ou não, mas quando eles lançaram isso, eles realmente mencionaram isso Na verdade, não consegui encontrar a parte em que diz que eles também têm o plano de criá-la para o RIV Mas eles definitivamente mencionaram isso, mas como acho que eles atualizaram sua página de destino, não consegui encontrá-la. Então, basicamente, é isso. E acho que abordamos tudo relacionado aos efeitos posteriores e à comparação disso com o RV Ok. Então, essa é basicamente a comparação entre RV e After Effects Espero que vocês entendam claramente que, quando a interação entra, After Effects não consegue lidar com isso. Além disso, o After Effects é uma ótima ferramenta para criar animações complexas, mas simplesmente não consegue lidar com a interatividade E é isso. 5. Introdução ao Rive: OK, então agora vamos seguir em frente e fazer uma pequena introdução sobre o RV e vamos explorar o RV Ok. Então, vamos continuar e criar um novo arquivo. Vamos continuar e mantê-lo do mesmo tamanho e, em seguida, criar painéis duros Ok, então agora, basicamente, você notará, em primeiro lugar, existem essas abas de design e animação, Portanto, o design e a animação são tratados separadamente. Outra diferença entre After Effects e RV, certo? Ok. Além disso, existe essa hierarquia A principal diferença aqui é que as animações são basicamente conhecidas como linha do tempo em vez de composição Então, por favor, tenha isso em mente. A linha do tempo é igual à composição. É isso mesmo. Além disso, uma coisa muito importante a ter em mente é que, depois de adicionar um círculo, por exemplo, digamos, certo? E nós temos essa cor aqui. Opa, temos que estar no modo de design. Por favor, tenha isso em mente. Está bem? E então deixe-me remover esse quadro-chave E então, basicamente , temos isso aqui. Está bem? Agora, você notará que temos essa elipse aqui, e vamos chamá-la de Ok. Agora vou pressionar Y, e basicamente funciona da mesma forma que no After Effects. Basicamente, temos a ferramenta gratuita aqui, ok. E agora vamos seguir em frente e cobrir todas as ferramentas. Só me dê um minuto. Primeiro, basicamente, quero mostrar algo realmente importante é que você pode pressionar Tab no teclado e alternar entre a linha do tempo E o design e a animação. Ok. Simples assim. Sempre que estiver fazendo algum design, lembre-se de que você deve estar na guia Design. Caso contrário, se você criar algo aqui, por exemplo, se eu mover para cá, se eu voltar, você não verá essas mudanças no design; na verdade, ele adicionou um quadro-chave aqui Agora vamos discutir isso em detalhes, mas apenas para ter em mente que isso é realmente muito importante. Uma coisa muito, muito importante a ter em mente é que, embora não importe muito se o tamanho do café com leite ou o tamanho da composição do café com leite é exatamente o mesmo que os desenvolvedores perguntaram se não há espaço negativo ao redor do seu design, o desenvolvedor pode basicamente aumentá-lo e diminuí-lo Na verdade, não vai te dar muita dor de cabeça, mas esse não é o caso do RB. Não é porque você não pode aumentar ou reduzir a animação. Se a camada for SVG, ela permanecerá SVG, então permanecerá vetorial Não é que essa ferramenta exporte apenas animações em imagens rasterizadas. Não é o caso. Por favor, tenha isso em mente. Mas só porque a integração é um pouco diferente, é melhor ter algo organizado, algo mais organizado e algo que realmente se encaixe no produto com muito mais facilidade. Ok, agora, primeiro temos essa ferramenta, que é a ferramenta de seleção, basicamente nosso mouse, depois temos a tradução. E depois de selecionarmos isso, vamos clicar aqui. E então, basicamente, o que podemos fazer usando isso é que, para ser honesto, eu realmente não o uso porque eu apenas uso meu V. É isso, e eu realmente não usei a chave de tradução. Depois disso, temos a chave de rotação. Definitivamente, podemos usar isso para girar. E depois disso, temos a escala, que podemos usar para fazer a escala. E é muito importante notar que estamos apenas alterando o valor da escala Não estamos alterando o tamanho da origem do caminho da elipse. Ok, realmente, é muito importante ter isso em mente. Uma coisa realmente incrível aqui é que, uma vez que você clica nos vértices, obviamente, sabe que atualmente é uma bola, mas estamos convertendo isso em um caminho Uma coisa muito importante aqui é que se você entrar nos vértices de pontos, poderá realmente trabalhar ou editar cada vértice e, basicamente, animá-lo E, na verdade, outra coisa importante é que, depois de selecioná-la, por exemplo, digamos que você enfrentará esse tipo de problema ao animar algum tipo de cabelo no personagem ou quando estiver realmente tentando animar um caminho ou rosto de um personagem, ou talvez apenas o braço esteja sobreposto ao corpo, você terá que selecionar vários pontos de ancoragem Arrival oferece uma ótima maneira de realmente selecionar os pontos de ancoragem, e então você pode basicamente soltá-los para basicamente mudar a forma do caminho e também basicamente deformá-lo para criar algo que você goste mais, você sabe Então, parece muito bom. Ok. Além disso, algo muito importante, outra regra. Basicamente, isso é uma espécie de regra, você sabe. Então, sempre que você estiver fazendo qualquer tipo de projeto, você deve ter essas coisas em mente. Não importa o que você está tentando criar. É melhor seguir todas essas regras para praticar. Agora, quando você tiver criado toda a sua obra de arte, digamos que tínhamos duas bolas aqui, certo? E digamos que atingimos 50 50, certo, ou vamos baixar para 20 ou sim, 20. Nós temos esses dois. Temos que agrupar esses dois, ok? Basicamente, o que podemos fazer é movê-lo, certo? Se digamos que eram dois olhos, também queremos mover a camada do grupo. O que você terá que fazer é agrupá-lo novamente e, basicamente, chamá-lo de root. Agora, faça isso toda vez que estiver criando uma animação dentro do drive e crie um grupo raiz em que tudo dentro dele basicamente permaneça lá. Por quê? Porque caso algo tenha acontecido mal ou talvez esteja um pouco desalinhado Você pode simplesmente clicar no grupo raiz e trazê-lo até aqui. Ou você pode basicamente movê-lo da maneira que quiser, ok? Então, isso realmente vai ajudar nessas maneiras. Então, como discutimos você pode pressionar Shift e selecionar as camadas e, basicamente, você pode selecionar várias camadas e, em seguida, criar layouts automáticos também, mas não vamos entrar neles Além disso, existe a animação solo, que pode ser usada às vezes também para botões ou também para animações pose a pose, onde às vezes um personagem basicamente muda seus olhos de um estilo para outro, basicamente, então ele pode ser usado ou se o personagem está mudando de braço, você sabe, por exemplo, se temos um assim, então temos um braço para Digamos que o personagem tem esse primeiro braço onde temos basicamente o personagem em uma cor azul, você sabe, agradável e calmo, e então temos o personagem em um modo raivoso, você sabe, vamos dizer algo assim, mas com uma forma estranha, você sabe, assim Mas eu quero que o personagem desloque esses braços. Então, um pode ser ativado por vez, certo? Então, o que eu posso fazer é clicar aqui, entrar em solo, e eu posso simplesmente criar um solo como este, ou o que eu posso fazer é basicamente controlar G e seguida, clicar com o botão direito do mouse aqui e depois converter para solo. E então eu posso basicamente habilitar uma camada por vez. Lembre-se de que o grupo tem o direito de origem e, se você alterar essa origem, tudo dentro desse grupo também segue essa origem. Então, isso é realmente importante ter em mente, e você pode ver, quando eu mudo a camada dentro dela e depois volto e a edito, você pode ver que o braço está se movendo da mesma maneira. Portanto, isso pode ser útil ao criar animações de personagens. Ok, seguindo em frente, temos o componente. Então, basicamente, isso é como pré-composição interna após o efeito, como você diz Agora, funciona um pouco diferente. Ou se você trabalha no Figma, basicamente, funciona da mesma maneira Os componentes funcionam. Mas também há tantos recursos adicionais aqui que você pode usar o mesmo componente. Mas se você tem, você sabe, criar um site, existe um recurso conhecido como CMS, onde você pode manter o mesmo elemento mas alterar os dados dentro dele Então você também pode fazer coisas assim com isso. E esse é um tópico muito mais detalhado, então discutiremos isso em uma aula posterior. E depois disso, temos ferramentas simples de camada de forma. Temos a ferramenta caneta, certo, coisas simples, coisas bem simples. Se você já usou alguma ferramenta de design, ela funciona da mesma maneira. E uma coisa interessante aqui é que você pode basicamente selecionar qualquer ponto de ancoragem e ajustar como ele basicamente pode ser manuseado, sabe Então você pode anexá-lo, anexá-lo, coisas assim, coisas bem simples, nada muito complicado. E, novamente, você também pode pressionar e fazer todas essas coisas. Está bem? Da mesma forma que você pode fazer isso no Illustrator Então, coisas bem simples, nada muito complicado. E depois disso, temos a ferramenta de texto. Ferramenta realmente poderosa, você pode fazer muito com a ferramenta de texto. E uma coisa muito importante a ter em mente é Um que a ferramenta de texto em , RI basicamente oferece todas as fontes do Google. Então, se algum produto é construído usando alguma fonte que está no Google , isso é realmente uma grande vantagem. E você pode basicamente selecionar essa fonte aqui. Vamos procurar o Inter, por exemplo. Ok, então isso já está selecionado. E então você pode escolher, digamos, um texto diferente. Ok. E você pode fazer muitas coisas, na verdade, com isso também. Por exemplo, você também pode animar esse peso. Então você deve ter visto aquelas animações em que o texto basicamente fica, sim, grosso e depois fino, sabe? Então, você pode basicamente fazer um loop. Ok. E depois há recursos e coisas assim, que eu realmente não abordei porque não havia necessidade até agora. Ok. Então, temos a ferramenta de texto. Temos muitas coisas diferentes. Então, basicamente, assim como os modificadores de texto funcionam basicamente como animadores de texto no After Ok. Então, algo semelhante a isso, podemos adicionar algo diferente. Você pode ver que o intervalo está basicamente sendo afetado, certo? E então você pode basicamente adicionar coisas como opacidade, posição de rotação, coisas assim Então, deixe-me clicar em offset assim. Ok. E então deixe-me tentar fazer isso. Ok, então o intervalo deve ser 0 a 100 e então você pode ver como a animação está sendo criada Ok. Agora, definitivamente, esse é um tópico muito mais profundo. Isso é apenas para mostrar como você pode fazer isso. Está bem? Então, só estou dizendo onde realmente é a interface. Depois, temos a ferramenta Bond, usada basicamente para animação de personagens. Simples assim, você pode adicionar ossos, coisas bem simples. Ok. E então temos basicamente a ferramenta de peso. Basicamente, ele pode ser usado para adicionar ou deslocar pesos ósseos. Então temos o evento. Evento é basicamente algo que pode ser acionado e algo que está acontecendo dentro de uma composição, por exemplo, ou no Canvas, então ele pode basicamente acionar isso com uma entrada do ouvinte É difícil de explicar. Será melhor mostrar um exemplo para você. Basicamente, é como um botão de campainha, digamos, para que os dados realmente detectem que algo está sendo acionado ou que algo está acontecendo . Então, muito simples. E então temos o script, que é basicamente, eu diria que isso é algo que um desenvolvedor seria melhor se explicasse isso Eu usei um ou dois scripts até agora, então não tenho muita experiência com isso, mas ele pode fazer muitas coisas diferentes, definitivamente. Já vi vários exemplos e, em breve, mostrarei alguns estudos de suposições. Ok. E agora vamos excluir todas essas coisas extras. E vamos tentar adicionar um quadro-chave à animação, ok? Agora, deixe-me colocá-lo aqui. Ok. Então deixe-me arrastar este também para o centro. Ok, então temos essa bola aqui. E agora vamos ver que tipo de ferramentas de animação temos. Ok. Vamos seguir em frente, selecione a bola. E então, o que vou fazer agora é ter em mente que, quando você inicia a animação e cria vários estados, digamos que, quando você clica na bola, ela é animada Quando você tira o mouse dele, ele basicamente para. E quando basicamente você passa o mouse sobre ele, ele basicamente muda a cor, você sabe, coisas assim Uma coisa muito importante a ter em mente é que primeiro, chamarei isso de ocioso, e depois explicarei isso para você O que isso significa? Ok, agora temos três composições, basicamente. A propósito, estou fazendo isso de forma muito simples. A propósito, se o seu painel estiver escondido em algum lugar, basta clicar nas animações e ele aparecerá E a partir dessas gravações, RIV é totalmente gratuito Você só precisa comprar sua assinatura se quiser exportar sua animação para um arquivo Dot ry. Mas não há nenhum custo em aprender a ferramenta. E se você verificar meu estudo de caso, verá que na verdade eu não compartilho arquivos de animação Daughter porque esse é o arquivo que vai para o cliente porque é um arquivo de entrada real, certo? Então, basicamente, você exibirá animações em vídeos ou, se não tiver um plano R pago, o que você pode simplesmente fazer é gravar a tela Simples assim, use o OBS, assim como estou usando agora E então o que você pode fazer é fazer uma composição básica no After Effects ou em qualquer outro software que basicamente suporte máscaras e, em seguida, basicamente criar seu portfólio a partir delas. Simples assim. Ok. Ok, então vamos em frente agora, deixe-me ir até a máquina estadual, e já temos o ídolo aqui Por exemplo, digamos que não está aqui. Podemos simplesmente arrastar e soltar nossa animação assim, ok? E então digamos que vamos da entrada até aqui. Apenas ignore esses dois. Por enquanto, quase nunca vamos usá-los. E depois disso, vamos mudar nossa cor, ok? E depois disso, vamos para nossa mudança de posição. Bem simples. Ok. E agora o que eu vou fazer é basicamente ignorar a máquina de estado por enquanto, ok? E digamos que depois que a cor mudar, eu quero que a animação comece daqui, na verdade, ok? E depois vá até aqui. É isso mesmo. Simples Ok. Coisas mais simples. Muito simples, ok? E não há animação por aqui. E digamos que estou pensando em mantê-lo aqui por enquanto, ok? Você notará uma coisa muito estranha aqui: a animação, o quadro-chave, é adicionado aqui, certo? Deveria estar aqui. Mas por que está aqui? Não há quadro-chave? Na verdade, o que está acontecendo aqui é que, primeiro, vou criar o quadro-chave sobre o valor da cor, ok? E então o que vamos fazer é mudar a cor de volta para verde agora, ok? Agora você está dizendo que deve estar pensando que temos o quadro-chave dal aqui Temos o quadro-chave verde aqui na outra linha do tempo, depois temos a mudança de posição aqui Mas se eu adicionar o quadro-chave aqui também, digamos assim. Está bem? E eu vou seguir em frente para o ocioso. E então, basicamente, basta copiar e colar o valor da cor. Deixe-me copiar a cor e depois colar aqui. Simples A propósito, onde quer que seu cabeçalho esteja na linha do tempo, você basicamente adiciona um quadro-chave Então, se eu alterar o valor aqui, você verá se adicionamos um quadro-chave Então, vamos começar a partir daqui. Nós mudamos a cor assim. Agora, espere. Por que não estamos afetando a cor aqui, certo? Por que isso? Em primeiro lugar, lembre-se que, se você for animar uma propriedade, é muito importante primeiro planejar a animação antes de criar os quadros-chave dentro do ive Isso é muito importante. Por exemplo, vamos considerar que há 50 camadas aqui, e o cliente simplesmente quer que você altere um detalhe muito pequeno. Por exemplo, a cor da sobrancelha do design. Por exemplo, isso é uma sobrancelha. Ok. A propósito, se você quiser adicionar preenchimento ou traçados em um caminho, basta entrar no preenchimento e no traçado, retirar o preenchimento ou um traçado e depois adicionar um traçado aqui também Coisas simples. Coisas bem simples, ok? Muito básico. Assim como funciona no Figma Muito parecido com isso. Digamos que o designer ou o desenvolvedor digam: Ah, deve ter havido um erro. Oh, Oh, não. Oh, não, não, não, não, não, temos que mudar isso. Ok. Então, o que você precisa fazer é basicamente mudar a cor. Simples o suficiente, mas na verdade não é simples o suficiente. Por quê? Porque digamos que você tenha dez pausas na animação do personagem, então você precisa ir a qualquer lugar E então o que você precisa fazer é basicamente adicionar um quadro-chave em cada um deles. Ou se você quiser realmente mudar a cor, o que você precisa fazer é voltar ao modo de design. Uma coisa muito interessante de se notar é que se eu for aqui e depois fizer assim, depois voltar, você verá algumas coisas realmente estranhas acontecendo Temos cabelos de cor azul. Temos cabelos de cor azul. E temos cabelos ruivos. O que eu quero dizer, o que está acontecendo? Ok, então agora eu vou explicar isso para você de forma muito, muito simples. Está bem? Deixe-me seguir em frente e, basicamente, excluir essa camada. Não sei por que a tecla delete não está funcionando no meu teclado. Talvez tenha havido algum problema. Então, deixe-me desligá-lo. Ok. Então, vamos nos concentrar apenas na nossa camada um ou apenas na nossa bola. Agora, por que o problema está acontecendo, por quê? O que acabou de acontecer? Por que não podemos entender isso é muito simples. Se você vai criar uma animação, a coisa mais simples é primeiro combinar tudo com o design. Como eu disse antes, você tem que fazer o design inteiramente aqui. Não faça nada aqui, faça tudo aqui. Ok. Agora temos a cor aqui. Essa é a nossa cor finalizada, por exemplo. Digamos que essa não é a cor finalista. Essa é a nossa cor finalista, assim. Está bem? Isso está finalizado. É isso mesmo. Vamos para o modo animado. Temos que deletar nosso quadro-chave. Agora você verá que voltamos ao valor verde, que é nosso valor original. Agora, se houver um roteiro entre a animação, se você quiser, digamos, animar a posição nesta linha do tempo, você também precisará adicionar dois quadros Dummik Por que isso acontece? Agora, aqui está o que realmente está acontecendo. Deixe-me desenhar algo muito bem para você. Ok. Então, basicamente, o que vai acontecer é, vamos ver se consigo explicar isso melhor. É assim que a máquina estatal funciona, ok? Vamos criar um retângulo e dizer que essa é nossa máquina de estados Está bem? E isso é basicamente uma animação, ok? Deixe-me seguir em frente e fazer com que seja assim. E então vamos desenhar outra cor como essa. Agora, esse conceito é muito, muito simples e é como uma brincadeira de criança para alguém que tem um pouco de experiência em desenvolvimento, eu diria, ou que já trabalhou de volta. É bem simples. Mas eu sei que quando comecei em Re, quando era meu primeiro dia, eu estava basicamente, você sabe, desmaiado por uma hora porque não conseguia descobrir o que realmente estava acontecendo Então, basicamente, isso é o que vai acontecer. Deixe-me apenas obrigar este texto aqui também para que eu possa explicá-lo melhor, talvez Ok. Então, os dados, e então temos esses 120. Então, cada linha do tempo tem dados, ok. Simples assim. E então o que realmente acontece é que, como você sabe, no After Effects ou em qualquer lugar, quando você cria uma animação, o que realmente acontece é que você está basicamente criando interpolação, você Por exemplo, se eu criar uma animação como essa, 12 K quadros, eu a faço assim. A interpolação entre esses dois valores aqui está basicamente aumentando, como você pode ver Então, basicamente, estamos dizendo ao software que vai de zero para 100% de opacidade em 12 quadros, e o software basicamente descobre o resto do cálculo e dos Agora, a mesma coisa está acontecendo aqui. Basicamente, toda linha de tempo tem dados nela, ok? Id são basicamente dados de animação, aqueles quadros-chave que adicionamos internamente. E depois disso, o que temos é a mudança de cor. Depois disso, o que temos é uma mudança de posição bem simples, certo? Agora, se você adicionar um quadro-chave na posição aqui, digamos que esse é nosso quadro-chave de posição como este. Deixe-me fazer assim, você sabe, sim, parece melhor. Então, digamos que esse é o nosso quadro-chave e vamos torná-lo uma cor melhor, certo? E digamos que esse é o nosso kframe para cores. E este é o nosso quadro-chave para a posição. Está bem? Agora, basicamente, isso é o que está acontecendo. Nós temos o inativo. Temos a mudança de cor e, em seguida, temos o Mbadry, basta selecionar Basicamente, temos a mudança de cor e, em seguida, a mudança de posição. Então essa é a nossa mudança de posição. Agora, não temos esses quadros-chave, certo? E então não temos a mudança de cor aqui. Está bem? Agora, o que realmente está acontecendo aqui é que, se não há um quadro-chave aqui, ele não pode realmente interpolar os valores daqui para aqui porque não há dados de transição para que a transição aconteça, na verdade, ela precisa passar Digamos que mudamos a cor agora, certo? Mas depois disso, a cor basicamente não muda. Então, o que realmente acontece é que a cor que era na verdade a original é basicamente acionada aqui. Então, se você quiser que essa cor apareça aqui, você tem que basicamente duplicá-la desta forma Simples E se você quiser que a posição mude, certo, então o que você precisa fazer é basicamente adicionar esse quadro-chave aqui também, o quadro-chave final, ou digamos, Ok, por exemplo, se tivermos esse quadro-chave de posição aqui, vamos voltar ao computador anterior Você verá que a posição é 333, certo? Vamos apenas copiá-lo. Agora, tenha em mente que não temos um quadro-chave aqui Só muda de cor por aqui. Agora, vamos adicionar uma posição aqui, ok? E você verá que não está adicionando nada aqui. Por quê? Porque eu preciso primeiro adicionar o quadro-chave. E então eu só preciso controlar C, copiar e colar aqui e clicar em Inter Então você está criando uma animação como essa. Simples Nada muito complicado. Só faz com que seja mais longo assim. Ok. Parece bom. Agora, você verá que temos essa animação aqui, bem simples. Então, temos essa animação subindo. Ok. E então temos essa animação aqui. Agora, queremos manter o mesmo valor da cor aqui. Vamos apenas excluir o quadro-chave colorido. E então a cor aqui é o que é? É isso que pode mudar de cor. Deixe-me seguir em frente e criar um quadro-chave aqui. Agora, isso basicamente não vai escolher a cor daqui. Por quê? Porque está basicamente seguindo o quadro-chave, que já está adicionado aqui, certo? Então, deixe-me excluir esse e depois copiar esse valor porque vou esquecer. Então, deixe-me deletar este. Você verá que a posição padrão é a mesma. Agora, deixe-me adicionar um quadro-chave aqui. Deixe-me adicionar o quadro-chave aqui e depois copiar e colar. Agora, quando eu prosseguir, você verá que também não estamos mudando a cor aqui, porque não adicionamos o quadro-chave de cores Então, basicamente, a maneira ideal de fazer isso é entrar na primeira composição, a composição dal, onde nada é basicamente animado, absolutamente nada, certo? E então, a partir disso, você tem que basicamente passar por uma jornada. Uma máquina declarada é como uma jornada ou meio que um caminho, e você basicamente conduzirá seus elementos ou personagens por esse caminho e basicamente os conduzirá por essa jornada, ok? E é por isso que agora sabemos o que vamos animar. Vamos animar duas propriedades e quais são essas propriedades Primeiro, temos a cor. A segunda é a posição. Adicionamos os dois quadros-chave. Vamos prosseguir com a mudança de cor. Também vamos adicionar os dois quadros-chave aqui. A mudança de cor já foi adicionada, mas a posição não foi adicionada. Então nós adicionamos isso. Mas o que é realmente importante ver aqui é que realmente queremos animar nossa bola Ok. A propósito, acho que só animamos nosso grupo de baile. Então, vamos ficar com isso por enquanto, ok? Não torne isso mais confuso. Então, adicionamos dois quadros-chave. Agora também temos dois quadros-chave aqui, mas estamos apenas mudando de cor Bem simples. Muito fácil. Agora, o que vamos fazer é copiar esses dois quadros-chave e colá-los aqui. Bem simples. Mas o valor da cor deve ser esse, certo? E, basicamente, vamos copiar isso e depois começar porque o ponto final dessa composição deve ser o ponto inicial dessa composição. É assim que a animação será suave. Então, vamos colar aqui. Simples Então, vamos jogar o primeiro. Bem simples. Vamos continuar com a segunda. Estamos mudando de cor. E então temos a animação da posição. Agora, algo realmente importante a ter em mente é bem simples, que é que vamos experimentar e deixar eu animar uma escala Você pode ver que adicionamos o quadro-chave quando alteramos a propriedade, certo? E vamos voltar e você verá que não estamos mudando a orelha da balança. Quando voltarmos, você verá que não estamos mudando o escalar, certo? Então, coisas bem simples. Mesmo conceito básico. Vamos apenas remover o quadro-chave Simples assim, certo? Tudo está funcionando bem agora E agora você pode ver que a animação não está quebrando porque adicionamos os quadros-chave Está bem? Portanto, isso é muito importante quando você está realmente criando a animação. Máquina de estado lateral. Isso é muito, muito importante, ok? Porque uma propriedade vai para outra, e a interpolação precisa ter esses dados É realmente, muito importante, ok? esses são pontos cruciais Basicamente, esses são pontos cruciais que você deve ter em mente, ok? E eu tentei simplificar isso o máximo possível. Agora, alguns truques muito legais ou, digamos, ferramentas que eu adoro no Drive. Vamos dar uma olhada neles, ok? Vamos deletar tudo isso, e vou remover esses dois. Eu só vou entrar na bola e depois vou para a posição. Remova o quadro K do grupo e, basicamente, vamos animá-lo subindo, e então podemos ir para o 40º Em seguida, vamos colá-lo. E então, basicamente, o Rivet também permite remover o quadro-chave colorido Sim. Então, basicamente, o RV realmente oferece essa interpolação básica, muito simples em todas as ferramentas de animação da interface do usuário, mas, ao contrário do after effect, como você pode ver, o aftereffect não tem isso After Effect tem algo parecido com isso, que é chamado de fluxo, mas é basicamente uma interpolação muito básica, mas algo ótimo como o After Effect também está dentro do drive, que é o editor gráfico, na verdade, ok E como você pode habilitar isso é clicando aqui, e então você pode basicamente reproduzir a animação e ver. Ok. E então o que você precisa fazer é basicamente, se você quiser habilitar o gráfico, você tem que ir até aqui e clicar em Cub value ou pressionar F nove no teclado E então o que você pode fazer é fazer isso. Vamos ver um resultado. Oh, bom. Animação de salto de bola muito boa. Está bem? Vê? Bem simples. Agora, a parte adorável RIV é que vamos falar sobre isso em um minuto Agora, você pode ver basicamente, é o gráfico de valores, ok? Portanto, não espere que haja um gráfico de velocidade, não houve nenhuma confirmação e, basicamente, você também pode contornar o gráfico de valores se também for um bom animador Portanto, o R atualmente oferece apenas valegraph em vez de gráfico de velocidade Então, espero que isso seja suficiente para você também. Em vez de trabalhar em ferramentas nas quais você não pode realmente contornar gráficos, realmente me parte o fato de você não conseguir ajustar a atenuação você não conseguir ajustar a atenuação Ok, então vamos voltar à nossa visualização da linha do tempo em vez da visualização gráfica E agora deixe-me te mostrar algo muito bom. Temos opções de cronograma nas quais você pode basicamente analisar a hierarquia ou a personalização e aplicar tudo ao modo de design Não tenho certeza do que isso faz. Aplicou os valores atuais da cabeça de jogo ao design. Ah. Então, isso é algo muito bom. Por exemplo, se eu quiser que esse valor esteja no início da animação. Por exemplo, eu quero que isso esteja aqui no início. Acho que o que posso fazer é clicar aqui, aplicar tudo ao modo de design. E então, sim, nossa bola está aqui. Então, isso é algo muito legal. Agora, é realmente surpreendente que, enquanto estou gravando isso, eu também esteja aprendendo algo novo que eu não havia explorado, porque esse tipo de coisa na verdade não é verdade, você não precisa explorar esses recursos porque não vem à sua mente que, oh, eu tenho que usá-los Mas se você precisar usá-lo, definitivamente poderá encontrá-lo. Então, meu foco principal é, na maioria das vezes, inteiramente em animação. Então eu não copio valores daqui para o modo de design, na verdade. E uma outra razão por trás disso é que eu pré-planejo o design, na verdade, e depois executo a parte da animação. Além disso, isso é algo que levará algum tempo para aprender. Você sabe, você vai cometer muitos desses erros de edição, mas isso é feito no modo animado E ao pressionar tab, você acabará em uma situação horrível porque o design é totalmente diferente Então, nesses casos, essa dica pode te salvar, certo? Ok, outra coisa, que é essa área de trabalho. Está bem? Então, este basicamente permite que você manipule a seção da animação e, em seguida, você pode basicamente reproduzi-la. E então, basicamente, exportará essa parte e também da linha do tempo E se você estiver exportando PFoE, esse também será o caso E deixe-me preenchê-lo. Agora, meu recurso favorito é que, se você está familiarizado com o Late Felt e o After Effects, talvez saiba que o Late não suporta o recurso de remapeamento de tempo, que é basicamente usado não suporta o recurso de remapeamento de tempo, que é basicamente usado para desacelerar ou acelerar a animação Se um cliente solicitar uma animação de 15 segundos tenha 20 segundos de duração, você precisará ajustar manualmente praticamente todos os quadros-chave. E se você está criando algo como uma animação de interface de usuário de produto, é basicamente um pesadelo e basicamente perde muito tempo com as revisões Agora, algo realmente adorável sobre R é que agora, quero dizer, eu amo esse tipo de recurso. Basicamente, isso economiza muito tempo e também me dá a perspectiva de que isso foi realmente mantido em mente enquanto a ferramenta estava sendo construída, que esse tipo de recurso também pode fazer uma grande diferença, e esse tipo de recurso também pode ajudá-lo a obter resultados diferentes de animação. Por exemplo, se você estiver criando uma animação em que um personagem está com raiva e quiser mostrar que o personagem está se movendo rapidamente, você não precisa basicamente fazer a animação inteira. Você só precisa clicar em nosso cabelo na cabeça. Você só tem que chegar até X. Ok. Agora não está funcionando talvez porque não funcione dessa maneira. Sim. Mas você definitivamente também pode diminuir a velocidade. Então, tenho certeza disso. E se você quiser aumentar a velocidade, a propósito, você também pode fazer a mesma técnica no Alt click . Então você também pode fazer isso. Mas digamos que você tenha animado 100 camadas uma após a outra, e depois uma depois dessa e uma depois daquela, e você não pode simplesmente tocar em todas elas. Porque então a sobreposição das camadas basicamente vai bagunçar Então você também pode vir aqui e basicamente diminuir a velocidade. Agora, você pode fazer o que quiser, 0,1, digamos. Então, deixe-me ir em frente e te mostrar. Veja como isso parece lindo. Além disso, algo muito interessante está acontecendo aqui, que é que a velocidade do indicador de reprodução também está correspondendo ao valor aqui Você sabe Isso também é, eu acho, muito bom se você estiver experimentando descobrir qual deve ser o momento da animação Então, em vez de arrastar e soltar quadros-chave diferentes, o que você pode fazer é basicamente reajustar Um elemento realmente importante que você deve ter em mente ao animar é que o RIV não funciona realmente em 24 FPS ou 60 FPS Basicamente, depende do dispositivo do usuário quantidade de quadros-chave que ele pode mostrar para esse dispositivo e, em seguida, ele basicamente reproduzirá a animação nessa velocidade, que é bastante interessante Então, digamos que se houver um dispositivo que seja muito bom e tenha uma tela de 240 rebanhos , ele mostrará 240 quadros nesse dispositivo Se você estiver usando o recurso de quantização , ele limitará seus quadros-chave ao que você digitar Ok. Então, algo muito importante a ter em mente também. Então, a propósito, podemos simplesmente reduzi-lo para libras também. Então, vamos dar uma olhada nisso. Ok, certo? E acontece a mesma coisa. E deixe-me desligar o quantis e vamos ver Vê? Vemos 12 quadros-chave aqui, mas a prévia não é 12 quadros-chave A animação é muito suave, certo? Então, isso é apenas algo que você pode ter em mente. Deixe-me fazer 60 novamente. E algo muito bom, outro recurso, que é esse loop Agora, se você trabalha idealmente usando, digamos que já trabalhou antes de usar o Lotte, o que você saberá é que precisa criar a animação em loop perfeita e, basicamente, o desenvolvedor pode basicamente fazê-la tocar em loop para sempre. Essa parte pode ser tratada pelo desenvolvedor. Mas se você criou a animação dentro do Drive, você pode simplesmente fazer sua composição em loop. E então, a animação basicamente continuará em loop para sempre. E o desenvolvedor não precisa anexar nenhum tipo de código para isso. Algo muito interessante novamente, e acho que esse tipo de recurso é realmente algo que realmente mostra isso Quero dizer, ok, bom. Ótimo. Agora, há uma dor de cabeça a menos para o desenvolvedor lidar, certo? Ok. E agora temos o pingue-pongue. Vê? Esse é o tipo de coisa para a qual eu fui criado, e espero que vocês aprendam alguma coisa. Vê? Então, esse é o tipo de coisa para a qual o RIV foi criado Então, animação interativa, agora, definitivamente, não adicionamos nenhuma interatividade a ela porque eu quero que você basicamente digira todas as novas informações E se você quiser saber o que um recurso único ou específico faz, definitivamente pode conferir seus estudos sobre SO. Você também pode acessar o canal deles no YouTube. Há algumas coisas muito boas que eles enviaram. Então, vamos ver o aplicativo RIV e abrir o canal para mostrar algo muito bom, ok? E, basicamente, se você entrar na playlist, encontrará cinco reproduções, basicamente. Então, há a máquina de estatísticas onde você pode aprender tudo sobre a máquina de estado Há R um em um. Há o layout e as dicas, dicas e truques e, em seguida, há a plumagem vetorial E vamos tocar um pouco na difusão vetorial também para que possamos realmente entender a grande diferença de impacto que a difusão vetorial adicionou. E antes de discutir a difusão vetorial, é muito importante mencionar que a difusão vetorial é uma tecnologia diferente de qualquer outro desfoque Então, basicamente, essa tecnologia não existia até Rive inventá-la, então ela não funciona da mesma maneira O desfoque gaussiano, por exemplo, funciona. Portanto, é uma te