{"id":129116,"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-13T18:50:05","modified_gmt":"2025-02-13T17:50:05","slug":"interactions-and-animations","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/de\/hilfe\/interaktionen-animationen","title":{"rendered":"Interaktionen und Animationen"},"content":{"rendered":"

In diesem Abschnitt finden Sie Erkl\u00e4rungen zu den Vorg\u00e4ngen in der Ereignispalette und im Dialogfeld Ereignisse sowie zu den verschiedenen Ausl\u00f6sern, Aktionen und Effekten, die Sie zur Erstellung interaktiver Prototypen verwenden k\u00f6nnen.<\/p>\n

<\/a>Die Palette Ereignisse<\/h2>\n

Alle Ereignisse werden in der Ereignispalette erstellt, angezeigt, bearbeitet oder gel\u00f6scht, sobald das Element auf dem Canvas ausgew\u00e4hlt wurde.<\/p>\n

Die Ereignispalette besteht aus:
\n\"Palette<\/p>\n

    \n
  1. „Interaktion hinzuf\u00fcgen“. Klicken Sie auf , um ein neues Ereignis zu erstellen. In dem daraufhin angezeigten Dialogfeld befinden sich in der oberen linken Ecke die Dropdown-Men\u00fcs Ereignisausl\u00f6ser und Aktion, mit denen Sie Ereignisse f\u00fcr ein ausgew\u00e4hltes Element definieren k\u00f6nnen <\/li>\n
  2. Jede Registerkarte gruppiert Aktionen nach Ereignisausl\u00f6ser. Ein Element kann auf verschiedene Ausl\u00f6ser reagieren und innerhalb jedes Ausl\u00f6sers k\u00f6nnen viele Aktionen ausgef\u00fchrt werden. <\/li>\n
  3. Interaktionen, die f\u00fcr den aktuellen Ereignisausl\u00f6ser definiert sind. Eine Interaktion ist eine Sammlung von Aktionen und kann auch Ketten von Bedingungen enthalten. <\/li>\n
  4. F\u00fcr die aktuelle Interaktion definierte Aktionen. Jede Interaktion kann eine oder mehrere Aktionen enthalten <\/li>\n<\/ol>\n

    Die Symbolleiste f\u00fcr Ereignisoperationen:<\/h3>\n

    \"Ereignis-Symbolleiste\"<\/p>\n

      \n
    1. Ein neues Ereignis erstellen (‚+‘)<\/li>\n
    2. Alle Ereignisse des ausgew\u00e4hlten Elements in die Zwischenablage kopieren<\/li>\n
    3. Ersetzen Sie die Ereignisse durch die Ereignisse, die sich zu diesem Zeitpunkt in der Zwischenablage befinden. Die Verweise auf das Element, aus dem sie kopiert wurden, werden durch das ausgew\u00e4hlte Element ersetzt. <\/li>\n
    4. L\u00f6schen (‚X‘) aller f\u00fcr das ausgew\u00e4hlte Element definierten Ereignisse<\/li>\n
    5. Umschalten zwischen Symbolen und Textmodus<\/li>\n<\/ol>\n

      Ereignis-Operationen<\/h3>\n

      Klicken Sie auf das Zahnradsymbol neben einem Ereignis, um die folgenden Operationen durchzuf\u00fchren:
      \n\"Event<\/p>\n

        \n
      1. F\u00fcgen Sie eine neue Interaktion(en) f\u00fcr diesen Ereignisausl\u00f6ser hinzu<\/li>\n
      2. Kopieren Sie das Ereignis und seine Interaktionen in den Ereignisausl\u00f6ser eines anderen UI-Elements<\/li>\n
      3. Kopieren von Ereignisinteraktionen von einem Ereignis zu einem anderen f\u00fcr dasselbe UI-Element<\/li>\n
      4. Einf\u00fcgen der in die Zwischenablage kopierten Interaktionen<\/li>\n
      5. Ereignis l\u00f6schen und seine Interaktionen<\/li>\n<\/ol>\n

        Interaktion Operationen<\/h3>\n

        Klicken Sie auf das Zahnradsymbol neben einer Interaktion, um die folgenden Operationen durchzuf\u00fchren:
        \n\"Interaktionsoperationen\"<\/p>\n

          \n
        1. \u00c4ndern Sie den Namen der Interaktion<\/li>\n
        2. Kopieren Sie diese Interaktion<\/li>\n
        3. Verschieben Sie die Interaktion<\/li>\n
        4. Diese Interaktion l\u00f6schen<\/li>\n<\/ol>\n

          Aktion Operationen<\/h3>\n

          Klicken Sie auf das Zahnradsymbol neben dem Wort „Machen“, um die folgenden Operationen durchzuf\u00fchren:
          \n\"Aktion<\/p>\n

            \n
          1. F\u00fcgen Sie eine weitere Aktion hinzu, die nach der vorherigen ausgef\u00fchrt wird<\/li>\n
          2. Ausgew\u00e4hlte Aktion \u00e4ndern<\/li>\n
          3. Ausgew\u00e4hlte Aktion kopieren<\/li>\n
          4. Ausgew\u00e4hlte Aktion einf\u00fcgen<\/li>\n
          5. Ordnen Sie die Aktion links oder rechts an, damit sie vor der vorherigen oder nach der n\u00e4chsten Aktion ausgef\u00fchrt wird.<\/li>\n
          6. W\u00e4hlen Sie gezielte Elemente<\/li>\n
          7. Ausgew\u00e4hlte Aktion l\u00f6schen<\/li>\n<\/ol>\n

            Aktionen k\u00f6nnen einzeln oder als Gruppe ge\u00e4ndert werden.<\/p>\n

            Die Abfolge der Interaktionen bei einem Ereignis<\/h3>\n

            Standardm\u00e4\u00dfig werden die Interaktionen in der Reihenfolge ausgef\u00fchrt, in der sie erstellt wurden. Klicken Sie auf das ‚Pfeil‘-Symbol, um Optionen zum \u00c4ndern ihrer Position im Verh\u00e4ltnis zu anderen Interaktionen anzuzeigen.
            \n\"Reihenfolge<\/p>\n

              \n
            1. Nach dem Vorhergehenden: Die Ereignisse werden in der Reihenfolge fortgesetzt<\/li>\n
            2. Mit vorheriger: die Ereignisse werden gleichzeitig stattfinden<\/li>\n
            3. Zeit nach vorheriger Angabe: Die Ereignisse werden nach einer bestimmten Zeit fortgesetzt.<\/li>\n<\/ol>\n

              Die Abfolge von Aktionen in einer Interaktion<\/h3>\n

              Standardm\u00e4\u00dfig werden die Aktionen in der Reihenfolge ausgef\u00fchrt, in der sie erstellt wurden. Sie k\u00f6nnen Aktionen neu positionieren und neu anordnen, indem Sie sie per Drag&Drop an ihren Platz ziehen oder nach links oder rechts verschieben (siehe oben unter „Aktionsoperationen“). <\/p>\n

              Ihre Position k\u00f6nnen Sie auch festlegen, indem Sie auf das ‚Pfeil‘-Symbol klicken, das die folgenden Optionen anzeigt:
              \n\"Aktionen<\/p>\n

                \n
              1. Nach dem Vorherigen: Die Aktionen werden in der Reihenfolge durchgef\u00fchrt<\/li>\n
              2. Mit vorheriger: die Aktionen werden gleichzeitig ausgef\u00fchrt<\/li>\n
              3. Zeit nach vorheriger Angabe: Die Aktionen werden nach einer bestimmten Zeit fortgesetzt.<\/li>\n<\/ol>\n

                <\/a>Dialog Ereignisse<\/h2>\n

                Nachdem Sie auf „Ereignis hinzuf\u00fcgen“ geklickt haben, erscheint der Ereignis-Dialog.
                \n\"Erkl\u00e4rungen<\/p>\n

                  \n
                1. Ausl\u00f6ser-Selektor, um den Beginn der Interaktion zu definieren<\/li>\n
                2. Der resultierende Aktionsselektor, um das Ergebnis der Interaktion zu definieren<\/li>\n
                3. Die Ereignis-Leinwand<\/li>\n
                4. Die zu \u00e4ndernden Attribute<\/li>\n<\/ol>\n

                  <\/a>Ereignisausl\u00f6ser f\u00fcr Web-Prototypen<\/h2>\n

                  W\u00e4hlen Sie aus den folgenden Ereignisausl\u00f6sern, um interaktive Webprototypen zu erstellen:<\/p>\n

                  Ereignisse, die durch Benutzerinteraktion mit der Maus ausgel\u00f6st werden<\/h3>\n

                  \"Ereignisausl\u00f6ser<\/p>\n