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 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. poderosa Conceitos básicos no Rive🧗 Aqui estão os principais conceitos: 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. Prancheta: 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. Linha do tempo: 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. State Machine: 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. Exportação de código: 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 no Figma. Exporte o elemento como um arquivo SVG. modelos de ilustração de User Personas Ir para Clique no botão para abrir seus rascunhos Rive GetStarted 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 as diferentes formas que compõem este elemento e nomeá-las de acordo. Selecione tudo o que deseja agrupar usando . Ao selecioná-lo, use para agrupá-los. Deve ficar assim 👇🏽 agrupar Ctrl ou Ctrl + shift Ctrl + G 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 . Depois de adicionar os ossos, deve ficar assim 👇🏽 Ctrl + B Agora vamos renomear os ossos para facilitar a identificação. Também agruparemos todos os elementos da face e nomearemos esse novo grupo . 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 👇🏽 como face 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 duplique-o e nomeie a duplicata ctrl_front, ctrl_back. Para o 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. ctrl_back de destino, Defina a força para -100 e defina seu alvo como Agora, quando você move o o 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 👇🏽 ctrl front. ctrl front, ctrl back 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 . Assim, quando movermos o alvo , o grupo de olhos que agora está restrito a esse alvo se moverá com ele sem pular desajeitadamente. Faremos o mesmo para o seguinte: ctrl_front ctrl_front Grupo força de restrição posição de origem Alvo copos 5% o mesmo que ctrl_front origem ctrl_front sobrancelhas 10% o mesmo que ctrl_front origem ctrl_front ouvidos 5% não há necessidade de definir a origem ctrl_back nariz 5% o mesmo que ctrl_front origem ctrl_front face 5% o mesmo que ctrl_front origem ctrl_front 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 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. Animar 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 para ver esta animação e conferir as diferentes linhas do tempo em detalhes. Fica assim 👇🏽 aqui 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 . Esse nome é importante porque é dele que precisaremos para identificar nossa máquina de estado posteriormente no código. Login State Machine Siga as etapas abaixo para configurar sua máquina de estado: Crie duas camadas em nossa máquina de estado e renomeie uma para . 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. Type 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 . Usaremos essa entrada ao mesclar (misturar) as animações da linha do tempo e para que, à medida que os números aumentem, pareça que o personagem está olhando da esquerda para a direita. como look_left look_right Crie outra entrada, desta vez um booleano, e nomeie-a como . Ele controla quando queremos que a animação apareça. Crie duas entradas de gatilho, renomeie uma e a outra . Você precisará disso para acionar os estados de sucesso e falha. check como falha como sucesso Agora arraste e solte a animação e a animação no gráfico da camada . Neste gráfico, você verá alguns estados padrão: look_idle look_left Type 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. 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 Usando qualquer uma das entradas que você criou anteriormente, você pode definir a que deseja que seja cumprida antes do próximo estado na transição. condição. condição Na camada , conecte os estados , e usando a transição linearmente. Para o estado , gostaríamos que fosse uma mistura das animações e . Para fazer isso, selecione o estado no gráfico e, no lado esquerdo do painel, escolha Blend 1d. Para a opção de entrada, selecione a entrada . Esta entrada controlará nossa mistura. Em seguida, na seção Linhas de tempo, selecione as linhas de tempo e e defina-as como 0 e 100. Quando você aumenta a figura de entrada , ela mescla as duas animações. de texto Entry look_Idle look_left look_left look_left look_right look_left look look_left look_right de aparência Conecte o estado de mesclagem ao 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 quando o booleano de verificação for falso. Faça o mesmo para a seta de transição que aponta de de volta para o estado de mesclagem, mas agora booleano está definido como verdadeiro. look_idle look_idle look_idle verifique se Agora, quando você clicar na caixa de seleção para a entrada , poderá defini-la como verdadeira ou falsa. Quando você jogar a máquina de estado, ela continuará mostrando o estado até que você altere o booleano para verdadeiro, então iniciará a animação . Para combinar e , você aumenta o valor do número de entrada Look. de verificação look_Idle de verificação look_left look_left look_right Agora, em Layer1, é aqui que você adicionará os gatilhos e . Do estado , você conectará o estado . No estado , conecte os estados e . Na transição do estado para o estado , adicione uma Nesta , adicione a entrada do acionador . Está dizendo que a máquina de estado deve reproduzir a animação somente quando a entrada for acionada. de sucesso falha de entrada ocioso inativo de sucesso falha inativo de sucesso condição. condição de sucesso de sucesso de sucesso Faça o mesmo para a transição de estado , mas adicione o gatilho na . Agora, a partir do , crie uma linha de transição de volta ao Aqui, selecione e defina-o em 100%. Isso significa que a animação inativa só será reproduzida quando a animação terminar de ser reproduzida. Faça o mesmo para a transição para . de falha de falha condição sucesso idle. Exit time de sucesso de failback 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 da animação para ver tudo ao pormenor link 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 = "nikki@gmail.com"; 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 e , a entrada de verificação é alterada com base no booleano emailFocus passwordFocus FocusNode.hasFocus Em seguida, nas funções e , vemos que os ouvintes são adicionados e removidos. Os ouvintes são usados para ouvir a mudança de foco. initState dispose Você pode verificar o código da interface do usuário e o restante do código . Este trecho de código mostra como adicionar o RiveAsset: aqui 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 ou comentar se precisar de ajuda enquanto segue este tutorial. Twitter Confira estes tutoriais em vídeo para entender melhor a animação do Rive Técnicas básicas de amarração Máquinas de estado Ilustração da plataforma para rastreamento de cabeça Você também pode conferir o para vários tutoriais em vídeo sobre as animações do Rive. canal Rive Referências🧶 Personagem de login animado Publicado também . aqui
