Rive no es solo una herramienta de animación; es un ecosistema para crear experiencias interactivas. Como ellos mismos dicen: “Animation is a part of this puzzle, but not the entire story”. La plataforma se centra en permitirnos animar nuestras experiencias interactivas, desde diseños simples hasta proyectos complejos para aplicaciones, videojuegos y sitios web.
Mi Experiencia como Usuario
Como alguien que suele trabajar con herramientas como After Effects e Illustrator, mi transición a Rive fue sorprendentemente fluida. En Rive, puedes diseñar y animar directamente en el programa, lo que simplifica el flujo de trabajo al evitar cambiar constantemente entre aplicaciones.
Comencé aprendiendo con la playlist oficial de Rive en YouTube, que está en español y es increíblemente clara. Desde el módulo dos, puedes empezar a familiarizarte con las herramientas esenciales y, en poco tiempo, dominar la animación interactiva. Cabe destacar que Rive requiere conexión a internet, algo que descubrí de manera inesperada cuando intenté usarlo en un lugar con mala señal.
Casos de Éxito: Duolingo y Rive
Duolingo, uno de los primeros adoptantes de Rive, necesitaba algo más ligero y rápido que Lottie para sus nuevas funciones interactivas. Usando la State Machine de Rive, lograron reconstruir a todos sus personajes, incluso incorporando lip-syncing. Un ejemplo concreto es su animación de Walking Duo, que redujo su tamaño de 240 kb en JSON a solo 16 kb en Rive, demostrando la eficiencia del formato.
Rive y After Effects: Herramientas Complementarias
Aunque Rive no busca reemplazar After Effects, ambos tienen enfoques diferentes. After Effects es ideal para postproducción en cine y TV, mientras que Rive se especializa en gráficos interactivos para productos digitales. Si tu objetivo es crear interfaces interactivas o animaciones ligeras para apps, Rive es la mejor opción.
Interfaz de Usuario: Minimalismo y Eficiencia
La primera impresión que ofrece Rive es su interfaz limpia y minimalista. Desde el sidebar izquierdo puedes navegar entre tus archivos y acceder a recursos educativos o ejemplos comunitarios. Esto lo hace ideal para mantenerte enfocado en la producción sin distraerte con paneles complejos.
Rive está disponible en dos versiones: una de escritorio y otra web (en beta), que son casi idénticas en funcionalidad. Los elementos clave del editor incluyen:
- Hierarchy: Sistema padre-hijo para organizar capas, similar a Illustrator. Ésta es una gran ventaja si importas ilustraciones ya estructuradas.
- Assets: Biblioteca de medios donde gestionas audio, fuentes, imágenes y otros recursos.
- Artboard: Tu lienzo principal para diseñar y animar.
- Panel de herramientas: Edita colores, alineación, dimensiones y más.
Puedes alternar entre el modo de diseño y el de animación con la tecla «Tab», lo que agrega paneles como la línea de tiempo y el editor de nodos.
Animación en Rive
Una de las herramientas más potentes de Rive es el Graph Editor, que permite crear movimientos fluidos y aplicar principios de animación de manera sencilla. Desde configurar la escala, posición y rotación hasta modificar colores, el Graph Editor facilita el control total sobre cada aspecto de la animación.
Otro aspecto destacado es la posibilidad de animar vértices, permitiendo transformaciones detalladas. Por ejemplo, puedes convertir una letra «R» en un rectángulo y utilizar clipeo para crear transparencias. Además, la función Solo permite agrupar capas y alternar entre diferentes estados, ideal para animaciones interactivas.
En Rive, la organización de capas se basa en una jerarquía de tipo padre > hijo, similar a la utilizada en Illustrator. Esto permite estructurar las distintas partes de un proyecto de manera eficiente, algo esencial en el proceso de animación. Además, Rive incorpora una herramienta única llamada Solo, que facilita el trabajo con múltiples capas agrupadas al permitir visualizar únicamente una de ellas a la vez. Esta función resulta especialmente útil para manejar transiciones y estados interactivos, ya que simplifica la creación de cambios fluidos entre diferentes configuraciones.
En un ejercicio práctico, utilicé el clipeo de máscaras para simular un efecto de gases alrededor de un planeta, logrando un resultado visual dinámico. Además, ajusté el orden de dibujado en la luna, configurando la jerarquía para que, en un momento específico, pasara detrás del planeta. Estas herramientas no solo ofrecen flexibilidad, sino que también simplifican la creación de efectos complejos dentro de Rive. Una vez configuradas, el resto del trabajo se reduce a animar, lo que demuestra la eficacia y utilidad de estas funcionalidades.
Recursos para Mejorar
Animar en Rive es desafiante, pero hay recursos que pueden ayudarte a mejorar:
La playlist 12 Principles of Animation por TupTub.
The Animator’s Survival Kit de Richard Williams.
Character Animator Crash Course! de Eric Goldberg.
El canal de YouTube «Alex Grigg – Animation for Anyone«.
El Ecosistema de Rive
Rive ofrece una integración perfecta entre su editor, su formato de archivo y sus runtimes. Esto garantiza que lo que diseñes en el editor se vea y funcione exactamente igual en tus aplicaciones, sitios web o juegos. Éste es el verdadero valor de Rive: su enfoque en unificar diseño, animación e interactividad en un solo flujo de trabajo eficiente.
Ellos mismos mencionan que «Animation is a part of this puzzle, but not the entire story» por lo cual se centra más en brindarnos la posibilidad de animar nuestras experiencias interactivas.
El Texto
Rive ofrece múltiples opciones para trabajar con texto, y dos de las herramientas principales que debes dominar son las «Run» y los «Estilos de texto».
En el editor de diseño, puedes asignar valores básicos, pero al pasar al perfil de animación, estos elementos adquieren aún más utilidad. Por ejemplo, las Run pueden convertirse en interacciones, como permitir que el usuario introduzca su nombre, añadiendo un nivel extra de personalización.
Además, los modificadores son una poderosa herramienta para trabajar animaciones o aplicar estilos únicos al texto. Esto puede manejarse de manera individual para cada Run, brindando una gran flexibilidad en la creación de animaciones personalizadas.
Elementos Esenciales para Animar en Rive: Bones, Joysticks y Constraints
En Rive, los conceptos de Huesos (Bones), Joysticks y Constraints son elementos clave para trabajar con animaciones avanzadas. Aquí un desglose más detallado:
Bones (Huesos o Rigging)
El Rig nos permite crear un esqueleto para nuestros gráficos, lo que facilita la animación de manera estructurada y eficiente. Este esqueleto actúa como la base sobre la cual se mueven y deforman los gráficos vinculados, ofreciendo un control más intuitivo y fluido. Ideal para personajes, articulaciones, o cualquier elemento que requiera movimientos orgánicos.
Joysticks
Los Joysticks proporcionan un control visual que facilita la creación de animaciones combinadas. A través de este sistema, puedes utilizar diferentes estados o poses predefinidas y mezclarlas en tiempo real en una línea de tiempo, generando transiciones suaves y dinámicas.
Constraints
Los Constraints permiten controlar las propiedades de un objeto mediante las propiedades de otro. Esto incluye:
- Posición: Alinear un objeto con otro.
- Escala: Sincronizar cambios de tamaño entre objetos.
- Rotación y Movimiento: Hacer que un objeto reaccione de manera automática a la rotación o desplazamiento de otro.
Este nivel de control facilita la creación de interacciones complejas y dependencias entre objetos, optimizando la eficiencia del diseño de animaciones.
Máquinas de estados
La máquina de estados es una herramienta poderosa en Rive que permite integrar interactividad a las animaciones. Con ella, es posible definir cómo las animaciones cambian de un estado a otro en respuesta a entradas y eventos. Esto permite crear animaciones dinámicas y contextualmente inteligentes.
Interacción con líneas de tiempo
Puedes usar la máquina de estados para reproducir, pausar o cambiar entre diferentes líneas de tiempo según las entradas definidas. Esto facilita la creación de animaciones complejas que responden a interacciones del usuario o eventos del sistema.
Inputs: el corazón de la interactividad
Los inputs son fundamentales para controlar las transiciones entre estados. Hay tres tipos principales:
- Booleanos: Activan o desactivan estados (por ejemplo, «puerta abierta» o «puerta cerrada»).
- Trigger: Se activan una sola vez y regresan automáticamente a su estado inactivo (útil para eventos como «disparar» o «saltos»).
- Number: Permiten usar valores numéricos como entrada para controlar animaciones (por ejemplo, el nivel de progreso de una barra o la velocidad de un personaje).
Listeners
Los listeners son puntos de escucha en la máquina de estados que permiten reaccionar a ciertos eventos o condiciones en la animación. Por ejemplo, puedes usar listeners para ejecutar acciones como:
- Disparar un sonido.
- Detener la animación cuando llega a un punto específico.
- Notificar al sistema de un cambio en el estado de la animación.
Eventos y Runtime
Eventos
Los eventos son acciones específicas que ocurren dentro de la máquina de estados, como una transición entre estados o el inicio/fin de una animación. Estos eventos son útiles para sincronizar animaciones con otros elementos en tu proyecto, como cambiar una animación al hacer clic o cuando una condición específica se cumple.
Runtime
El runtime en Rive es la capa que conecta las animaciones con las plataformas o frameworks donde se ejecutarán. Gracias al runtime, puedes integrar las animaciones interactivas creadas en Rive directamente en tus aplicaciones, juegos o sitios web. Algunos puntos clave del runtime:
Soporta interactividad nativa, haciendo que las animaciones respondan instantáneamente a inputs.
Compatible con múltiples plataformas (Flutter, React, Swift, Unity, etc.).
Permite ejecutar y manipular la máquina de estados en tiempo real.
Ejemplos de trabajos por la comunidad hechos en Rive
Estos son algunos de los ejemplos que he visto por la comunidad de Rive, el resto se pueden encontrar en su pagina Web.
Fin del Curso: Rive – 7.27 Eventos y Runtimes
Después de completar la lección «Eventos y Runtimes», creo que ahora tengo una visión más general del programa Rive y comprendo sus aplicaciones. El resto del aprendizaje es cuestión de practicar, porque aunque el curso cubre los fundamentos, he notado que las posibilidades creativas parecen infinitas.
En los posts de la comunidad, he visto ejemplos fascinantes de lo que se puede lograr con Rive. A continuación, compartiré algunas capturas pero lo ideal es entrar a este enlace y verlo tu mismo.
Este curso me llevó alrededor de 40 horas para completarlo, tiempo que considero bien invertido. Es un placer registrar este tipo de rutas de aprendizaje. Espero que la información compartida aquí sea útil e inspire a explorar esta herramienta.
Nota para los desarrolladores de Rive
El programa que han creado es estupendo, con un enfoque intuitivo que permite ejecutar ideas complejas con relativa facilidad. Aunque es fácil de entender para un principiante, masterizarlo definitivamente requiere tiempo y práctica.
Quisiera reportar algunos problemas que encontré en la versión de escritorio:
- Problemas al agrupar shapes: En ciertas ocasiones, al agrupar formas (shapes), el programa se cierra inesperadamente, lo que interrumpe el flujo de trabajo.
- Errores con eventos: Mientras trabajaba con eventos en la máquina de estados, el programa se cerró abruptamente en varias ocasiones.
Además, sería ideal incluir una opción de guardado manual, ya que en algunos casos, el progreso se pierde al experimentar estos cierres. Esta característica sería de gran ayuda para prevenir frustraciones.
Finalmente, quisiera felicitarles por el gran trabajo que están haciendo. Es increíble saber que empresas como Duolingo han integrado Rive en su flujo de trabajo desde 2022, sustituyendo a Lottie. Los resultados son impresionantes y es evidente que los animadores (por ejemplo Kurt Hartfelder) disfrutan mucho la herramienta.
¡Gracias por crear una plataforma tan versátil y prometedora!
Rosendo Rodríguez 