Apprenez comment utiliser les déclencheurs temporisés pour créer des transitions temporisées.

Avec les déclencheurs temporisés, vous pouvez créer des transitions entre les plans de travail en fonction du délai et de la durée. 

Vous pouvez utiliser les Déclencheurs temporels en association avec des Actions pour créer une gamme d’effets, tels que des animations en boucle, des barres de progression, etc. Voici un exemple de Déclencheur temporel utilisé avec Animation automatique pour créer un effet de boucle.

Décompteurs animés utilisant des transitions temporisées
Décompteurs animés utilisant des transitions temporisées

Pour créer une transition temporisée simple, procédez comme suit :

  1. Dans le mode Prototype, cliquez sur le titre du plan de travail source et connectez-le au plan de travail cible. 

  2. Cliquez sur le connecteur pour afficher le panneau Interaction qui figure dans l’inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : Sélectionner Temps. Si vous ne voyez pas l’option Temps, vous n’avez peut-être pas sélectionné l’ensemble du plan de travail et son titre à l’étape 1.  
    • Délai : Entrez le délai pour commencer la transition. La plage acceptable est 0,2-5 secondes.
    • Action : Sélectionnez Transition. Vous pouvez aussi utiliser le déclencheur de Temps avec d’autres Actions, telles que Animation automatique, Superposition et Lecture vocale pour créer divers effets. Reportez-vous aux Exemples pour apprendre comment créer un effet d’animation en boucle.
    • Destination : Affiche le plan de travail de destination connecté à l’étape 1 ; vous pouvez effectuer des modifications si nécessaire.
    • Accélération : Sélectionnez l’effet d’accélération que vous souhaitez appliquer sur le plan de travail source.
    • Durée : saisissez la durée de l’effet d’accélération pour indiquer le temps pendant lequel il dure. La plage acceptable est 0,2-5 secondes. 

    XD enregistre vos attributs sur le plan de travail et les propose par défaut sur d’autres écrans.

  3. Pour prévisualiser la transition temporisée, sélectionnez  

Exemples et exemples de fichiers

Les animations de compteurs numériques sont utilisées pour afficher les nombres de manière intéressante et accrocheuse. Voulez-vous apprendre comment utiliser des transitions temporisées pour créer un tableau de bord en cours d’exécution ?

1. En mode Prototype, sélectionnez le titre du plan de travail souhaité et définissez les options suivantes :

  • Déclencheur : Sélectionner Temps.
  • Délai : Saisissez le délai de 0,8 seconde.
  • Action : Sélectionnez Animation automatique.
  • Accélération : Sélectionnez Accélération-Décélération.
  • Durée : Saisissez une durée de 4 secondes.

2. Cliquez sur  pour prévisualiser le décompteur animé.

Téléchargez les exemples de fichiers et regardez cette vidéo pour les tester.

Durée de visionnage : 2 minutes 47 secondes.


Voulez-vous utiliser la transition temporisée pour créer une expérience d’intégration pour votre application ? Découvrez cette vidéo et utilisez ce kit d’interface utilisateur gratuit pour créer un processus d’intégration.

Durée de visionnage : 5 minutes 2 secondes.

Expérience d’intégration pour une application

Vous pouvez également consulter la communauté d’assistance XD pour obtenir des tutoriels et des exemples.

Conseils et astuces

Saviez-vous que vous pouvez combiner les transitions temporisées avec Animation automatique et Superposition pour créer des effets interactifs ? Pour en savoir plus, consultez cette vidéo.

Durée de visionnage : 8 minutes 33 secondes.


Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne