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 

 

 

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

 

 

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

 

 

 Einheitlich im gesamten Spiel anwenden. 

 

 

 Bei Performance-Problemen: auf fade/none wechseln.