Comment utiliser Rive app pour animer vos interfaces Web et mobiles

Si vous avez déjà joué avec notre estimateur web et mobile, vous avez peut-être remarqué que l’illustration à l’écran évolue en fonction de vos choix. Une option cochée, et hop ! un petit élément s’affiche avec une animation fluide. Ce petit tour de magie, on le doit à Rive app.

Dans cet article, je vous propose de voir comment mettre en place ces animations — et surtout, pourquoi on a choisi cet outil plutôt qu’un autre.

Qu'est-ce que Rive App ?

Rive est un outil de création d’animations vectorielles interactives. Là où d’autres génèrent des vidéos ou des gifs, Rive produit des fichiers .riv, très légers, qui peuvent réagir aux actions de l’utilisateur.

Les avantages de Rive App

Rive App a plusieurs avantages :

• Animations interactives : vos animations peuvent changer d'état selon les interactions utilisateur (clics, survols, données dynamiques)
• Fichiers ultra-légers : les animations Rive sont des fichiers vectoriels optimisés, bien plus petits que des vidéos équivalentes ou des gifs
• Multi-plateforme : une seule animation fonctionne sur Web ou mobile grâce aux différents runtimes (et bien entendu React / React Native)
• État dynamique : possibilité de créer des state machines complexes avec conditions et transitions et faire du data-binding

Pourquoi choisir Rive plutôt que Lottie ou des animations CSS ?

Rive se distingue par sa capacité à créer des animations véritablement interactives. Là où Lottie se limite à des animations linéaires et le CSS pour des transitions simples, Rive permet de créer des expériences où l'animation évolue en fonction du contexte applicatif.

Pour les anciens, Rive se rapproche de Flash, qui était un outil de création d’animations vectorielles interactives.

Deux modes, une interface

L’interface de Rive est découpée en deux parties : Design et Animation. Une pour préparer les assets, l’autre pour leur donner vie !

Je vous propose de détailler l'animation d'un élément de notre estimateur web et mobile.

Étape 1 : préparer le terrain

On commence par importer notre illustration (préparée dans Figma), et on isole chaque élément sur un calque séparé. Cette étape est un peu fastidieuse mais cruciale. Un calque = un élément animable. Sans ça, on se prend vite les pieds dans le tapis.

Voici mon illustration préparée avec chaque élément isolé, visible dans le panel de gauche Hierarchy :

Étape 2 : mode animation

Une fois l’illustration prête, on passe en mode animation grâce au switch en haut à droite de l'interface.

C’est là que les timelines, state machines et interpolations entrent en scène. Les animations avec Rive app se basent sur des timelines d'interpolation de propriétés (position, opacité, coordonnées, etc.) assez semblables aux interfaces de motion design comme After Effects.

Prenons l’exemple d’un élément que l’on veut faire apparaître dynamiquement : ici, une paire de guillemets en haut à droite de l’illustration.

On commence par créer un input de type boolean dans la state machine : has_blog. Il est à false par défaut, et c’est notre code React que nous écrirons plus tard qui viendra le passer à true :

On peut maintenant passer à l'animation !

On crée une nouvelle timeline dédiée à cette animation sur laquelle on va interpoler deux propriétés : position et opacité.

Ce n'est pas du Miyazaki mais suffisant pour donner un effet vivant à notre élément :

Mettre en place la state machine

Une fois l'animation créée, on peut maintenant créer notre state machine spécifique à cette animation.

Les states machines Rive permettent de gérer l'état de l'animation en fonction de conditions. Ici, on va créer deux états : l'animation qui se joue et l'animation qui disparaît (si l'utilisateur décoche l'option).

Pour l'animation de disparition, j'ai utilisé une astuce qui permet de jouer l'animation dans le sens inverse (notez le speed -1 dans le panel en bas à droite) :

Il ne reste plus qu'à ajouter mes conditions qui permettent de passer d'un état à l'autre simplement basé sur ma condition has_blog :

L'animation est maintenant prête ! Chaque animation de notre estimateur repose sur ce même pattern. C’est un peu répétitif, mais le résultat final vaut l’investissement.

Intégrer votre animation Rive dans React

On peut maintenant intégrer notre animation dans notre code React. Pour cela on peut utiliser le runtime React officiel de Rive.

Avant toute chose, il vous faut exporter votre animation au format .riv afin de le passer au composant <Rive/> :

import { useRive, useStateMachineInput } from '@rive-app/react-canvas'

export const App = () => {
  // Configuration de l'animation Rive
  const { rive, RiveComponent } = useRive({
    src: '/animations/estimator.riv', // Chemin vers votre fichier .riv
    artboard: 'web', // Nom de l'artboard à utiliser
    stateMachines: 'state_machine', // Nom de la state machine
    autoplay: true, // Démarre automatiquement l'animation
  })

  // Récupération de l'input de la state machine
  const hasBlog = useStateMachineInput(rive, 'state_machine', 'has_blog')

  return (
    <>
      <RiveComponent />
      <button onClick={() => (hasBlog.value = true)}>Afficher l'animation Blog</button>
    </>
  )
}

Voici une petite explication du code :

• useRive : ce hook configure et initialise votre animation Rive. Il retourne l'instance rive et le composant RiveComponent à afficher.

• useStateMachineInput : ce hook permet de récupérer et manipuler les inputs de votre state machine. Ici, on récupère l'input has_blog qu'on avait configuré dans Rive app.

• Interaction : en cliquant sur le bouton, on modifie la valeur de hasBlog.value à true, ce qui déclenche l'animation dans Rive.

Votre animation est ainsi prête à être utilisée dans votre application !

En résumé

Rive permettet d'apporter un supplément d'âme à vos projets, sans sacrifier la performance. Son modèle basé sur des state machines permet de créer des comportements fins, réactifs et parfaitement intégrés à nos apps.

L'intégration avec React est fluide, sans friction. Et surtout, elle garde les responsabilités bien séparées : Rive pour l’animation, React pour le déclenchement.

C’est un outil qu’on adopte rapidement une fois qu’on a mis les mains dedans. Mon conseil : commencez simple et explorez petit à petit.

Voici quelques use cases concrets :

• Animer des éléments d'une interface comme notre estimateur Web et mobile
• Intégrer des animations dans une application React Native (écran de onboarding, etc.)
• Créer des apps à part entière (jeux, etc.)
• Créer des layouts interactifs pour des streaming videos (via OBS, etc.)

Si vous avez des projets qui nécessitent des animations interactives, n'hésitez pas à nous contacter, nous serons ravis de vous accompagner dans la mise en place de Rive app.

Enfin, vous pouvez jouer avec nos estimateurs Web et mobile ici.

Ressources utiles :

• Documentation officielle Rive app
• Runtime React

👋