041 / Bestätigung-Flow

Bestätigung-Flow.

Drei Lifecycle-Animationen für den Bestätigungs-Screen aus „01 Transaktion Übersicht": Erfolg, Fehler, Abbruch. Jede Studie loopt 6–8 s.
Zweck: sichtbare Implementierungs-Vorlage für die Übergänge zwischen idle · pending · success · error · cancelled. Plattform: in React Reanimated 3 / SwiftUI withAnimation / Compose animate*AsState.
A–C Drei Lifecycles

Bestätigung → Warten → Outcome

Jede Studie läuft als 6–8 s Loop. State-Wechsel mit reinem Crossfade, Outcome-Icon mit eigener Reaction-Animation (Pop bei Erfolg, Shake bei Fehler).
A
Erfolg
Bestätigen → Spinner → Check-Pop. Standard-Glücks-Pfad.
47 px Safe Top
Noch 05:03 Minuten

Bitte prüfen Sie

Bitte stellen Sie sicher, dass Ihre Angaben korrekt sind.

Bankname:
XYZ
Transaktion:
Überweisung
Auszahlung an:
DE40 …3456 99
Betrag:
500,00 Euro
Zeitpunkt:
21.04.2026, 14:30

Wird verarbeitet

Ihr Auftrag wird an die Bank gesendet. Bitte warten Sie einen Moment.

✓

Erfolgreich bestätigt

Ihr Auftrag wurde freigegeben.

34 px Safe Bot.
Loop
8 000 ms · linear
Confirm
0 → 30 %
Wait
35 → 60 %
Success
65 → 98 %
Check-In
scale 0 → 1.15 → 1 · 550 ms
Spinner
1 000 ms linear loop
B
Fehler
Bestätigen → Spinner → X-Shake. Kein roter Alarm — nur Geste.
47 px Safe Top
Noch 05:03 Minuten

Bitte prüfen Sie

Bitte stellen Sie sicher, dass Ihre Angaben korrekt sind.

Bankname:
XYZ
Transaktion:
Überweisung
Auszahlung an:
DE40 …3456 99
Betrag:
500,00 Euro
Zeitpunkt:
21.04.2026, 14:30

Wird verarbeitet

Ihr Auftrag wird an die Bank gesendet. Bitte warten Sie einen Moment.

×

Übermittlung fehlgeschlagen

Bitte versuchen Sie es erneut. Ihre Daten wurden nicht verändert.

34 px Safe Bot.
Loop
8 000 ms · linear
X-Shake
±6/4 px · 4 keyframes · 550 ms
Marke
S/W bleibt — Fehler ist Geste, nicht Farbe
C
Abbruch
User tippt Abbrechen → kurze Bestätigung. Kein Spinner — Abbruch ist sofort.
47 px Safe Top
Noch 05:03 Minuten

Bitte prüfen Sie

Bitte stellen Sie sicher, dass Ihre Angaben korrekt sind.

Bankname:
XYZ
Transaktion:
Überweisung
Auszahlung an:
DE40 …3456 99
Betrag:
500,00 Euro
Zeitpunkt:
21.04.2026, 14:30

Vorgang abgebrochen

Sie kehren in 2 Sekunden zur Übersicht zurück.

34 px Safe Bot.
Loop
6 000 ms · linear
Cancel-Button
fade #fff → #F1F1F1 · 60 ms
Dot-Pulse
scale 0 → 1.4 → 1 · 200 ms
Hinweis
kein Spinner · Abbruch ist sofort