Klicken Sie im Prototypmodus auf den Titel der Ausgangszeichenfläche und verdrahten Sie sie mit der Zielzeichenfläche.
Zuletzt aktualisiert am
10. Februar 2023
Erfahren Sie, wie Sie mithilfe von Triggern zeitgesteuerte Übergänge definieren.
Mit dem Trigger „Zeitgesteuert“ können Sie basierend auf zeitlicher Verzögerung und Dauer einen Übergang zwischen zwei Zeichenflächen erstellen.
Sie können den Trigger Zeitgesteuert mit Aktionen kombinieren, um eine Vielzahl von Effekten wie Animationsschleifen, eine Fortschrittsanzeige und andere mehr zu erstellen. Hier ein Beispiel, in dem der Trigger Zeitgesteuert mit Auto-Animate kombiniert wurde, um einen Schleifeneffekt zu erzeugen.
Um einen einfachen zeitgesteuerten Übergang zu erstellen, führen Sie die folgenden Schritte aus:
Klicken Sie auf die Verbindungslinie, um das Fenster Interaktion anzuzeigen, das im Eigenschafteninspektor erscheint, und legen Sie die folgenden Optionen fest:
- Trigger: Wählen Sie Zeitgesteuert aus. Ist die Option Zeitgesteuert nicht verfügbar, haben Sie möglicherweise in Schritt 1 nicht die gesamte Zeichenfläche samt Titel ausgewählt.
- Verzögerung: Geben Sie die Zeitverzögerung ein, nach der der Übergang gestartet wird. Der akzeptable Bereich liegt zwischen 0,2 und 5 Sekunden.
- Aktion: Wählen Sie die Option Übergang aus. Sie können den Trigger Zeitgesteuert auch mit anderen Aktionen wie Auto-Animate, Overlay oder Sprachwiedergabe kombinieren, um verschiedene Effekte zu erzielen. Im Abschnitt Beispiele und Beispieldateien lernen Sie u. a., wie Sie eine Animationsschleife erstellen.
- Ziel: Zeigt die in Schritt 1 verdrahtete Zielzeichenfläche an, die Sie bei Bedarf ändern können.
- Easing: Wählen Sie den Easing-Effekt aus, der auf die Quell-Zeichenfläche angewendet werden soll.
- Dauer: Geben Sie die Dauer des Easing-Effekts an, d. h. wie lange der Effekt anhalten soll. Der akzeptierte Bereich liegt zwischen 0,2 und 5 Sekunden.
XD speichert Ihre Attribute auf der Zeichenfläche und schlägt sie als Standard für weitere Bildschirme vor.
Um den zeitgesteuerten Übergang zu testen, klicken Sie auf 
.
Beispiele und Beispieldateien
Zähleranimationen werden eingesetzt, um Zahlen auf interessante und auffällige Weise anzuzeigen. Möchten Sie lernen, wie Sie durch Anwendung zeitgesteuerter Übergänge eine Anzeigetafel mit Zähleranimation erstellen können?
1. Wähle im Prototyp-Modus den Zeichenflächentitel aus und lege die folgenden Optionen fest:
- Trigger: Wählen Sie Zeitgesteuert aus.
- Verzögerung: Geben Sie als Zeitverzögerung 0,8 Sekunden an.
- Aktion: Wählen Sie Auto-Animate aus.
- Easing: Wählen Sie Ease In aus.
- Dauer: Geben Sie eine Dauer von 4 Sekunden an.
2. Klicke auf , um eine Vorschau des animierten Zahlenzählers anzuzeigen.
Laden Sie die Beispieldateien herunter. Das folgende Video zeigt, wie Sie die Beispieldateien ausprobieren können.
Dauer: 2 Minuten, 47 Sekunden.
Möchten Sie einen zeitgesteuerten Übergang verwenden, um eine Onboarding-Erlebnis für Ihre Applikation zu erstellen? Schauen Sie sich das folgende Video an und verwenden Sie dieses kostenlose UI-Kit, um einen Onboarding-Workflow zu erstellen.
Dauer: 5 Minuten, 2 Sekunden.
Onboarding-Erlebnis für eine Applikation
In unserer XD Support-Community finden Sie weitere Tutorials und Beispieldateien.
Tipps und Tricks
Wussten Sie, dass Sie den Übergang Zeitgesteuert mit Auto-Animate und Overlay kombinieren können, um interaktive Effekte erstellen? Im folgenden Video erhalten Sie weitere Informationen zu Auto-Animate.
Dauer: 8 Minuten, 33 Sekunden.
Verwandte Ressourcen
Kontaktaufnahme
Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.
Entwerfen von UX-Prototypen mit Adobe XD
Erstelle interaktive Modelle für Websites und mobile Apps.
