Ecrans
Découvrez comment créer un écran, éditer un écran, changer d'écran et ajouter des animations et des transitions.
Votre application est composée d'écrans. Généralement chaque écran correspond à une étape du parcours utilisateur.
Dans cet article
Créer un écran
Votre nouveau projet contient un écran par défaut.
Pour créer un nouvel écran, cliquez sur le bouton +. Le nouvel écran se situe après l'écran sélectionné. Vous pouvez le glisser-déposer où vous voulez.
Si vous souhaitez dupliquer un écran existant, sélectionnez l'écran et ouvrez le menu, cliquez sur Dupliquer.
Vous pouvez créer un nombre illimité d'écrans pour votre application.
Pour renommer un écran, double-cliquez sur son nom dans la fenêtre Ecrans.
Editer un écran
Vous pouvez rajouter tout type de contenu dans votre écran : un bloc de texte, une image, un composant etc.
Tous les objets de l'écran sont affichés dans la fenêtre Objets. Ils sont uniquement chargés lorsque l'utilisateur se trouve sur cet écran. Si vous souhaitez que votre objet soit persistent, ajoutez-le au niveau de l'avant-plan ou du projet.
Changer d'écran
Par défaut, vos écrans sont indépendants et ils ne sont pas liés.
Pour passer d'un écran à l'autre, ajoutez une action de changement d'écran. Sélectionnez votre déclencheur et ajoutez une action Changer d'écran. Choisissez parmi l'une des options suivantes :
- Aller à l'écran sélectionné : sélectionnez un écran parmi tous les écrans de votre application.
- Ecran précédent / suivant : la notion de "précédent" et "suivant" dépend de la position des écrans dans la liste.
Vous pouvez également activer le mode magazine qui permet automatiquement de swiper horizontalement d'écran en écran (principalement pour les projets de publications numériques).
💡 Astuce : si vous voulez que l'intégralité de l'écran soit cliquable, nous vous recommandons de placer un composant Zone interactive au-dessus de votre écran et de créer l'action sur ce composant.
Transition
Lorsque l'utilisateur change d'écran à un autre, il n'y a pas de transition : tous les objets se rechargent à l'affichage et un écran blanc peut apparaître. Si vous souhaitez ajouter une transition, vous pouvez utiliser l'avant-plan/arrière-plan ou bien créer des états.
Animer un écran
Lorsque vous ajoutez un nouvel état lié, une copie exacte du dernier état créé est ajoutée. L'état lié conserve toutes les caractéristiques de l’état de référence et un lien avec cet autre état. C'est lui qui vous permet de réaliser des transitions et des animations.
Quand vous créez un état lié et que vous changez la disposition de vos objets, une transition s'applique et vos objets s'animent.
💡 Le nombre indiqué à côté du nom de l'écran indique le nombre d’états qu'il contient.
Si vous souhaitez apporter des modifications seulement à une partie de votre écran, utilisez le composant Multi-état.