Animação Rive para Flutter: um guia para iniciantes para criar animações impressionantes com facilidade!

As animações geralmente aumentam o apelo visual de um aplicativo ou site e melhoram o envolvimento geral dos usuários. De acordo com um estudo da Forrester Research, sites com animações bem executadas apresentam um aumento no engajamento do usuário em até 400%. Animações envolventes podem capturar a atenção dos usuários e incentivá-los a interagir mais com a plataforma. No entanto, há uma curva de aprendizado para os desenvolvedores dominarem a animação, especialmente ao trabalhar com ferramentas e técnicas de animação mais avançadas.

Compreender o Rive como um desenvolvedor sem experiência em animação pode ser relativamente fácil em comparação com outras ferramentas ou estruturas de animação. O Rive (anteriormente conhecido como Flare) foi projetado para ser amigável e acessível aos desenvolvedores, mesmo aqueles com pouca ou nenhuma experiência anterior em animação. Neste artigo, você aprenderá como criar animações simples e impressionantes do Rive com facilidade e gerenciá-las em seu aplicativo Flutter.

Índice

• Introdução ao Rive🧙‍♂️

  • Conceitos básicos no Rive🧗

• Uma animação simples de login interativo🚀

  • Configure o elemento em sua prancheta📃
  • Hora da Animação!🕶️
  • Configure sua máquina de estado🏍️
  • Implemente Animação em seu Flutter App👨‍🚒

• Conclusão🏋️‍♀️

• Referências🧶

  
  

Introdução ao Rive🧙‍♂️

O Rive é uma ferramenta de animação poderosa e fácil de usar e um mecanismo de tempo de execução que permite que desenvolvedores e designers criem animações impressionantes e interativas para várias plataformas, incluindo aplicativos móveis, aplicativos da Web e jogos.

Conceitos básicos no Rive🧗

Aqui estão os principais conceitos:

1. Prancheta: Uma prancheta é uma tela onde você cria sua animação. É o local principal para criar e organizar elementos de animação, como grupos, restrições, ossos, etc.
2. Linha do tempo: A linha do tempo é onde as animações são definidas. Ele permite que você defina quadros-chave e especifique como os objetos devem mudar ao longo do tempo. Os quadros-chave representam pontos específicos no tempo em que as propriedades de um objeto são explicitamente definidas. O sistema de animação interpola entre quadros-chave para criar transições suaves.
3. State Machine: Rive possui um recurso de máquina de estado que permite especificar diferentes estados para sua animação. Você pode acionar transições de estado com base na entrada do usuário ou outras condições, permitindo a criação de animações interativas com diferentes comportamentos com base no estado atual.
4. Exportação de código: o Rive permite exportar animações como código, o que facilita a integração em seus aplicativos. Para desenvolvedores do Flutter, o Rive oferece um pacote de tempo de execução e integração do Flutter que facilita o uso de animações do Rive em projetos do Flutter.

Uma animação simples de login interativo🚀

Passaremos pelo processo de criar uma animação de login simples e exportá-la para nosso aplicativo Flutter. Utilizaremos o StateMachine para gerenciar a interatividade desta animação no app. No final deve ficar assim 👇🏽

Configure o elemento em sua prancheta📃

Siga as etapas abaixo para configurar o elemento na prancheta do Rive:

• Primeiro, precisamos obter o próprio elemento. Peguei-o nos modelos de ilustração de User Personas no Figma. Exporte o elemento como um arquivo SVG.
• Ir para Rive Clique no botão GetStarted para abrir seus rascunhos
• Em seus rascunhos, crie um novo arquivo e selecione uma prancheta em branco.
• Arraste e solte o elemento na prancheta, ele será automaticamente adicionado à pasta de ativos e você poderá vê-lo colocado na sua prancheta, deve ficar assim 👇🏽

• Na barra lateral, vamos agrupar as diferentes formas que compõem este elemento e nomeá-las de acordo. Selecione tudo o que deseja agrupar usando Ctrl ou Ctrl + shift . Ao selecioná-lo, use Ctrl + G para agrupá-los. Deve ficar assim 👇🏽

• Agora vamos adicionar ossos a este elemento. Bones ajudam a criar animações mais dinâmicas e realistas. Considerando como queremos que essa animação fique, adicionaremos ossos no pescoço e no peito para criar uma ilusão de respiração. Também adicionaremos ossos ao cabelo porque queremos que o cabelo se mova um pouco também.
• Selecione a ferramenta osso no canto superior esquerdo ou use Ctrl + B . Depois de adicionar os ossos, deve ficar assim 👇🏽

• Agora vamos renomear os ossos para facilitar a identificação. Também agruparemos todos os elementos da face e nomearemos esse novo grupo como face . Usando relacionamentos hierárquicos, podemos conectar os ossos às partes desse elemento que precisamos afetar ou deformar. Podemos fazer isso movendo os ossos para as formas que eles afetam diretamente. Para mover um grupo ou osso, selecione e mova-o usando o mouse. Vai ficar assim 👇🏽

• Em seguida, amarraremos nossos ossos e os pesaremos. A ligação garante que, quando um osso se move, as partes correspondentes da superfície do personagem se movam de acordo, criando a ilusão de deformação. A ponderação, também conhecida como ponderação de vértice, envolve atribuir valores de influência (pesos) a cada vértice da malha do personagem com base em sua proximidade a ossos específicos. Vamos navegar para o caminho da forma que estaríamos vinculando. Para o pescoço, é assim que o ligamos ao osso do pescoço.

  

  Depois de amarrar os ossos, definimos os vértices atribuindo pesos a eles. Aqui, observe que colocamos o último conjunto de vértices em 50% porque queremos que os dois ossos tenham um efeito de 50% sobre eles. Você deve usar 50%, especialmente quando os vértices definidos cobrem uma seção que afeta os dois ossos. Agora, faríamos o mesmo para o caminho do cabelo. Também vamos mudar os ossos esquerdo e direito de um para dois ossos para nos ajudar a conseguir o movimento fluido que queremos para o cabelo.

• Gostaríamos de ter um efeito de piscar nesta animação, para conseguir isso, usaremos o recurso de clipe nas duas formas de olho como esta 👇🏽

• Em seguida, adicionaremos rastreamento de cabeça usando restrições de translação a esse elemento porque queremos mover a cabeça durante a animação. Como é um elemento 2D, adicionar restrições de translação dará profundidade e alguma forma de efeito 3D. Selecione tudo e agrupe. Agora temos um único grupo.

• Em seguida, no canto superior esquerdo, selecione a ferramenta de grupo e crie um grupo no centro da cabeça (na área do nariz). Na barra de ferramentas à direita, altere seu estilo de grupo para destino, nomeie-o ctrl_front, duplique-o e nomeie a duplicata ctrl_back.

• Para o ctrl_back de destino, selecione a opção de restrições na barra de ferramentas à direita. Escolha restrições de tradução na lista de opções de restrições disponíveis. Clique no ícone antes da opção de restrição selecionada para definir suas propriedades.

• Defina a força para -100 e defina seu alvo como ctrl front. Agora, quando você move o ctrl front, o ctrl back se move na direção oposta. Isso nos ajudará a definir restrições para partes do rosto que devem se mover na direção oposta, como as orelhas. Deve ficar assim 👇🏽

  
  

  

• Agora vamos definir restrições para o resto da face. Também agruparemos os olhos (esquerdo e direito) e os ouvidos (esquerdo e direito) para nos ajudar a administrá-los melhor. Vamos definir restrições para os olhos assim 👇🏽

• Observe como primeiro definimos a origem do grupo de olhos para ser a mesma do ctrl_front . Assim, quando movermos o alvo ctrl_front , o grupo de olhos que agora está restrito a esse alvo se moverá com ele sem pular desajeitadamente. Faremos o mesmo para o seguinte:

Não precisamos definir restrições para os lábios.

É assim que fica depois que terminamos de adicionar todas as nossas restrições 👇🏽

💃🏽 🥳 Parabéns, conseguimos preparar nosso elemento com sucesso para o tipo de animação que queremos alcançar. Ufa!!

Hora da Animação!🕶️

Na barra de ferramentas à direita, clique no botão Animar para alternar para a interface de animação. Criaremos seis cronogramas de animação e amarraremos tudo com uma máquina de estado. Na linha do tempo, usando o que configuramos anteriormente com ossos e restrições, podemos definir quadros-chave para criar a animação que queremos alcançar.

A primeira animação da linha do tempo é a animação ociosa. Será o estado Idle da animação. Usaremos isso quando o elemento animado não estiver ativado.

• Primeiro, agrupamos todas as partes do nosso elemento e o nomeamos como personagem antes de iniciar o processo de animação.
• Em seguida, definimos a duração para 4 minutos,
• defina nossa área de trabalho e defina o tipo de linha do tempo como loop. É ideal para uma animação ociosa.

Para esta animação inativa, criaremos uma ilusão de respiração, um leve movimento do cabelo e um piscar de olhos. Usando o osso do pescoço, os ossos do cabelo e os elementos do olho direito/esquerdo, definiremos os quadros-chave necessários em diferentes poses, o que significa que podemos definir as propriedades específicas do item selecionado nos pontos da linha do tempo. Considerando o estilo de transição de um quadro-chave para o próximo, escolheremos o tipo de interpolação que precisamos. Você pode encontrá-lo na parte inferior à direita da seção Timeline. A interpolação é mantida, linear ou curva, dependendo de como você deseja mover de um quadro-chave para o próximo. Vai ficar assim 👇🏽

No gif acima, você pode notar que nos diferentes quadros-chave na linha do tempo, definimos diferentes poses para os itens selecionados. Essa transição de um quadro-chave para o outro forma a animação. Usando este mesmo procedimento, criaremos as outras cinco linhas do tempo. Você pode clicar aqui para ver esta animação e conferir as diferentes linhas do tempo em detalhes. Fica assim 👇🏽

Configure sua máquina de estado🏍️

Chegamos à parte final deste processo de animação. Uma máquina de estado é uma maneira visual de conectar a animação. Usando a máquina de estado, podemos controlar qual animação é reproduzida com base na entrada que definimos. Podemos misturar ou mesclar duas ou mais animações de linha do tempo para que sejam reproduzidas simultaneamente. Devemos selecionar o tipo certo de entradas na máquina de estado, pois é isso que usaremos para controlar a animação no aplicativo.

Na máquina de estados, temos três tipos de entradas:

• Número: uma entrada de número é um valor numérico usado em uma máquina de estado para representar e controlar dados quantitativos. Você pode definir a máquina de estado para fazer a transição para um estado específico, dependendo do valor numérico de entrada de número.
• Booleano: Uma entrada booleana é um valor binário que pode ser verdadeiro ou falso. Agora, a máquina de estado faz a transição para um estado específico, dependendo do valor de entrada, verdadeiro ou falso.
• Gatilho: Uma entrada de gatilho é uma entrada usada para sinalizar um evento. Ao contrário das entradas booleanas que mantêm seu estado até serem explicitamente alteradas, os acionadores são redefinidos para seu estado padrão após serem acionados.

No painel Animation, clique no botão de adição e crie uma máquina de estado. Vamos nomeá-lo Login State Machine . Esse nome é importante porque é dele que precisaremos para identificar nossa máquina de estado posteriormente no código.

Siga as etapas abaixo para configurar sua máquina de estado:

1. Crie duas camadas em nossa máquina de estado e renomeie uma para Type . Múltiplas camadas nos ajudam a jogar vários estados ao mesmo tempo. Para obter outra camada em sua máquina de estado, clique no ícone de adição na parte superior do gráfico StateMachine.
2. Na seção Inputs, você deve vê-lo rotulado ao lado da máquina de estado. Clique no ícone de mais, selecione uma entrada de número e nomeie-a como . Usaremos essa entrada ao mesclar (misturar) as animações da linha do tempo look_left e look_right para que, à medida que os números aumentem, pareça que o personagem está olhando da esquerda para a direita.
3. Crie outra entrada, desta vez um booleano, e nomeie-a como check . Ele controla quando queremos que a animação apareça. Crie duas entradas de gatilho, renomeie uma como falha e a outra como sucesso . Você precisará disso para acionar os estados de sucesso e falha.
4. Agora arraste e solte a animação look_idle e a animação look_left no gráfico da camada Type . Neste gráfico, você verá alguns estados padrão:
   • Entry - Este é o ponto de entrada de qualquer estado de animação conectado a este estado.
   • Sair - Este é o ponto de saída de qualquer estado de animação conectado a este estado
   • Anystate - Qualquer estado de animação conectado a isso é reproduzido desde que atenda às condições na transição.
5. A transição é a linha e a seta conectando dois ou mais estados. Olhando para a direção da seta, você pode ver como os estados agora estão conectados. Ao clicar nele, você pode ver as propriedades da transição. Nas propriedades, você pode criar uma condição. Usando qualquer uma das entradas que você criou anteriormente, você pode definir a condição que deseja que seja cumprida antes do próximo estado na transição.
6. Na camada de texto , conecte os estados Entry , look_Idle e look_left usando a transição linearmente. Para o estado look_left , gostaríamos que fosse uma mistura das animações look_left e look_right . Para fazer isso, selecione o estado look_left no gráfico e, no lado esquerdo do painel, escolha Blend 1d. Para a opção de entrada, selecione a entrada look . Esta entrada controlará nossa mistura. Em seguida, na seção Linhas de tempo, selecione as linhas de tempo look_left e look_right e defina-as como 0 e 100. Quando você aumenta a figura de entrada de aparência , ela mescla as duas animações.
7. Conecte o estado de mesclagem ao look_idle usando a linha de transição e a seta. Agora clique na seta e defina a condição para quando a entrada de verificação for falsa. Isso nos ajudará a controlar a animação e informar ao StateMachine para mostrar o estado look_idle quando o booleano de verificação for falso. Faça o mesmo para a seta de transição que aponta de look_idle de volta para o estado de mesclagem, mas agora verifique se booleano está definido como verdadeiro.
8. Agora, quando você clicar na caixa de seleção para a entrada de verificação , poderá defini-la como verdadeira ou falsa. Quando você jogar a máquina de estado, ela continuará mostrando o estado look_Idle até que você altere o booleano de verificação para verdadeiro, então iniciará a animação look_left . Para combinar look_left e look_right , você aumenta o valor do número de entrada Look.
9. Agora, em Layer1, é aqui que você adicionará os gatilhos de sucesso e falha . Do estado de entrada , você conectará o estado ocioso . No estado inativo , conecte os estados de sucesso e falha . Na transição do estado inativo para o estado de sucesso , adicione uma condição. Nesta condição , adicione a entrada do acionador de sucesso . Está dizendo que a máquina de estado deve reproduzir a animação de sucesso somente quando a entrada de sucesso for acionada.
10. Faça o mesmo para a transição de estado de falha , mas adicione o gatilho de falha na condição . Agora, a partir do sucesso , crie uma linha de transição de volta ao idle. Aqui, selecione Exit time e defina-o em 100%. Isso significa que a animação inativa só será reproduzida quando a animação de sucesso terminar de ser reproduzida. Faça o mesmo para a transição de failback para ocioso .

Agora a animação completa na máquina de estados ficará assim 👇🏽

Confira a animação completa e a máquina de estado aqui .

Parabéns 🥳, animamos com sucesso nosso elemento e o configuramos com uma máquina de estado! Porém, antes de exportarmos o arquivo rive, vamos alterar o fundo e as cores da camisa do personagem. Vai ficar assim👇🏽

A cor de fundo é (#B581EB) e a cor da camisa do personagem é (#BD08D7)

Aqui fica o link da animação para ver tudo ao pormenor

Implemente Animação em seu Flutter App👨‍🚒

Usaremos esta animação em nossa página de login. Crie um projeto de aplicativo Flutter e adicione a dependência do Rive ao pubspec.yaml

 dependencies: rive: ^0.11.12

Além disso, adicione o arquivo Rive exportado aos recursos do projeto. Agora podemos prosseguir para criar a interface do usuário com base em nosso design. Nosso objetivo é que a animação faça o seguinte:

• reaja com a animação de sucesso quando o e-mail/senha estiver correto
• reagir com a animação de falha quando o e-mail/senha estiver errado
• responda com a direção do cursor no campo de texto

Primeiro definiremos algumas coisas antes da função Widget Build.

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

Aqui, podemos observar o seguinte:

• O e-mail e a senha corretos são definidos.
• O nó de foco e o controlador de edição de texto para o e-mail e a senha também são definidos.
• Aqui, o controlador Rive e as entradas são definidas como anuláveis. Você percebe que as entradas são definidas usando o nome exato que usam na máquina de estado.
• O booleano de carregamento e erro é definido.
• Nas funções emailFocus e passwordFocus , a entrada de verificação é alterada com base no booleano FocusNode.hasFocus
• Em seguida, nas funções initState e dispose , vemos que os ouvintes são adicionados e removidos. Os ouvintes são usados para ouvir a mudança de foco.

Você pode verificar o código da interface do usuário e o restante do código aqui . Este trecho de código mostra como adicionar o RiveAsset:

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

No código acima, podemos observar o seguinte:

• O StateMachine tem o mesmo nome que demos no editor Rive
• O controlador e as entradas são definidos

Aqui está o código para a função de login:

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

Confira o código completo aqui .

Ao fazer isso, concluímos nosso código de animação de login. Aqui está como tudo parece:

Conclusão🏋️‍♀️

Parabéns! Concluímos esta simples animação interativa de login. Aqui está uma visão geral de tudo o que conseguimos realizar:

• Configure nosso elemento na prancheta do Rive,
• Crie diferentes estados animados deste elemento,
• Junte todos esses estados com a ajuda da máquina de estado
• Exporte e adicione ao aplicativo Flutter

Seguindo este tutorial passo a passo, você pode enfrentar alguns gargalos, mas ficará mais fácil com a prática. Você pode entrar em contato comigo no Twitter ou comentar se precisar de ajuda enquanto segue este tutorial.

Confira estes tutoriais em vídeo para entender melhor a animação do Rive

Você também pode conferir o canal Rive para vários tutoriais em vídeo sobre as animações do Rive.

Referências🧶

Personagem de login animado