Transition entre écrans

Créez une transition personnalisée entre vos écrans grâce à des effets d'apparition de vos éléments de navigation, du contenu de vos écrans ou un arrière-plan animé.

Par défaut les écrans sont indépendants et à chaque changement d'écran, les objets du nouvel écran se chargent. C'est pourquoi apparaît une sorte de flash blanc. A l'aide des états, vous pouvez créer des transitions entre écrans pour proposer une navigation plus fluide et agréable.

Pour créer des transitions entre écrans, nous vous recommandons d'utiliser l'avant-plan et l'arrière-plan. En effet, ils sont globaux à tous vos écrans, se placent au-dessus et en-dessous de vos écrans et n'ont pas cet effet de flash blanc s'ils sont bien configurés.

D'autres solutions existent au niveau des écrans :

en créant des états de vos écrans pour réaliser des effets d'apparition du contenu
en utilisant le composant Galerie pour un effet de swipe entre chaque écran

Animer des transitions de menu sur l'avant-plan

L'avant-plan est commun à tous vos écrans, il se situe au-dessus de vos écrans.
Vous pouvez créer un ou plusieurs avant-plans et les attribuer à l'écran de votre choix.
Vous pouvez insérer n'importe quel objet sur votre avant-plan et créer des animations.

Rendez-vous dans l'avant-plan
Dans l'avant-plan 1, placez les objets dans l'état initial de votre animation
Créez un nouvel avant-plan lié et placez les objets dans l'état final de votre animation.
Sélectionnez l'avant-plan 1 et créez une nouvelle interactivité : A l'affichage de l'avant-plan courant > Changer d'avant-plan > Aller à l'avant-plan 2

Pour en savoir plus : Avant-plan et arrière-plan

Créer un fond d'écran animé

Créer un effet d'apparition de votre écran

Votre écran est constitué d'un état par défaut. Créez un nouvel état lié pour réaliser l'animation de vos objets :

Dans l'état 1, placez les objets dans l'état initial de votre animation
Créez un nouvel état lié et placez les objets dans l'état final de votre animation.
Sélectionnez l'état 1 et créez une nouvelle interactivité : A l'affichage de l'état courant > Changer d'état > Aller à l'état 2

Swiper entre écrans avec la Galerie

Le composant Galerie permet de faire défiler horizontalement ou verticalement des pages par un effet de swipe. Si vous souhaitez reproduire ce même effet entre vos écrans, vous pouvez insérer le contenu de vos écrans au sein de ce composant.