Animações interativas no Rive: guia para iniciantes da máquina de estado

1. Apresentação: Bem-vindos, pessoal, e obrigado por se juntarem a mim. Meu nome é Yaya E nesta aula, vamos nos concentrar na máquina de estado RIV e criar animações interativas O RIV transforma imagens estáticas em animações interativas com as quais as pessoas realmente querem mexer e clicar É um divisor de águas total para web, aplicativos e jogos. Se você é animador, designer de movimento, designer de produto e quer adicionar interatividade ao seu trabalho, você está no lugar certo Um pouco sobre mim, sou designer de movimento freelance com mais de dez anos de experiência trabalhando com clientes de todo o mundo Na maior parte desse tempo, tenho usado ferramentas tradicionais, como o After Effects e o Cinema 40. Mas quando descobri o Drive, sinceramente tive a sensação de me apaixonar pelo design de movimento novamente. É uma ferramenta muito divertida e empolgante. Desde então, passei muito tempo aprendendo os meandros do RV e estou muito empolgada compartilhar o que aprendi com você Eu criei esse tecido para tornar essa curva de aprendizado um pouco menos intimidante e mais divertida Depois de clicar, é uma ferramenta poderosa para você falar Certo, vamos começar. Primeiro, verifique se você tem o RV instalado e configure uma conta Você pode encontrar o link na descrição do curso. 2. Como entender a interface do Rive: Agora que estamos prontos, vamos dar uma olhada na interface do Re. Só um aviso. O RV é atualizado com bastante frequência Portanto, as coisas podem parecer diferentes na tela, mas não se preocupe. Os recursos e ferramentas ainda estão lá, talvez em um local um pouco diferente. Familiarizar-se com a interface tornará seu fluxo de trabalho no RIV muito mais eficiente Reserve um tempo para explorar cada seção e, quando estiver pronto, mergulharemos na animação usando a máquina de carne Aqui na seção inicial, você pode ver seus arquivos recentes, links para alguns tutoriais úteis e exemplos da comunidade, onde você pode explorar projetos de outros artistas da comunidade e ver o que as pessoas estão fazendo Aqui, você pode pesquisar seus arquivos pelo nome e, aqui embaixo, você tem seus arquivos pessoais. Se quiser, você pode organizar seus arquivos em projetos como eu fiz aqui para esta aula do Skillshare Você pode clicar com o botão direito do mouse para criar uma nova pasta ou um novo arquivo ou clicar nos ícones no canto superior direito. Na parte superior, temos a barra de ferramentas. Aqui, podemos personalizar nosso arquivo, exportar e criar links de compartilhamento, criar pranchetas, layouts e grupos, ferramentas de design como caneta e formas, limites, texto Painel de hierarquia e ativos. No lado esquerdo, há o painel de hierarquia. Isso exibe todos os objetos, ativos, controles e animações em seu arquivo, e animações em seu arquivo, mostrando os relacionamentos entre pais e filhos e a ordem de renderização A guia de ativos é onde podemos ver todos os ativos que residem nesse projeto específico e onde podemos importar ativos como imagens, ladifils e À direita, temos o inspetor. Esse painel permite ajustar propriedades do objeto selecionado, atualizando dinamicamente com base na sua seleção e no modo atual A área central é o palco, uma tela infinita onde você pode colocar pranchetas contendo todos os seus gráficos Até agora, estávamos no modo de design. Mas se clicarmos aqui, vamos para o modo de animação. É aqui que configuramos nossas máquinas de estado e cronogramas. Aqui na linha do tempo, você pode criar animações, acessar controles de reprodução e definir quadros-chave No modo de máquina de estado, a linha do tempo é substituída pelo gráfico da máquina de estado, permitindo que você conecte visualmente as animações e defina a lógica das transições 3. Introdução à máquina de estado: Ok, vamos falar sobre a máquina do estado. É o que faz com que as animações respondam às ações do usuário. Pense nisso como um conjunto de regras que dizem rima quando e como fazer a transição entre estados Aqui está um exemplo. um estado em que o interruptor está à esquerda, depois outro em que o interruptor está à direita e muda de cor. Na máquina de estados, podemos usar entradas e ouvintes para configurar interações e usar transições para criar o fluxo entre os Então, quando jogamos, podemos testar nossas interações aqui. Agora vamos recriar essa animação interativa juntos Baixe o arquivo de recursos, arraste o arquivo dot rev para o RIV e siga meus passos 4. Organize a hierarquia: Com o RIV, é crucial organizar suas camadas e hierarquia antes de entrar no modo animado Se você começar a adicionar quadros-chave e depois voltar ao modo de design e mudar as coisas, suas animações podem falhar e você obterá resultados indesejados Então, vamos ficar no modo de design e organizar as coisas rapidamente. Se precisar trabalhar com arquivos SVG, acesse o painel Ativos, clique no botão Mais em Imagens, clique no botão Mais em Imagens, selecione seu arquivo SVG e clique em Carregar Posso arrastá-lo para o palco ou clicar com o botão direito do mouse em Gerar prancheta Na hierarquia, podemos ver nosso design e, sob esse grupo, posso ver todos os meus objetos Antes de fazer qualquer outra coisa, devemos organizar a hierarquia em grupos e renomear todas as camadas Isso tornará nossa vida muito mais fácil quando criarmos animações mais tarde Usarei o ícone Ocultar exibição para ajudar a identificar qual camada estou editando. Eu vou de baixo para cima. Essa é a camada de fundo, e eu gosto de excluí-la porque o Rave já adicionou cor de preenchimento à prancheta Então, vou mudar isso para branco, mas saiba que você pode removê-lo completamente se quiser ter uma placa transparente. Eu gostaria de destacar os ícones à esquerda aqui. Este está nos dizendo que essa é uma camada de forma personalizada com um caminho personalizado, enquanto os ícones de retângulo e elipse estão nos dizendo que essas são formas processuais que têm alguns parâmetros extras, como Você sempre pode converter em um caminho personalizado clicando em Enter, mas tenha cuidado para não convertê-lo novamente em uma forma processual Agora, eu quero te dar uma regra rígida e eu quero que você jure por ela Sempre, sempre, sempre agrupe seus objetos. Sempre, confie em mim. Isso evitaria muita dor de cabeça mais tarde e lhe daria muita flexibilidade ao animar Ótimo. Vamos agrupar e renomear tudo O ponto verde é apenas para referência, então vou agrupá-lo e movê-lo para cima mais tarde, vou apenas excluí-lo. uma Mais uma coisa que eu quero que você sempre faça é criar um grupo raiz. Sempre. Esse grupo não será animado, mas permitirá que você reposicione e escale a animação inteira sem que nada quebre E eu quero esse grupo bem no centro da prancheta Agora eu tenho esse grupo principal com o ponto de ancoragem no canto superior esquerdo Então, primeiro, vou desagrupar isso usando o atalho Shift Command G. Então, a melhor maneira de criar um grupo raiz bem no centro é criar uma camada de grupo vazia Você pode usar o atalho G e clicar em qualquer lugar na prancheta Em seguida, alinhe ao centro usando a ferramenta de alinhamento e arraste todas as outras camadas para dentro dela Vou renomear esse grupo. Então, eu gostaria de criar mais um grupo precaução, e pronto. Temos a hierarquia organizada e estamos prontos para entrar no modo animado. 5. Configurando estados com linhas do tempo: Tudo bem, aperte o cinto. Estamos mudando para o modo animado e configurando cronogramas e a máquina de estado Agora, apresentarei alguns novos conceitos aqui, então não se preocupe se as coisas não funcionarem imediatamente. Minha recomendação é assistir a esta aula até o fim de uma vez apenas para ter uma ideia de como tudo funciona e realmente absorvê-la. Em seguida, volte, retroceda , faça uma pausa quando precisar e siga em seu próprio Você tem isso. Mude para o modo animado. Por padrão, temos uma máquina de estado e uma linha do tempo. Meu plano é criar dois cronogramas, um para cada estado, um para o estado ligado e outro para o estado desligado Em seguida, vá para o gráfico da máquina de estado e conecte-os às transições para criar a animação Vou até a primeira linha do tempo e renomeá-la como estado 1 Portanto, está claro que essa linha do tempo representa um dos nossos estados de animação Posso clicar com o botão direito do mouse e duplicá-lo e, em seguida, renomeá-lo para o estado dois Agora precisamos dizer ao Rive quais propriedades queremos animar Nesse caso, eu sei que quero que o ponto se mova ao longo do eixo X. Para fazer isso, adicionarei um quadro-chave. Vou clicar no pequeno ícone de diamante ao lado do valor da posição. Quando fica azul, isso significa que um quadro-chave foi adicionado Você também o verá aparecer na linha do tempo abaixo. Se eu expandir a camada, posso ver exatamente o que está sendo animado. É a posição da camada de pontos, eixo X e seu valor atual. Agora vamos fazer a mesma coisa no estado dois. Mas desta vez, em vez de clicar no losango, vou arrastar a seta do eixo X para a direita. O RIV adiciona automaticamente um quadro-chave quando você ajusta qualquer coisa que tenha um diamante próximo a Vou digitar -63,5 para a posição, já que esse é o valor espelhado oposto do Para testá-lo, vamos alternar entre o estado um e o estado dois. Sim, parece bom. A mudança de posição está funcionando perfeitamente. Agora, vamos fazer a mesma coisa com as cores. Clique na camada de pontos no inspetor, você verá as cores usadas nesse grupo Podemos adicionar quadros-chave a cada um deles, assim como fizemos com a posição Agora mude para o estado dois e, desta vez, selecione a camada de pontos e a camada de referência. Dessa forma, podemos obter os valores de cor das duas camadas ao mesmo tempo. No inspetor, nas cores selecionadas, basta copiar e colar os valores hexadecimais Se eu entrar na linha do tempo, posso revelar rapidamente todas as propriedades com quadros-chave, e você verá que os tons amarelos atualizados agora estão aparecendo no segundo estado Vamos alternar entre os dois estados. Ótimo. A transição de cores está funcionando. Agora estamos prontos para conectar isso à máquina de estado. Por padrão, o RIV nos fornece uma máquina de estado com uma linha do tempo já conectada Se eu clicar em Play, você verá que essa linha do tempo só é reproduzida uma vez, nada sofisticado Agora, vamos arrastar o estado dois e conectar o estado um a ele. Isso cria uma transição entre os dois estados. Mas se jogarmos agora, você notará que ele imediatamente pula o estado um e salta direto para o estado dois Isso está acontecendo porque não dissemos Rive quando fazer essa transição Então, agora precisamos configurar uma condição para controlar quando a transição acontece. Antes de adicionarmos condições às nossas transições, precisamos configurar algumas entradas Você encontrará o painel de entradas aqui. O RIV nos fornece três tipos de entradas. Número, booleano e gatilho. Vamos começar com o gatilho. Quando eu clico para adicionar um, você verá que funciona como uma entrada única. Perfeito para coisas como um clique, em que você só quer que algo aconteça uma vez e depois reinicie. Agora podemos voltar para a transição e, no inspetor, podemos adicionar nosso gatilho como condição Então, aqui está a lógica agora. Entramos na máquina do estado aqui. Ele joga no estado um e espera que o gatilho seja acionado antes de fazer a transição para o estado dois. Vamos testá-lo. Clique em play, clique no gatilho e funciona. Mas se eu clicar no gatilho novamente, nada acontece. E isso é porque não configuramos uma transição voltando do estado dois para o estado um. Para corrigir isso, vamos criar uma transição voltando do estado dois para o estado um. Depois de conectá-los, você verá uma pequena seta apontando para o estado um. Agora, basta adicionar o mesmo gatilho como condição para essa nova transição. E nós fizemos isso. Agora, toda vez que clicarmos, a máquina de estado continuará alternando entre os dois 6. Saiba mais sobre transições + ouvintes: Agora que temos as transições básicas entre estados, vamos aumentar um pouco. Vamos tornar nossas transições um pouco mais interessantes. No momento, a mudança do estado um para o estado dois acontece instantaneamente. Não há sensação de movimento. Quando selecionamos a transição, você notará que temos alguns parâmetros com os quais podemos jogar. Vamos começar com a duração. Atualmente, está definido para zero milissegundos. Então, vamos mudar isso para 500 milissegundos. Agora, quando reproduzimos a animação e disparamos o gatilho, obtemos o movimento real. O ponto desliza da esquerda para a direita ao longo do eixo X durante meio segundo. Em seguida, podemos ajustar a sensação da transição ajustando a interpolação usando este gráfico aqui Esse gráfico representa a duração total de 0 a 500 milissegundos, e a curva mostra como a transição se move do estado um para o estado dois ao longo desse tempo No momento, a curva é perfeitamente linear, é por isso que o movimento parece um pouco rígido ou robótico Mas se escolhermos essa opção cúbica aqui, obteremos essa bela linha curva agora o movimento entra, passa de forma linear pelo meio e diminui novamente no final Esse tipo de animação é chamado de atenuação. Observe como está muito mais suave agora. É mais natural porque, no mundo real, os objetos têm peso e massa. Eles não iniciam e param instantaneamente. Eles demoram um momento para acelerar e outro para desacelerar. Você também pode ajustar a curva ajustando as alças Por exemplo, podemos criar uma maior facilidade de saída. Assim, a animação começa rapidamente e depois diminui gradualmente Viu como isso muda a sensação? Eu realmente encorajo você a brincar com o gráfico, experimentar diferentes formas de curva e ver que tipo de movimento você pode criar. Dependendo do seu projeto, você pode querer algo rápido, suave ou mais dramático Por enquanto, vamos ficar com a opção cúbica. É um padrão sólido que funciona bem na maioria dos casos. Ah, em uma dica rápida, você também pode copiar e colar curva de atenuação de sua fantasia se quiser reutilizá-la em outras Agora, vamos falar sobre uma parte muito importante do trabalho com o RIV: adicionar interatividade Até agora, acionamos animação manualmente clicando na entrada Mas isso é só para testar. O que realmente queremos é que o usuário interaja diretamente com o botão na prancheta Então, como podemos fazer isso acontecer? É aí que entram os ouvintes. Vamos abrir o painel de ouvintes e clicar no ícone de adição para criar um novo Você verá que o inspetor agora nos dá um campo alvo. Clique nele e o RIV solicitará que você selecione um elemento no Canvas Nesse caso, queremos que a face do botão seja o alvo interativo. Você também pode selecioná-lo na hierarquia. Agora que definimos a meta, o inspetor está perguntando: que ação queremos ouvir Existem algumas opções aqui, mas para o nosso botão, vamos escolher clicar. Então, agora, sempre que o usuário clicar no botão, queremos acionar uma entrada Ok, recapitulação rápida do que fizemos. Criamos um ouvinte, definimos um alvo, escolhemos a interação e a vinculamos a uma entrada que controla a animação Vamos testá-lo. Pressione play, passe por cima da face do botão e clique. Agradável. Funciona. E se clicarmos em qualquer outro lugar, nada acontece. Isso porque a interação está vinculada apenas ao alvo do ouvinte No nosso caso, a face do botão. Vou renomear esse ouvinte para Face Click apenas para manter as coisas Agora acho que estamos prontos para adicionar outra camada de interação, um efeito de foco Isso será semelhante ao que acabamos de fazer com um clique, então vamos percorrê-lo um pouco mais rápido Começaremos criando dois novos cronogramas para definir os estados de foco. Passe o mouse ligado e desligado. Arraste a máquina de estado até o topo apenas para manter as coisas arrumadas Vamos começar com o mouse. Quando o usuário passa o mouse sobre o botão, quero que o rosto pareça um pouco mais brilhante Então, selecionarei a camada facial e aumentarei o brilho nas configurações de cor em até 100% Lembre-se de que o Rive precisa ver quadros-chave nos dois estados. Portanto, certifique-se de adicionar quadros-chave à cor na camada facial em cada linha do tempo Vamos fazer um teste rápido. Passe o mouse ligado, desligue e desligue. Perfeito. Agora temos dois estados de trabalho para a interação de passar o mouse Agora, você deve estar se perguntando: como combinamos isso com a animação de cliques existente? Para isso, precisaremos adicionar uma nova camada à nossa máquina de estado. No momento, tudo está rodando na primeira camada. Então, vou renomear isso para algo como clicar em desligar para manter as coisas organizadas O legal da máquina RV State é que ela permite empilhar várias camadas de interações umas sobre as outras Então, vamos adicionar uma nova camada apenas para a interação de passar o mouse Agora, vamos arrastar as duas linhas do tempo flutuantes para o gráfico e conectá-las às transições. Queremos que a animação comece com o mouse desligado, depois faça a transição para passar o mouse sobre quando o usuário passa o mouse e volte a desligar o mouse quando ele afasta o cursor Então, aqui está a lógica. Quando o cursor entra no botão, fazemos a transição para passar o mouse e, quando o cursor sai, fazemos a transição de volta para desligar o mouse Para controlar essa interação, precisaremos adicionar uma nova entrada. E para pairar, o bullying é a escolha perfeita. É simples. Pode ser verdadeiro ou falso. Funciona muito bem para algo como estados externos. Agora podemos usar esse bullian como condição. Para a transição de passar o mouse desligado para passar o mouse sobre, configure-o para funcionar quando o bullian for E para a transição de volta, configure-a para funcionar quando o ouro for falso Vamos fazer um teste rápido. Clique para definir o agressor como verdadeiro, nós colocamos o Hover on. Clique novamente para configurá-lo para forçar e voltaremos a ativar o Hover off. Agradável. Isso está funcionando exatamente como esperado. Agora vamos adicionar um pouco de polimento, assim como fizemos com a interação de cliques. Vou definir a duração para 150 milissegundos e aplicar a interpolação cúbica para um movimento mais suave Vamos reproduzi-lo. Sim, isso é bom A etapa final é realmente fazer com que essa interação de passar o mouse funcione na prancheta Para isso, precisaremos de dois ouvintes. Um para detectar quando o cursor entra no botão e outro para quando ele sai Vou chamá-los de passar o mouse sobre Enter e passar o mouse sobre a saída, apenas para manter as coisas claras Tudo bem, vamos configurar os dois ouvintes. Para o primeiro, defina o alvo como face, escolha o ponteiro Enter e defina a entrada do ouro Em seguida, para o segundo ouvinte, use o mesmo alvo, mas desta vez, escolha a saída do ponteiro e configure o agressor Só para recapitular o que fizemos, estamos ouvindo quando o cursor pressiona o botão, isso configura o agressor como verdadeiro, acionando o estado de passar o E quando o cursor sai, o bullying muda para falso, fazendo com que voltemos a passar o mouse . Vamos testá-lo. Pressione play, passe o mouse sobre o botão. Passe o mouse sobre. Afaste o cursor. Passe o mouse para fora. Perfeito. Essa é a nossa interação de passar o mouse funcionando E aqui está a parte legal. Se você clicar no botão, a interação liga/desliga também funciona. Então, agora combinamos várias camadas de interatividade em uma animação Vá em frente e experimente você mesmo. Veja se você pode adicionar interações de foco aos seus designs. Agora você tem tudo o que precisa para criar sua primeira animação interativa. Seus recursos vão além do que estamos analisando neste curso, mas são baseados nesses fundamentos, estados, transições, entradas Então é hora de você pegar esses fundamentos e colocá-los em prática Mal posso esperar para ver isso. 7. Projeto de curso interativo: Ok, agora é hora de praticar. Assistir às aulas é ótimo, mas se você realmente quer melhorar, precisa colocar a mão na massa. Experimentar coisas, errar, descobrir coisas, é aí que o verdadeiro aprendizado acontece É a única maneira de criar confiança e entender verdadeiramente como tudo funciona. Portanto, para esse projeto de classe, escolha um dos designs nos arquivos de recursos e tente criar sua própria animação interativa do zero. Aqui está um resumo do processo em tempo integral , do início ao fim É uma rápida recapitulação para ajudar tudo a dar e reforçar o que aprendemos até agora Certifique-se de organizar sua hierarquia, agrupar seus objetos e renomear as camadas Crie dois estados. Adicione transições. Adicione entradas Adicione condições às transições. Adicione ouvintes e defina as alterações de entrada. Adicione interação ao passar o mouse. Voltei ao modo de design e adicionei um novo gradiente de preenchimento para ser usado como meu destaque de foco Use uma opinião sobre bullying. Adicione dois ouvintes para verdadeiro e falso. E está feito. Boa sorte Nos vemos na próxima lição para mostrar como você pode compartilhar seu trabalho. 8. Compartilhe seu trabalho: Então você acabou de criar sua primeira animação interativa. Bem feito. Agora é hora de compartilhá-lo conosco na galeria do projeto. Vamos começar com uma imagem de capa. Veja como criar um RIV. Clique em adicionar ao Render Q. Escolha o modo de design Selecione o formato PNG e clique em Iniciar. Feito isso, vá até a aba completa e baixe sua imagem. Você pode carregar esse PNG como imagem de capa, escolher a escala da imagem e clicar em Enviar. Adicione um título do projeto e algumas palavras na descrição. Portanto, temos duas opções para compartilhar nosso trabalho aqui. Opção 1, plano pago. Se você estiver no plano pago do RV, clique em Gerar link de compartilhamento Em seguida, copie o código de incorporação daqui. Em seguida, cole esse código na descrição. É uma ótima maneira de mostrar sua animação interativa em ação e permitir que o usuário interaja com ela em tempo real. Opção dois, o plano gratuito. Se você estiver usando a versão gratuita do RIV, não poderá criar um link de compartilhamento Então, se você quiser mostrar coisas como interações de passar o mouse ou clicar, você pode usar uma ferramenta de gravação de tela como a captura Jiffy no Mac ou no PC Você pode gravar sua tela e converter para JIF no site da Jiffy Basta abrir sua animação na captura RIV Start Jiffy e posicionar o quadro de gravação sobre Certifique-se de ativar o cursor de captura nas configurações para que suas interações fiquem visíveis. Em seguida, relembre suas interações e exporte como Jif. Em seguida, arraste e solte seu Jif ou cole seu código de incorporação. Quando terminar, clique em publicar e seu trabalho estará disponível na galeria. É isso mesmo. Mal posso esperar para ver o que você criou. Compartilhar seu trabalho é um grande avanço , então não o ignore 9. Considerações finais & próximos passos: OK. Parabéns. Você fez isso. Você concluiu o curso e aprendeu os fundamentos das animações interativas usando a máquina RV State Agora você deve se sentir confortável criando estados de animação, configurando transições e usando interações como clicar e passar o mouse para dar vida aos seus designs Esse é um grande passo, especialmente se esta foi sua primeira vez trabalhando com RV Obviamente, como qualquer ferramenta criativa, a chave para dominar o RV é praticar a prática prática Quanto mais você experimenta e constrói, mais confiante fica. Então continue. Uma ótima próxima etapa é explorar o mercado de Rives Você pode ver o que os outros estão construindo. E se algo chamar sua atenção, você pode clicar no botão de remix Ele abrirá no editor e você poderá ver sob o capô e o motor reverso como as coisas foram construídas. Honestamente, eu aprendi muito vendo como outros designers resolvem problemas em seus arquivos Muito obrigado por se juntar a mim nesta aula. Espero que você tenha se divertido e se sinta animado para continuar criando. Não tenha medo de jogar, quebrar coisas, experimentar ideias estranhas É daí que vêm todas as coisas boas. Continue animando e nos vemos na próxima vez.