Szenen-Übergang (pageTransition)

Mit Szenen-Übergang legst du fest, wie eine Szene erscheint (In-Transition) und wie sie verschwindet (Out-Transition). Die Animation läuft jeweils beim Betreten bzw. Verlassen der Szene auf dem gesamten Szenen-Container. (Hintergrundbild/-farbe, Texte, Buttons usw. animieren damit gemeinsam.)

Felder

• Einblendung (In-Transition) – Animation beim Öffnen der Szene.

• Ausblendung (Out-Transition) – Animation beim Wechsel zu einer anderen Szene.

• none = keine Animation (schnellste Option, Standard).

Verfügbare Optionen

In-Transitions

• fadeInScene – sanft einblenden

• zoomInScene – leicht hineinzoomen

• slideInLeftScene / slideInRightScene – von links/rechts einschieben

• bounceInScene – federnde Einblendung

• rotateInScene – leicht hereinrotieren

• magicScaleInScene – Skalierungs-/Weichzeichner-Effekt

• iphoneBounceInScene – iOS-artiger Bounce

• macSlideInScene – macOS-artiger Slide

• materialExpandInScene – Material-Expand (Card wird groß)

• androidSlideUpInScene – Android-Slide von unten

• rippleInScene – Wellen-/Ripple-Eintritt

• cardStackInScene – Kartenstapel kommt nach vorn

• materialFlipInScene – Material-Flip nach vorn

Out-Transitions

• fadeOutScene – sanft ausblenden

• zoomOutScene – leicht herauszoomen

• slideOutLeftScene / slideOutRightScene – nach links/rechts heraus schieben

• bounceOutScene – federnde Ausblendung

• rotateOutScene – herausrotieren

• magicScaleOutScene – Magic-Scale zurück

• iphoneBounceOutScene – iOS-artiger Bounce out

• macSlideOutScene – macOS-artiger Slide out

• materialExpandOutScene – Material-Shrink/Collapse

• androidSlideDownOutScene – Android-Slide nach unten

• rippleOutScene – Ripple-Ausgang

• cardStackOutScene – zurück in Kartenstapel

• materialFlipOutScene – Material-Flip nach hinten

Empfohlene Paare (stimmige Kombis)

• Fade: fadeInScene ⇄ fadeOutScene (ruhig, universell)

• Slide links/rechts: slideInLeftScene ⇄ slideOutRightScene (oder umgekehrt für Gegenrichtung)

• Zoom: zoomInScene ⇄ zoomOutScene

• Material/Card: materialExpandInScene ⇄ materialExpandOutScene / cardStackInScene ⇄ cardStackOutScene

• Platform-Look:

  • iOS: iphoneBounceInScene ⇄ iphoneBounceOutScene

  • Android: androidSlideUpInScene ⇄ androidSlideDownOutScene

  • macOS: macSlideInScene ⇄ macSlideOutScene

Hinweise & Best Practices

• Konsistenz: Wähle für ein Projekt 1–2 Animationsstile und bleibe dabei.

• Tempo & Performance: Dezente Effekte wirken professioneller und laden schneller. Auf älteren Geräten ist none/fade am flüssigsten.

• Richtung beachten: Wenn der Spielfluss „vorwärts“ geht, nutze z. B. In von rechts → Out nach links (oder umgekehrt), um eine klare Bewegungslogik zu erzeugen.

• Barrierefreiheit: Übertreibe Rotationen/Bounce nicht – sie können empfindliche Nutzer stören.

• Konflikte vermeiden: Kombiniere keine starken In/Out-Stile, die gegeneinander arbeiten (z. B. rotateIn mit slideOutRight kann unruhig wirken).

Kurz-Checkliste

1. In- und Out-Transition wählen (oder none).

2. In der Vorschau prüfen, ob es zum Ton der Szene passt.

3. Einheitlich im gesamten Spiel anwenden.

4. Bei Performance-Problemen: auf fade/none wechseln.