Transitions entre écrans

Vous pouvez animer les transitions entre les écrans — la façon dont un écran disparaît et dont le nouveau apparaît. Les animations disponibles dépendent de l’action de navigation concernée :

Navigate to Screen : Ouvrez les paramètres d’action et choisissez parmi la gamme complète de types d’animation. Chaque étape peut utiliser une transition différente.
Navigate Next : Uniquement l’animation push par défaut.
Navigate back : Rejoue la transition utilisée à l’arrivée sur l’écran actuel, mais en sens inverse et sans délai. Si aucune animation n’a été appliquée à l’arrivée, il n’y en a pas non plus au retour.
Close Flow : Aucune animation propre. Votre application gère elle-même la transition entre le flow et votre interface native.

Types d’animation

Le menu déroulant Animation de l’action Navigate to Screen propose cinq options :

Push : Le nouvel écran entre par un bord et pousse l’écran actuel vers l’autre bord.
Slide in : Le nouvel écran glisse et apparaît en fondu par-dessus l’écran actuel, qui se déplace légèrement dans la même direction.
Slide out : L’écran actuel glisse et disparaît en fondu, révélant le nouvel écran en dessous.
Fade through : Le nouvel écran apparaît en fondu par-dessus l’écran actuel.
None : Le nouvel écran remplace instantanément l’écran actuel.

Personnaliser une transition

Vous ne pouvez modifier l’animation que dans une action Navigate to Screen.

Sélectionnez l’élément qui déclenche une action de navigation.
Dans le panneau Interactions, cliquez sur l’action de navigation.
Si l’action est Navigate Next, sélectionnez Navigate to Screen dans le menu déroulant Action. Sélectionnez ensuite l’écran suivant comme Destination.
Sélectionnez une animation dans le menu déroulant Animation.
Si l’animation dispose de paramètres Direction, Easing ou Duration, ajustez-les.
Pour que l’écran actuel reste visible avant le début de l’animation, saisissez une valeur dans le champ Delay. Par exemple, utilisez un délai pour maintenir un écran de chargement affiché quelques secondes. Les actions listées après la navigation n’attendent pas ce délai.
Pour voir la transition sur vos propres écrans, testez le flow sur un appareil.