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 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. potente Conceptos básicos en Rive🧗 Estos son los conceptos clave: 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. Mesa de trabajo: 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. Línea de tiempo: 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. Máquina de estado: 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. Exportación de código: 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 en Figma. Exporte el elemento como un archivo SVG. las plantillas de ilustración de User Personas Vaya a Haga clic en el botón para abrir sus borradores Rive Comenzar 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, las diferentes formas que componen este elemento y las nombraremos en consecuencia. Selecciona todo lo que quieras agrupar usando . Cuando lo selecciones, usa para agruparlos. Debería verse así 👇🏽 agruparemos Ctrl o Ctrl + shift Ctrl + G 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 Después de agregar huesos, debería verse así 👇🏽 Ctrl + B. 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 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í 👇🏽 cara 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 duplíquelo y nombre el duplicado ctrl_front, ctrl_back. Para el 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. objetivo ctrl_back, Establezca la fuerza en -100 y establezca su objetivo en Ahora, cuando mueve el el 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í 👇🏽 ctrl al frente. Ctrl hacia adelante, Ctrl hacia atrás 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 . De modo que cuando movemos el objetivo , 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: ctrl_front ctrl_front Grupo Fuerza de la restricción Posición de origen Objetivo anteojos 5% igual que el origen de ctrl_front ctrl_frente cejas 10% igual que el origen de ctrl_front ctrl_frente orejas 5% no es necesario establecer el origen ctrl_atrás nariz 5% igual que el origen de ctrl_front ctrl_frente rostro 5% igual que el origen de ctrl_front ctrl_frente 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 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. Animar 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 para ver esta animación y ver las diferentes líneas de tiempo en detalle. Se parece a esto 👇🏽 aquí 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 . Este nombre es importante porque es lo que necesitaremos para identificar nuestra máquina de estado más adelante en el código. Máquina de estado de inicio de sesión Siga los pasos a continuación para configurar su máquina de estado: Cree dos capas en nuestra máquina de estado y cambie el nombre de una a . 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. Type 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 . Usaremos esta entrada mientras fusionamos (mezclamos) las animaciones de la línea de tiempo y para que, a medida que aumentan los números, parezca que el personaje está mirando de izquierda a derecha. look look_left look_right Cree otra entrada, esta vez booleana, y asígnele el nombre . Controla cuándo queremos que se vea la animación. Cree dos entradas de activación, cambie el nombre de uno y el otro . Necesitará esto para activar los estados de éxito y error. check por falla por éxito Ahora arrastre y suelte la animación y la animación en el gráfico de la capa . En este gráfico, verá algunos estados predeterminados: look_idle look_left Tipo 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. 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 Usando cualquiera de las entradas que creó anteriormente, puede definir la que desea que se cumpla antes del siguiente estado en la transición. condición. condición En la capa , conecte los estados , y usando la transición de forma lineal. Para el estado , nos gustaría que fuera una combinación de las animaciones y . Para hacer esto, seleccione el estado en el gráfico y, en el lado izquierdo del panel, elija Blend 1d. Para la opción de entrada, seleccione la entrada . Esta entrada controlará nuestra mezcla. Luego, en la sección Líneas de tiempo, seleccione las líneas de tiempo y y configúrelas en 0 y 100. Cuando aumenta la cifra de entrada , combina las dos animaciones. de texto Entry look_Idle look_left look_left look_left look_right look_left de búsqueda look_left look_right de look Conecte el estado de mezcla a 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 cuando el booleano de verificación sea falso. Haga lo mismo con la flecha de transición que apunta desde de regreso al estado de mezcla, pero ahora que boolean esté establecido en verdadero. look_idle look_idle look_idle verifique Ahora, cuando hace clic en la casilla de verificación para la entrada , puede establecerla en verdadero o falso. Cuando reproduzca la máquina de estado, seguirá mostrando el estado hasta que cambie el booleano a verdadero, luego comenzará la animación . Para combinar y , aumenta el valor del número de entrada de Look. de verificación look_Idle de verificación look_left look_left look_right Ahora, en la capa 1, aquí es donde agregará los disparadores y . Desde el estado , conectará el estado . Desde el estado , conecte los estados y . En la transición del estado al , agregue una En esta , agregue la entrada del disparador . Está diciendo que la máquina de estado debe reproducir la animación solo cuando se activa la entrada . de éxito falla de entrada inactivo inactivo de éxito error inactivo correcto condición. condición de éxito de éxito de éxito Haga lo mismo para la transición de estado , pero en su lugar agregue el disparador en la . Ahora, desde el , cree una línea de transición de regreso al Aquí seleccione y configúrelo al 100%. Significa que la animación inactiva solo se reproducirá cuando la animación haya terminado. Haga lo mismo para la conmutación por a . fallido fallido condición éxito estado inactivo. Tiempo de salida exitosa recuperación 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 a la animación para ver todo en detalle. enlace 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 = "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); } 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 y , la entrada de verificación se cambia en función del booleano emailFocus passwordFocus FocusNode.hasFocus Luego, en las funciones y , vemos que los oyentes se agregan y eliminan. Los oyentes están acostumbrados a escuchar el cambio de enfoque. initState dispose Puede consultar el código de UI y el resto del código . Este fragmento de código muestra cómo agregar el RiveAsset: aquí 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 o comentar si necesita ayuda mientras sigue este tutorial. Twitter Consulte estos tutoriales en vídeo para comprender mejor la animación de Rive Técnicas básicas de rigging Máquinas de estado Rig Artwork para el seguimiento de la cabeza También puede consultar el para ver varios tutoriales en video sobre animaciones de Rive. canal de Rive Referencias🧶 Carácter de inicio de sesión animado También publicado . aquí
