{"id":124742,"date":"2018-10-24T19:53:54","date_gmt":"2018-10-24T17:53:54","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/interactions-and-animations\/"},"modified":"2025-02-03T20:53:23","modified_gmt":"2025-02-03T19:53:23","slug":"interactions-and-animations","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/interactions-et-animations","title":{"rendered":"Interactions et animations"},"content":{"rendered":"

Dans cette section, vous trouverez des explications sur les op\u00e9rations de la palette \u00c9v\u00e9nements et de la bo\u00eete de dialogue \u00c9v\u00e9nements, ainsi que sur les diff\u00e9rents d\u00e9clencheurs, actions et effets que vous pouvez utiliser pour cr\u00e9er des prototypes interactifs.<\/p>\n

<\/a>La palette \u00c9v\u00e9nements<\/h2>\n

Tous les \u00e9v\u00e9nements sont cr\u00e9\u00e9s, visualis\u00e9s, modifi\u00e9s ou supprim\u00e9s dans la palette \u00c9v\u00e9nements une fois que l’\u00e9l\u00e9ment a \u00e9t\u00e9 s\u00e9lectionn\u00e9 sur le canevas. La palette d’\u00e9v\u00e9nements se compose des \u00e9l\u00e9ments suivants<\/p>\n

\"palette<\/p>\n

    \n
  1. \u00ab\u00a0Ajouter une interaction\u00a0\u00bb. Cliquez sur pour cr\u00e9er un nouvel \u00e9v\u00e9nement. Dans la bo\u00eete de dialogue qui s’affiche, dans le coin sup\u00e9rieur gauche se trouvent les menus d\u00e9roulants D\u00e9clencheur d’\u00e9v\u00e9nement et Action, qui permettent de d\u00e9finir des \u00e9v\u00e9nements pour un \u00e9l\u00e9ment s\u00e9lectionn\u00e9 <\/li>\n
  2. Chaque onglet regroupe les actions par d\u00e9clencheur d’\u00e9v\u00e9nement. Un \u00e9l\u00e9ment peut r\u00e9agir \u00e0 diff\u00e9rents d\u00e9clencheurs et \u00e0 l’int\u00e9rieur de chaque d\u00e9clencheur, il peut ex\u00e9cuter plusieurs actions. <\/li>\n
  3. Interactions d\u00e9finies pour le d\u00e9clencheur de l’\u00e9v\u00e9nement en cours. Une interaction est un ensemble d’actions et peut \u00e9galement comporter des cha\u00eenes de conditions. <\/li>\n
  4. Actions d\u00e9finies pour l’interaction en cours. Chaque interaction peut comprendre une ou plusieurs actions <\/li>\n<\/ol>\n

    La barre d’outils des op\u00e9rations sur les \u00e9v\u00e9nements :<\/h3>\n

    \"barre<\/p>\n

      \n
    1. Cr\u00e9er un nouvel \u00e9v\u00e9nement (‘+’)<\/li>\n
    2. Copier tous les \u00e9v\u00e9nements de l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9 dans le presse-papiers<\/li>\n
    3. Remplacez les \u00e9v\u00e9nements par ceux qui se trouvent \u00e0 ce moment-l\u00e0 dans le presse-papiers. Les r\u00e9f\u00e9rences \u00e0 l’\u00e9l\u00e9ment d’o\u00f9 ils ont \u00e9t\u00e9 copi\u00e9s seront remplac\u00e9es par celles de l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9. <\/li>\n
    4. Supprimer (‘X’) tous les \u00e9v\u00e9nements d\u00e9finis pour l’\u00e9l\u00e9ment s\u00e9lectionn\u00e9<\/li>\n
    5. Passer du mode ic\u00f4nes au mode texte<\/li>\n<\/ol>\n

      Op\u00e9rations \u00e9v\u00e9nementielles<\/h3>\n

      Cliquez sur l’ic\u00f4ne \u00ab\u00a0roue dent\u00e9e\u00a0\u00bb \u00e0 c\u00f4t\u00e9 d’un \u00e9v\u00e9nement pour effectuer les op\u00e9rations suivantes :
      \n\"op\u00e9rations<\/p>\n

        \n
      1. Ajouter une ou plusieurs nouvelles interactions pour ce d\u00e9clencheur d’\u00e9v\u00e9nement<\/li>\n
      2. Copier l’\u00e9v\u00e9nement et ses interactions dans le d\u00e9clencheur d’\u00e9v\u00e9nement d’un autre \u00e9l\u00e9ment de l’UI<\/li>\n
      3. Copier les interactions d’un \u00e9v\u00e9nement \u00e0 l’autre pour le m\u00eame \u00e9l\u00e9ment de l’UI<\/li>\n
      4. Coller les interactions copi\u00e9es dans le presse-papiers<\/li>\n
      5. L’\u00e9v\u00e9nement de suppression et ses interactions<\/li>\n<\/ol>\n

        Op\u00e9rations d’interaction<\/h3>\n

        Cliquez sur l’ic\u00f4ne \u00ab\u00a0engrenage\u00a0\u00bb \u00e0 c\u00f4t\u00e9 d’une interaction pour effectuer les op\u00e9rations suivantes :
        \n\"op\u00e9rations<\/p>\n

          \n
        1. Modifier le nom de l’interaction<\/li>\n
        2. Copiez cette interaction<\/li>\n
        3. D\u00e9placer l’interaction<\/li>\n
        4. Supprimer cette interaction<\/li>\n<\/ol>\n

          Op\u00e9rations d’action<\/h3>\n

          Cliquez sur l’ic\u00f4ne en forme de roue dent\u00e9e situ\u00e9e \u00e0 c\u00f4t\u00e9 du mot \u00ab\u00a0Faire\u00a0\u00bb pour effectuer les op\u00e9rations suivantes :
          \n\"op\u00e9rations<\/p>\n

            \n
          1. Ajoutez une autre action qui s’ex\u00e9cute apr\u00e8s la pr\u00e9c\u00e9dente<\/li>\n
          2. Modifier l’action s\u00e9lectionn\u00e9e<\/li>\n
          3. Copier l’action s\u00e9lectionn\u00e9e<\/li>\n
          4. Coller l’action s\u00e9lectionn\u00e9e<\/li>\n
          5. Ordonnez l’action \u00e0 gauche ou \u00e0 droite afin qu’elle s’ex\u00e9cute avant l’action pr\u00e9c\u00e9dente ou apr\u00e8s l’action suivante.<\/li>\n
          6. S\u00e9lectionnez les \u00e9l\u00e9ments cibl\u00e9s<\/li>\n
          7. Supprimer l’action s\u00e9lectionn\u00e9e<\/li>\n<\/ol>\n

            Les actions peuvent \u00eatre modifi\u00e9es une \u00e0 une ou en groupe.<\/p>\n

            La s\u00e9quence d’interactions dans un \u00e9v\u00e9nement<\/h3>\n

            Par d\u00e9faut, les interactions se d\u00e9roulent dans l’ordre dans lequel elles ont \u00e9t\u00e9 cr\u00e9\u00e9es. Cliquez sur l’ic\u00f4ne \u00ab\u00a0fl\u00e8che\u00a0\u00bb pour afficher les options permettant de modifier leur position par rapport aux autres interactions.
            \n\"actions<\/p>\n

              \n
            1. Apr\u00e8s le pr\u00e9c\u00e9dent : les \u00e9v\u00e9nements se d\u00e9rouleront dans l’ordre<\/li>\n
            2. Auparavant : les \u00e9v\u00e9nements se d\u00e9rouleront simultan\u00e9ment<\/li>\n
            3. D\u00e9lai apr\u00e8s l’indication pr\u00e9c\u00e9dente : les \u00e9v\u00e9nements se d\u00e9rouleront apr\u00e8s un d\u00e9lai sp\u00e9cifi\u00e9.<\/li>\n<\/ol>\n

              S\u00e9quence d’actions dans une interaction<\/h3>\n

              Par d\u00e9faut, les actions s’ex\u00e9cutent dans l’ordre dans lequel elles ont \u00e9t\u00e9 cr\u00e9\u00e9es. Vous pouvez repositionner les actions et les r\u00e9organiser en les glissant et en les d\u00e9posant \u00e0 leur place, ou en les d\u00e9pla\u00e7ant vers la gauche ou vers la droite (voir la section ci-dessus \u00ab\u00a0Op\u00e9rations sur les actions\u00a0\u00bb). Leur position peut \u00e9galement \u00eatre d\u00e9finie en cliquant sur l’ic\u00f4ne \u00ab\u00a0fl\u00e8che\u00a0\u00bb, qui affiche les options suivantes : <\/p>\n

              \"actions<\/p>\n

                \n
              1. Apr\u00e8s le pr\u00e9c\u00e9dent : les actions se d\u00e9rouleront dans l’ordre<\/li>\n
              2. Avec pr\u00e9c\u00e9dent : les actions se d\u00e9rouleront simultan\u00e9ment<\/li>\n
              3. D\u00e9lai apr\u00e8s la d\u00e9claration pr\u00e9c\u00e9dente : les actions se poursuivront apr\u00e8s un d\u00e9lai sp\u00e9cifi\u00e9.<\/li>\n<\/ol>\n

                <\/a>Bo\u00eete de dialogue des \u00e9v\u00e9nements<\/h2>\n

                Apr\u00e8s avoir cliqu\u00e9 sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb, la bo\u00eete de dialogue des \u00e9v\u00e9nements s’affiche.
                \n\"Ajouter<\/p>\n

                  \n
                1. S\u00e9lecteur de d\u00e9clenchement pour d\u00e9finir le d\u00e9but de l’interaction<\/li>\n
                2. Le s\u00e9lecteur d’action r\u00e9sultant pour d\u00e9finir le r\u00e9sultat de l’interaction<\/li>\n
                3. Le canevas de l’\u00e9v\u00e9nement<\/li>\n
                4. Les attributs \u00e0 modifier<\/li>\n<\/ol>\n

                  <\/a>D\u00e9clencheurs d’\u00e9v\u00e9nements pour les prototypes web<\/h2>\n

                  Choisissez parmi les d\u00e9clencheurs d’\u00e9v\u00e9nements suivants pour cr\u00e9er des prototypes web interactifs :<\/p>\n

                  \u00c9v\u00e9nements d\u00e9clench\u00e9s par l’interaction de l’utilisateur avec la souris<\/h3>\n

                  \"D\u00e9clencheurs<\/p>\n