Rive Animation for Flutter: ¡una guía para principiantes para crear animaciones asombrosas con facilidad!

Las animaciones suelen aumentar el atractivo visual de una aplicación o sitio web y mejoran la participación general de los usuarios. Según un estudio de Forrester Research, los sitios web con animaciones bien ejecutadas experimentan un aumento en la participación de los usuarios de hasta un 400 %. Las animaciones atractivas pueden captar la atención de los usuarios y alentarlos a interactuar más con la plataforma. Sin embargo, existe una curva de aprendizaje para que los desarrolladores dominen la animación, especialmente cuando trabajan con herramientas y técnicas de animación más avanzadas.

Comprender Rive como desarrollador sin experiencia en animación puede ser relativamente fácil en comparación con otras herramientas o marcos de animación. Rive (anteriormente conocido como Flare) está diseñado para ser fácil de usar y accesible para los desarrolladores, incluso para aquellos con poca o ninguna experiencia previa en animación. En este artículo, aprenderá cómo crear animaciones Rive sencillas e impresionantes con facilidad y cómo administrarlas en su aplicación Flutter.

Tabla de contenido

• Introducción a Rive🧙‍♂️

  • Conceptos básicos en Rive🧗

• Una animación de inicio de sesión interactiva simple🚀

  • Configura el elemento en tu mesa de trabajo📃
  • ¡Tiempo de animación!🕶️
  • Configura tu máquina de estado 🏍️
  • Implemente la animación en su aplicación Flutter👨‍🚒

• Conclusión 🏋️‍♀️

• Referencias🧶

  
  

Introducción a Rive🧙‍♂️

Rive es una herramienta de animación potente y fácil de usar y un motor de tiempo de ejecución que permite a los desarrolladores y diseñadores crear animaciones impresionantes e interactivas para varias plataformas, incluidas aplicaciones móviles, aplicaciones web y juegos.

Conceptos básicos en Rive🧗

Estos son los conceptos clave:

1. Mesa de trabajo: una mesa de trabajo es un lienzo donde creas tu animación. Es el lugar principal para crear y organizar elementos de animación, como grupos, restricciones, huesos, etc.
2. Línea de tiempo: La línea de tiempo es donde se definen las animaciones. Le permite establecer fotogramas clave y especificar cómo deben cambiar los objetos con el tiempo. Los fotogramas clave representan puntos específicos en el tiempo en los que las propiedades de un objeto se definen explícitamente. El sistema de animación interpola entre fotogramas clave para crear transiciones suaves.
3. Máquina de estado: Rive tiene una función de máquina de estado que le permite especificar diferentes estados para su animación. Puede desencadenar transiciones de estado según la entrada del usuario u otras condiciones, lo que permite la creación de animaciones interactivas con diferentes comportamientos según el estado actual.
4. Exportación de código: Rive le permite exportar animaciones como código, lo que facilita su integración en sus aplicaciones. Para los desarrolladores de Flutter, Rive ofrece un tiempo de ejecución de Flutter y un paquete de integración que facilita el uso de animaciones de Rive en proyectos de Flutter.

Una animación de inicio de sesión interactiva simple🚀

Pasaremos por el proceso de crear una animación de inicio de sesión simple y exportarla a nuestra aplicación Flutter. Usaremos StateMachine para administrar la interactividad de esta animación en la aplicación. Al final, debería verse así 👇🏽

Configura el elemento en tu mesa de trabajo📃

Siga los pasos a continuación para configurar el elemento en la mesa de trabajo de Rive:

• Primero, necesitaremos obtener el elemento en sí. Lo obtuve de las plantillas de ilustración de User Personas en Figma. Exporte el elemento como un archivo SVG.
• Vaya a Rive Haga clic en el botón Comenzar para abrir sus borradores
• En sus borradores, cree un nuevo archivo y seleccione una mesa de trabajo en blanco.
• Arrastre y suelte el elemento en la mesa de trabajo, se agregará automáticamente a la carpeta de activos y podrá verlo colocado en su mesa de trabajo, debería verse así 👇🏽

• En la barra lateral, agruparemos las diferentes formas que componen este elemento y las nombraremos en consecuencia. Selecciona todo lo que quieras agrupar usando Ctrl o Ctrl + shift . Cuando lo selecciones, usa Ctrl + G para agruparlos. Debería verse así 👇🏽

• Ahora agregaremos huesos a este elemento. Los huesos ayudan a crear animaciones más dinámicas y realistas. Teniendo en cuenta cómo queremos que resulte esta animación, agregaremos huesos en el cuello y el pecho para crear una ilusión de respiración. También agregaremos huesos al cabello porque queremos que el cabello también se mueva ligeramente.
• Seleccione la herramienta de hueso en la esquina superior izquierda o use Ctrl + B. Después de agregar huesos, debería verse así 👇🏽

• Ahora cambiaremos el nombre de los huesos para una fácil identificación. También agruparemos todos los elementos de la cara y nombraremos esta nueva cara de grupo. Usando relaciones jerárquicas, podemos conectar los huesos a las partes de este elemento que necesitamos afectar o deformar. Podemos hacer esto moviendo los huesos a las formas que afectan directamente. Para mover un grupo o un hueso, selecciónelo y muévalo con el mouse. Se verá así 👇🏽

• A continuación, vendaremos nuestros huesos y los pesaremos. La unión asegura que cuando un hueso se mueve, las partes correspondientes de la superficie del personaje se mueven en consecuencia, creando la ilusión de deformación. La ponderación, también conocida como ponderación de vértices, implica asignar valores de influencia (pesos) a cada vértice de la malla del personaje en función de su proximidad a huesos específicos. Navegaremos a la ruta de la forma que estaríamos enlazando. Para el cuello, así es como lo unimos al hueso del cuello.

  

  Después de unir los huesos, establecemos los vértices asignándoles pesos. Aquí, observe que hemos puesto el último conjunto de vértices al 50% porque queremos que los dos huesos tengan un efecto del 50% sobre ellos. Debe usar el 50%, especialmente cuando los vértices establecidos cubren una sección que afecta a los dos huesos. Ahora, haríamos lo mismo con el camino del cabello. También cambiaremos los huesos izquierdo y derecho de uno a dos huesos para ayudarnos a lograr el movimiento fluido que queremos para el cabello.

• Nos gustaría tener un efecto de parpadeo en esta animación, para lograrlo, usaremos la función de clip en las dos formas de ojos como esta 👇🏽

• A continuación, agregaremos el seguimiento de la cabeza mediante restricciones de traducción a este elemento porque queremos mover la cabeza durante la animación. Dado que es un elemento 2d, agregar restricciones de traducción le dará profundidad y algún tipo de efecto 3d. Selecciona todo y agrúpalo. Ahora tenemos un solo grupo.

• Luego, en la esquina superior izquierda, seleccione la herramienta de grupo y cree un grupo en el centro de la cabeza (en el área de la nariz). En la barra de herramientas de la derecha, cambie su estilo de grupo a destino, asígnele el nombre ctrl_front, duplíquelo y nombre el duplicado ctrl_back.

• Para el objetivo ctrl_back, seleccione la opción de restricciones en la barra de herramientas de la derecha. Elija restricciones de traducción de la lista de opciones de restricciones disponibles. Haga clic en el icono antes de la opción de restricción seleccionada para establecer sus propiedades.

• Establezca la fuerza en -100 y establezca su objetivo en ctrl al frente. Ahora, cuando mueve el Ctrl hacia adelante, el Ctrl hacia atrás se mueve en la dirección opuesta. Nos ayudará a establecer restricciones para partes de la cara que deben moverse en una dirección opuesta, como las orejas. Debería verse así 👇🏽

  
  

  

• Ahora estableceremos restricciones para el resto de la cara. También agruparemos los ojos (izquierdo y derecho) y los oídos (izquierdo y derecho) para ayudarnos a manejarlos mejor. Estableceremos restricciones para los ojos así 👇🏽

• Observe cómo primero establecemos el origen del grupo de ojos para que sea el mismo que el de ctrl_front . De modo que cuando movemos el objetivo ctrl_front , el grupo de ojos que ahora está restringido a este objetivo se moverá con él sin saltar de manera incómoda. Haremos lo mismo para lo siguiente:

No necesitamos establecer restricciones para los labios.

Así es como se ve después de que terminamos de agregar todas nuestras restricciones 👇🏽

💃🏽 🥳 Felicitaciones, hemos logrado que nuestro elemento esté listo para el tipo de animación que queremos lograr. ¡¡Uf!!

¡Tiempo de animación!🕶️

En la barra de herramientas de la derecha, haga clic en el botón Animar para cambiar a la interfaz de animación. Crearemos seis líneas de tiempo de animación y vincularemos todo con una máquina de estado. En la línea de tiempo, usando lo que hemos configurado previamente con huesos y restricciones, podemos establecer fotogramas clave para crear la animación que queremos lograr.

La primera animación de la línea de tiempo es la animación inactiva. Será el estado inactivo de la animación. Usaremos esto cuando el elemento animado no esté activado.

• Primero, agrupamos todas las partes de nuestro elemento y lo nombramos carácter antes de comenzar el proceso de animación.
• Luego establecemos la duración en 4 minutos,
• configure nuestra área de trabajo y configure el tipo de línea de tiempo en bucle. Es ideal para una animación inactiva.

Para esta animación inactiva, crearemos una ilusión de respiración, un ligero movimiento del cabello y un parpadeo. Usando el hueso del cuello, los huesos del cabello y los elementos del ojo derecho/izquierdo, estableceremos los fotogramas clave necesarios en diferentes poses, lo que significa que podemos establecer las propiedades específicas del elemento seleccionado en los puntos de la línea de tiempo. Teniendo en cuenta el estilo de transición de un fotograma clave al siguiente, elegiremos el tipo de interpolación que necesitamos. Puede encontrarlo en la parte inferior derecha de la sección Línea de tiempo. La interpolación es sostenida, lineal o curva, según cómo desee pasar de un fotograma clave al siguiente. Se verá así 👇🏽

En el gif anterior, puede notar que en los diferentes fotogramas clave en la línea de tiempo, hemos establecido diferentes poses para los elementos seleccionados. Esta transición de un fotograma clave al otro forma la animación. Usando este mismo procedimiento, crearemos las otras cinco líneas de tiempo. Puede hacer clic aquí para ver esta animación y ver las diferentes líneas de tiempo en detalle. Se parece a esto 👇🏽

Configura tu máquina de estado 🏍️

Hemos llegado a la parte final de este proceso de animación. Una máquina de estado es una forma visual de conectar la animación. Usando la máquina de estado, podemos controlar qué animación se reproduce en función de la entrada que configuramos. Podemos mezclar o combinar dos o más animaciones de línea de tiempo para que se reproduzcan simultáneamente. Debemos seleccionar el tipo correcto de entradas en la máquina de estado porque esto es lo que usaremos para controlar la animación en la aplicación.

En la máquina de estado, tenemos tres tipos de entradas:

• Número: una entrada de número es un valor numérico utilizado en una máquina de estado para representar y controlar datos cuantitativos. Puede configurar la máquina de estado para que haga la transición a un estado particular según el valor numérico ingresado.
• Boolean: una entrada booleana es un valor binario que puede ser verdadero o falso. Ahora la máquina de estado pasa a un estado particular según el valor de entrada, ya sea verdadero o falso.
• Disparador: Una entrada de disparador es una entrada utilizada para señalar un evento. A diferencia de las entradas booleanas que mantienen su estado hasta que se cambian explícitamente, los activadores se restablecen a su estado predeterminado después de activarse.

En el panel Animación, haga clic en el botón más y cree una máquina de estado. Lo llamaremos Máquina de estado de inicio de sesión . Este nombre es importante porque es lo que necesitaremos para identificar nuestra máquina de estado más adelante en el código.

Siga los pasos a continuación para configurar su máquina de estado:

1. Cree dos capas en nuestra máquina de estado y cambie el nombre de una a Type . Múltiples capas nos ayudan a jugar varios estados al mismo tiempo. Para obtener otra capa en su máquina de estado, haga clic en el ícono más en la parte superior del gráfico de StateMachine.
2. En la sección Entradas, debería verlo etiquetado justo al lado de la máquina de estado. Haga clic en el ícono más, seleccione una entrada de número y asígnele el nombre look . Usaremos esta entrada mientras fusionamos (mezclamos) las animaciones de la línea de tiempo look_left y look_right para que, a medida que aumentan los números, parezca que el personaje está mirando de izquierda a derecha.
3. Cree otra entrada, esta vez booleana, y asígnele el nombre check . Controla cuándo queremos que se vea la animación. Cree dos entradas de activación, cambie el nombre de uno por falla y el otro por éxito . Necesitará esto para activar los estados de éxito y error.
4. Ahora arrastre y suelte la animación look_idle y la animación look_left en el gráfico de la capa Tipo . En este gráfico, verá algunos estados predeterminados:
   • Entrada: este es el punto de entrada de cualquier estado de animación conectado a este estado.
   • Salir: este es el punto de salida de cualquier estado de animación conectado a este estado.
   • Cualquier estado: cualquier estado de animación conectado a este se reproduce siempre que cumpla las condiciones de la transición.
5. La transición es la línea y la flecha que conectan dos o más estados. Mirando la dirección de la flecha, puede ver cómo los estados ahora están conectados. Al hacer clic en esto, puede ver las propiedades de la transición. En las propiedades, puede crear una condición. Usando cualquiera de las entradas que creó anteriormente, puede definir la condición que desea que se cumpla antes del siguiente estado en la transición.
6. En la capa de texto , conecte los estados Entry , look_Idle y look_left usando la transición de forma lineal. Para el estado look_left , nos gustaría que fuera una combinación de las animaciones look_left y look_right . Para hacer esto, seleccione el estado look_left en el gráfico y, en el lado izquierdo del panel, elija Blend 1d. Para la opción de entrada, seleccione la entrada de búsqueda . Esta entrada controlará nuestra mezcla. Luego, en la sección Líneas de tiempo, seleccione las líneas de tiempo look_left y look_right y configúrelas en 0 y 100. Cuando aumenta la cifra de entrada de look , combina las dos animaciones.
7. Conecte el estado de mezcla a look_idle usando la línea de transición y la flecha. Ahora haga clic en la flecha y establezca la condición cuando la entrada de verificación sea falsa. Nos ayudará a controlar la animación y decirle a StateMachine que muestre el estado look_idle cuando el booleano de verificación sea falso. Haga lo mismo con la flecha de transición que apunta desde look_idle de regreso al estado de mezcla, pero ahora verifique que boolean esté establecido en verdadero.
8. Ahora, cuando hace clic en la casilla de verificación para la entrada de verificación , puede establecerla en verdadero o falso. Cuando reproduzca la máquina de estado, seguirá mostrando el estado look_Idle hasta que cambie el booleano de verificación a verdadero, luego comenzará la animación look_left . Para combinar look_left y look_right , aumenta el valor del número de entrada de Look.
9. Ahora, en la capa 1, aquí es donde agregará los disparadores de éxito y falla . Desde el estado de entrada , conectará el estado inactivo . Desde el estado inactivo , conecte los estados de éxito y error . En la transición del estado inactivo al correcto , agregue una condición. En esta condición , agregue la entrada del disparador de éxito . Está diciendo que la máquina de estado debe reproducir la animación de éxito solo cuando se activa la entrada de éxito .
10. Haga lo mismo para la transición de estado fallido , pero en su lugar agregue el disparador fallido en la condición . Ahora, desde el éxito , cree una línea de transición de regreso al estado inactivo. Aquí seleccione Tiempo de salida y configúrelo al 100%. Significa que la animación inactiva solo se reproducirá cuando la animación exitosa haya terminado. Haga lo mismo para la conmutación por recuperación a inactividad .

Ahora la animación completa en máquina de estado se verá así 👇🏽

Vea la animación completa y la máquina de estado aquí .

¡Felicitaciones 🥳, animamos con éxito nuestro elemento y lo configuramos con una máquina de estado! Sin embargo, antes de exportar el archivo rive, cambiaremos el fondo y los colores de la camiseta del personaje. Se verá así 👇🏽

El color de fondo es (#B581EB) y el color de la camisa del personaje es (#BD08D7)

Aquí está el enlace a la animación para ver todo en detalle.

Implemente la animación en su aplicación Flutter👨‍🚒

Usaremos esta animación en nuestra página de inicio de sesión. Cree un proyecto de aplicación Flutter y agregue la dependencia de Rive a pubspec.yaml

 dependencies: rive: ^0.11.12

Además, agregue el archivo Rive exportado a los activos de su proyecto. Ahora podemos seguir adelante para crear la interfaz de usuario basada en nuestro diseño. Nuestro objetivo es que la animación haga lo siguiente:

• reacciona con la animación de éxito cuando el correo electrónico o la contraseña son correctos
• reacciona con la animación de error cuando el correo electrónico o la contraseña son incorrectos
• responder con la dirección del cursor en el campo de texto

Primero definiremos algunas cosas antes de la función 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); }

Aquí, podemos señalar lo siguiente:

• Se definen el correo electrónico y la contraseña correctos.
• También se definen el nodo de enfoque y el controlador de edición de texto para el correo electrónico y la contraseña.
• Aquí, el controlador Rive y las entradas se definen como anulables. Observa que las entradas se definen usando el nombre exacto que usan en la máquina de estado.
• Se define el booleano de carga y error.
• En las funciones emailFocus y passwordFocus , la entrada de verificación se cambia en función del booleano FocusNode.hasFocus
• Luego, en las funciones initState y dispose , vemos que los oyentes se agregan y eliminan. Los oyentes están acostumbrados a escuchar el cambio de enfoque.

Puede consultar el código de UI y el resto del código aquí . Este fragmento de código muestra cómo agregar el 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"); }, ), ),

Del código anterior, podemos notar lo siguiente:

• StateMachine tiene el mismo nombre que le pusimos en el editor de Rive
• El controlador y las entradas se definen

Aquí está el código para la función de inicio de sesión:

 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; }); }

Consulta el código completo aquí .

Al hacer esto, hemos completado nuestro código de animación de inicio de sesión. Así es como se ve todo:

Conclusión 🏋️‍♀️

¡Felicidades! Hemos completado esta sencilla animación interactiva de inicio de sesión. Aquí hay una descripción general de todo lo que pudimos lograr:

• Configure nuestro elemento en la mesa de trabajo de Rive,
• Crea diferentes estados animados de este elemento,
• Ponga todos estos estados juntos con la ayuda de la máquina de estado
• Exportarlo y agregarlo a la aplicación Flutter

Siguiendo este tutorial paso a paso, es posible que enfrente algunos cuellos de botella, pero será más fácil con la práctica. Puede comunicarse conmigo en Twitter o comentar si necesita ayuda mientras sigue este tutorial.

Consulte estos tutoriales en vídeo para comprender mejor la animación de Rive

También puede consultar el canal de Rive para ver varios tutoriales en video sobre animaciones de Rive.

Referencias🧶

Carácter de inicio de sesión animado