Guide d'utilisation Annuler

Animation des prototypes

Apprenez à créer des micro-interactions à l’aide de l’animation automatique.

Avec l’animation automatique, vous pouvez créer des transitions immersives pour visualiser le mouvement de contenu entre des plans de travail.

Combinée avec le pouvoir des déclencheurs Faire glisser et Temps, l’animation automatique vous aide à créer une large gamme d’effets, comme un balayage et un glissement YouTube pour créer un meilleur prototype.

Interactions de type ondulations sur un site web
Effet d’ondulations sur un site web

Effet glissage/balayage sur un appareil tactile
Effet glissage/balayage sur un appareil tactile

Pour créer un prototype animé, procédez comme suit :

  1. Avant de commencer, utilisez ces règles simples pour comprendre comment les objets sont gérés lors de l’animation :

    • Si un objet n’est pas présent sur le plan de travail cible, il apparaît en fondu.
    • Si un objet n’est pas présent sur le plan de travail source, il disparaît en fondu.
    • Si un objet a une correspondance en termes de nom du calque et de groupe, les attributs sont animés. Pour une liste complète des propriétés et des transitions prises en charge, lisez les Propriétés d’objet.
    • Si vous souhaitez prototyper un effet de défilement horizontal ou vertical, utilisez des groupes de défilement.
  2. Reliez les plans de travail en mode Prototype. 

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

    • Déclencheur : sélectionnez une option pour déclencher une animation. Par exemple, pour simuler une expérience de saisie de carte, sélectionnez Appuyer. 
    • Action : sélectionnez Animation automatique. Vous pouvez désormais affecter deux actions à un seul déclencheur, notamment Appuyer. Pour cela, réglez le premier bouton Action + dans l’Inspecteur Propriétés sur TransitionAnimation automatiqueSuperpositionDéfilement ou Plan de travail précédent, puis réglez le deuxième bouton Action + sur une action non transitoire, telle que Lecture audio ou Lecture vocale. Notez que si vous sélectionnez la lecture audio ou vocale comme première action, vous ne pouvez pas ajouter de deuxième action.
    • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
    • Rythme : sélectionnez une option pour simuler des effets de type accélération/décélération. Par exemple, sélectionnez Décélération si vous voulez que vos animations disparaissent de votre prototype au ralenti.
    Le processus d’animation automatique
    Le processus d’animation automatique

    A. Sélectionnez le type de déclencheur. B. Sélectionnez l’action à animer automatiquement. C. Sélectionnez le plan de travail cible. D. Sélectionnez les options de rythme. 

  4. Pour définir davantage d’interactions pour un objet, sélectionnez l’objet avec une interaction déjà définie, puis cliquez sur le bouton + sur le plan de travail ; vous pouvez également cliquer sur + sur l’Inspecteur Propriétés.

     Rappelez-vous que vous pouvez appliquer les déclencheurs de type Appuyer, Faire glisser, Survoler et Temporisé une seule fois et les déclencheurs de type Vocal, Touches/Manette à plusieurs reprises. 

  5. Cliquez sur   pour prévisualiser vos animations dans un navigateur pris en charge

     Rappelez-vous que XD ne permet pas le défilement lorsque vous prévisualisez des plans de travail avec animation automatique.

Exemples et exemples de fichiers

En savoir plus

Visionnez cette vidéo pour en savoir plus sur l’animation automatique dans XD.
Temps de visionnage : 6 minutes

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?