Animación web con Rive: nuestra experiencia

El sector del motion design cuenta con muchísimas herramientas excelentes, y hoy en día es relativamente fácil crear efectos visuales y animaciones espectaculares. Gran parte de ese avance tecnológico lo ha impulsado la industria del cine y las necesidades de quienes producen los nuevos éxitos de taquilla o las series de televisión.

Llevar motion design creativo a los proyectos web, sin embargo, no es tan sencillo como hacerlo para producción de vídeo.

Cuando piensas en motion design para web, tienes varias opciones:

• Usar vídeo
• Desarrollar animaciones totalmente nativas, programadas a mano (p. ej., framer-motion, threejs)
• Usar soluciones como Lottie, Rive o Spline

En este artículo vamos a hablar de Rive: por qué está revolucionando la forma de hacer motion design en la web, cuándo conviene usarlo y qué tal rinde en comparación con Lottie.

Estuve usando Lottie durante muchos años, pero un día me atasqué con los problemas de rendimiento de una animación concreta. Por mucho que intenté optimizarla dentro del framework de Lottie, no había manera. Ese día, investigando un poco, descubrí Rive. Rehíce la animación en Rive y me quedé de piedra al ver que todos los problemas de rendimiento habían desaparecido: ni bloqueos ni tirones, incluso en un equipo poco potente.

¿Qué es Rive?

Rive es una herramienta moderna para crear animaciones interactivas de alto rendimiento que funcionan en cualquier plataforma. Es fácil de usar, trabaja muy bien con gráficos vectoriales, ofrece un buen kit para desarrolladores y tiene funcionalidades muy potentes, como la state machine y la deformación de mallas. Es una herramienta bastante nueva (en el momento de publicar el artículo original, en noviembre de 2022, la versión disponible era la 0.8.9). Aun así, incluso en ese estado, Rive supera a algunos de sus competidores y tiene potencial para convertirse pronto en el estándar del sector en animación 2D.

¿Qué tiene de bueno Rive?

Rive es genial. Estas son mis funcionalidades favoritas:

Rendimiento

Para mí, la gran ventaja es el rendimiento (en el ámbito de las animaciones web). Se consigue gracias a una arquitectura mejor planteada y a la librería de runtime WASM de Rive, que se encarga de todos los cálculos.

Tamaño

Las animaciones también pesan mucho menos que los archivos de Lottie. La mayoría de las veces, si usas solo objetos 2D, ocupan un par de KB.

State machine

Rive hace que las animaciones sean interactivas: puedes controlar el estado de la animación desde tu código, repetir en bucle partes de ella o definir la transición de un estado a otro. Con Lottie esto no es posible. Permite crear animaciones complejas que reaccionan al paso del ratón, a los clics o al movimiento, o que cambian de estado según un valor de entrada.

Funciona en cualquier plataforma

Las animaciones de Rive se exportan fácilmente y pueden ejecutarse en cualquier plataforma: iOS, macOS, Android, Windows y web.

Deformación de mallas

Es una forma de aplicar deformaciones naturales a un objeto uniendo varios puntos en una malla para después manipularlos de forma encadenada.

Esto no es todo lo que Rive puede hacer; en su web encontrarás una mejor muestra de todo lo que funciona perfectamente a día de hoy.

¿Cómo es mi flujo de trabajo con Rive?

Aunque Rive promociona su Editor como la herramienta principal para crear animaciones, a mí me sigue resultando menos productivo que Adobe After Effects. Por eso primero prototipo y diseño las animaciones en AE y, en las fases finales, cuando todo está aprobado, las exporto a Rive. La exportación es bastante sencilla y puedes hacerla con el plugin bodymovin de AE. Después hará falta corregir algunos errores y hacer ajustes, pero compensa, teniendo en cuenta que dedico menos tiempo a la fase inicial. Eso sí, las animaciones más sencillas las hago directamente en Rive.

¿Cuáles son sus limitaciones?

Rive crece a toda velocidad y su equipo incorpora funcionalidades nuevas muy rápido, así que todo lo que sigue es válido a fecha de la publicación original.

Desenfoque, resplandor y sombras

Si estás prototipando una animación con muchos efectos de luz, puede costarte hacerla en Rive. No hay soporte nativo para efectos como desenfoque, resplandor o sombras. Si se usan de forma puntual y en determinadas condiciones, a veces se puede sortear añadiendo imágenes rasterizadas de luz o desenfoque para conseguir un efecto similar. Pero si se usan mucho, es mejor que te plantees usar Lottie o desarrollar la animación de forma nativa con framer-motion o threejs. Por lo que sé, en Rive tienen algunas ideas para solucionarlo, así que quizá lo veamos pronto.

Líneas discontinuas

Otra funcionalidad que aparece a menudo en mockups de aplicaciones o en diagramas y que, por ahora, no está disponible en Rive.

Alineación de elementos

No puedes alinear elementos al centro, a la izquierda ni a la derecha.

Mover un objeto a lo largo de una curva de Bézier

Por ejemplo, si necesitas que un vagón recorra una carretera con curvas, o una montaña rusa que además tiene que frenar y acelerar según las leyes de la física, puede resultar complicado en Rive. Tendrás que añadir a mano muchos fotogramas clave que reproduzcan ese recorrido y definir las funciones de transición entre ellos. Por suerte, puedes hacerlo en AE, exportarlo a Rive y pulirlo hasta dejarlo perfecto. Es una funcionalidad muy demandada que sale bastante a menudo.

En After Effects basta con tener dos puntos y una curva para que el objeto se desplace entre ellos.

En Rive, para lograr un efecto similar, hay que crear más puntos. Cuantos más fotogramas clave creemos, más fluido será el movimiento.

Máscara sobre un trazo

Ahora mismo solo puedes usar máscaras de relleno, pero a veces es útil aplicar la máscara sobre un trazo. Y ya que hablamos de máscaras, conviene añadir que no se pueden invertir ni restar.

Excluir archivos de la exportación

A menudo exporto capas en png desde alguna herramienta de diseño para comparar un fotograma clave de la animación hecha en Rive con la referencia. Pero, una vez que la añades a la mesa de trabajo, tienes que acordarte de eliminar esa capa antes de exportar; si no, el tamaño del archivo .riv aumentará muchísimo.

Separación entre las pestañas Animation y Design

Me encuentro a menudo con casos en los que necesito cambiar el tamaño de un objeto sin animarlo, pero el objeto solo es visible en un momento concreto de la animación. Así que tienes que desplazar la línea de tiempo hasta ese punto y cambiar ahí el tamaño, pero entonces se crea un fotograma clave nuevo; tienes que eliminarlo en Animation, pasar a la pestaña Design y pegar allí el tamaño copiado del elemento. Cuando tienes que hacer estos cambios en una curva con muchos puntos, resulta bastante molesto.

Cambios en el tamaño del lienzo

No puedes cambiar el tamaño del lienzo simplemente arrastrando el borde y manteniendo todos los objetos en su sitio, ni ampliar el lienzo por un lado concreto.

App nativa

Tener una aplicación web en el navegador está bien, pero sería estupendo contar con una versión nativa para el sistema operativo.

Zoom lento

El zoom del editor es muy lento, así que tienes que girar mucho la rueda del ratón para acercarte.

Conclusión

Rive es una herramienta increíble y prometedora que ya puede cubrir un montón de tareas de motion design. Sin embargo, tiene ciertas limitaciones, y conocerlas te ayudará a decidir si optar por Rive o probar alternativas.

• Si la animación tiene muchos efectos de luz, desenfoques, sombras o líneas discontinuas, quizá te convenga usar Lottie o apostar por una implementación nativa.
• Si tienes muchos objetos en movimiento en la página, ten cuidado. El rendimiento es excelente, pero aun así tiene sus límites.
• Si necesitas elementos con propiedades físicas, que aceleren y frenen correctamente según su peso, AE será mejor opción para desarrollarlos, con la posibilidad de exportarlos a Rive si hace falta.

Para todo lo demás, Rive funciona de maravilla: puedes usarlo para crear componentes web interactivos, animar personajes 2D o animar mockups.