Cet article a été coécrit avec Marko Dogramadzi.

Les tendances en matière de conception Web sont en perpétuel mouvement. L'une des nouveautés les plus passionnantes est l'essor de l'interactivité grâce aux animations et aux graphiques animés.

Entrer déchirer, une puissante plateforme d'animation qui comble le fossé entre le motion design et l'interactivité. Elle permet aux concepteurs de créer rapidement des graphiques prêts à être utilisés sur le Web, sur les appareils mobiles et dans les jeux.

Ce qui rend Rive si prometteur, c'est son côté révolutionnaire machine d'étatImaginez un personnage animé capable de marcher, de faire du jogging et de courir. Chaque séquence d'animation devient un état distinct. Transmettez l'état actuel au moteur d'exécution Rive et sa machine d'état gère de manière transparente toutes les transitions, ce qui se traduit par une expérience fluide et engageante pour les utilisateurs finaux. Un changement radical en matière d'interactivité.

Même les designs et animations les plus élaborés restent légers, souvent moins de 30 Ko. Dites adieu aux fichiers GIF ou vidéo volumineux. Avec Rive, les animations se chargent rapidement, ce qui améliore les performances globales.

Rive est intuitif à utiliser pour ceux qui ont déjà une expérience en motion design. Pour les novices complets désireux d'explorer le monde de l'animation, le Rive Mise en route La page est un endroit parfait pour commencer.

Comme vous pouvez le constater, nous sommes de grands fans de Rive. Cela nous a donc amené à la question : pouvons-nous intégrer Rive dans Mendix de manière low-code ?

Oui! En fait, nous avons créé un tout nouveau widget pour utiliser Rives dans votre prochain Mendix projet. Que vous créiez des pages d'inscription captivantes ou que vous visualisiez la chaîne de production d'une usine de fabrication, ce widget vous permet d'exploiter la puissance des graphiques prêts pour la production.

Machine à états Rive

Pour configurer le Mendix Widget Rive Controller, il est important de comprendre comment un widget Rive est contrôlé.

Une animation Rive est encapsulée dans un fichier .riv et peut contenir une ou plusieurs machines d'état. Les machines d'état sont des collections d'animations qui permettent des transitions transparentes entre différents états, que vous pouvez utiliser pour créer des éléments d'interface utilisateur fluides et réactifs.

Une machine à états possède plusieurs entrées, qui peut être de trois types :

• Entrée booléenne: Agit comme un commutateur qui peut être activé ou désactivé. Une seule entrée booléenne par machine d'état peut être définie sur true à un moment donné.
• Entrée de déclenchement: Similaire à la valeur booléenne mais ne peut devenir vraie que pendant une courte période. Utile pour déclencher une séquence d'animation spécifique, puis revenir à un état prédéfini.
• Entrée numérique: Accepte un paramètre entier pour gérer l'affichage de l'animation, comme déterminer la vitesse à laquelle un personnage court ou suivre le nombre d'étoiles laissées sur un avis.

Le contrôle de ces entrées permet d'exécuter toutes les animations et transitions possibles définies dans le fichier Rive.

Vous avez donc une excellente idée pour une animation Rive. Comment l'intégrer dans votre Mendix app?

Créer votre premier Rive

Nous allons créer une page de connexion interactive. La page permet à un utilisateur de saisir ses identifiants de connexion sous l'œil vigilant d'un ours !

[Si vous souhaitez en savoir plus sur la création de notre ours, l'équipe de Rive a mis au point un blog détaillé expliquant sa création.]

1. Pour commencer, nous devons d’abord créer et exporter un Rive sous forme de fichier .riv.

Nous allons utiliser la communauté Bear from the Rive, créé par Juan Carlos, que vous pouvez télécharger ici.

2. Téléchargez et importez le Module de contrôleur d'animation Rive du Mendix Place de marché dans votre projet.

Stockage des fichiers .riv

Dans le module Rive Controller, il existe une page de présentation permettant de gérer les fichiers .riv à afficher dans l'application. Cela permet d'héberger n'importe quel nombre de fichiers .riv dans l'application elle-même et de les servir à la demande au widget Rive Canvas lorsqu'il est chargé sur la page.

Lors de l'ajout d'un fichier Rive, la propriété « Nom Rive » doit être spécifiée. Ce nom est utilisé dans les paramètres du widget Rive Controller (Nom Rive) pour pointer le widget vers le Rive correct.

3. Ajoutez RiveFile_Overview à votre navigation, pour la rendre accessible aux administrateurs. C'est ici que vous hébergerez vos fichiers .riv
4. Exécutez votre application et accédez à la page RiveFile_Overview.
5. Téléchargez notre fichier .riv en indiquant un « nom de Rive » unique. Dans cet exemple, nous le nommerons simplement « ours ».

Inspection de la machine d'état

Avant d'intégrer un fichier Rive dans notre application, nous souhaitons d'abord comprendre toutes les interactions qu'il prend en charge.

Visual Studio Code propose une extension pratique, visionneuse vscode-rive, qui permet aux développeurs d'ouvrir un fichier .riv directement dans l'éditeur. Cet outil fournit une vue claire des machines d'état disponibles et de leurs entrées correspondantes.

Notre ours prend en charge cinq entrées :

2 entrées booléennes (succès et échec)

2 entrées de déclenchement (vérification et mains levées)

1 Entrée de numéro (regarder)

Créez notre page de connexion interactive

6. Créez une nouvelle page « Connexion » avec deux champs de saisie : nom d'utilisateur et mot de passe.

Gestion des animations Rive avec l'entité RiveState

Le module Rive Animation Controller comprend une entité non persistante (NPE) polyvalente, RiveState, conçue pour gérer l'état actuel d'une animation Rive. Cette entité englobe tous les attributs standard nécessaires au fonctionnement d'une animation. Cependant, lorsqu'il s'agit d'entrées numériques, qui influencent le comportement de l'animation en fonction de valeurs numériques, des étapes supplémentaires sont nécessaires.

Nous vous conseillons d'étendre RiveState en créant une entité spécialisée. Cette entité spécialisée héritera des attributs communs et vous permettra d'ajouter des entrées numériques personnalisées.

7. Créez une nouvelle entité « Bear », qui est une généralisation de RiveState. Ajoutez notre entrée numérique en tant qu'attribut entier « LookValue ».
8. Ajoutez une vue de données à notre page qui renvoie l’objet Bear et agit comme source de données pour notre animation Rive.
9. Ajoutez le widget RiveController dans cette vue de données

10. Configurez les propriétés du contrôleur Rive en fonction du modèle de machine à états Bears (à partir de l’étape 5).

Paramètres du widget

Nous souhaitons que le widget Rive Controller soit capable d'afficher tous les fichiers d'animation Rive possibles via des propriétés de widget configurables. Les paramètres suivants doivent être définis comme entrées du widget :

• • Nom Rive : nom du fichier Rive (tel que défini dans l'entité RiveFile)
  • Nom de la machine d'état : nom de la machine d'état pour le fichier Rive
  • Noms d'entrée booléens : nom de toutes les entrées de la machine à états « booléens » pour le Rive
  • Entrée active (booléenne) : nom de l'entrée de la machine à états booléenne active (qui peut être mise à jour en modifiant la valeur de l'attribut)
  • Noms des entrées de déclenchement : nom de toutes les entrées de la machine à états « Trigger » pour le Rive
  • Entrée active (déclencheur) : nom de l'entrée du déclencheur actif (peut être défini en modifiant la valeur de l'attribut)
  • Noms des entrées numériques : nom de toutes les entrées de la machine à états « Number » pour le Rive, avec un attribut Integer fournissant la valeur de chaque entrée numérique

Lancez le projet et réussissez ! Notre ours veille sur notre formulaire de connexion.

Ensuite, nous ajouterons de l’interactivité pour que l’ours réponde à la saisie d’un utilisateur.

Contrôler l'animation

Les attributs d'entrée de machine à états booléens et déclencheurs « active » vous permettent de configurer l'animation pour qu'elle se mette à jour en mettant à jour la valeur de l'attribut avec le nom de l'entrée. Il est préférable de le faire dans un nanoflow.

Pour les entrées booléennes, définissez la valeur de l'attribut « Entrée active (booléenne) » sur le nom de l'entrée booléenne que vous souhaitez rendre active. Le reste sera défini comme inactif.

Pour les entrées de déclenchement, définissez la valeur de l'attribut « Entrée active (déclencheur) » sur le nom de l'entrée de déclenchement que vous souhaitez activer. Le widget définira automatiquement la valeur de l'attribut sur une chaîne vide une fois le déclencheur activé.

Pour les entrées de type Nombre, l'attribut Nombre correspondant à une certaine entrée de type Nombre peut être mis à jour à tout moment. L'animation sera mise à jour pour refléter la nouvelle valeur.

Cela signifie que les microflux/nanoflux peuvent déclencher certaines animations, garantissant que le Rive est entièrement intégré dans le Mendix .

13. Ajoutez de l'interactivité à notre ours.

Pour chaque interaction, créez un Nanoflow qui modifie l'état correspondant à l'action de l'utilisateur.

Modèle d'interaction

Continuez à développer les interactions restantes au sein de votre projet.

Exécutez l’application et nous avons maintenant notre écran de connexion Bear entièrement interactif !

Exemple de travail interactif

Vous pouvez consulter l'écran de connexion interactif complété à l'intérieur de notre application de démonstration ici.

Utilisez simplement les informations d’identification ci-dessous :

Pseudo Administrateur

Mot de passe: mot de passe rive

Le Module de contrôleur d'animation Rive contient tous les exemples mentionnés ici pour vous aider à démarrer.

Téléchargez le contrôleur d'animation Rive et ajoutez du motion design à votre prochain Mendix app!