# स्क्रीन ट्रांज़िशन

> WindowStyle.transition घोषित करके खिड़की के बदलाव (fade/slide/scale) को एनिमेट करना।

Source: https://crossfly.dev/hi/docs/ui/animations/screen-transitions — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# स्क्रीन ट्रांज़िशन

किसी खिड़की के `show()`/`hide()` पर, CrossFly स्क्रीन को **पहले** और **बाद** में कैप्चर करके और उनके बीच
इंटरपोलेट करके बदलाव को एनिमेट कर सकता है। आप `WindowStyle` में प्रभाव **घोषित** करते हैं; फ़्रेमवर्क
ट्रांज़िशन को स्वयं ट्रिगर करता है।

## पूरा उदाहरण (कॉपी करें, पेस्ट करें और चलाएँ)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;

/** चलाने योग्य मुख्य स्क्रीन। launcher (classname) की ओर संकेत करें और चलाएँ: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      // UI माउंट करने से पहले transition घोषित करें ("पहले" पहले paint में कैप्चर होता है)।
      // getStyle() यहाँ WindowStyle का अनुमान लगाता है, जहाँ transition(...) परिभाषित है।
      getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);   // प्रभाव + अवधि (s)

      setLayout(new VerticalLayout());
      Label titulo = new Label("Nova tela");
      add(LAY_AUTO, titulo);

      Button avancar = new Button("Avançar");
      add(LAY_AUTO, avancar);
      // SLIDE_LEFT transition वाली दूसरी विंडो स्टैक करने पर, framework खुद ही स्विच को एनिमेट करता है:
      avancar.onAction(c -> new MainWindow().show());
   }
}
```
> नीचे दिए गए स्निपेट **सिर्फ़ मूल भाग** दिखाते हैं (जो `onShow()` के अंदर जाता है)। चलाने के लिए, इन्हें ऊपर वाले `MainWindow` कंकाल में रखें।

## घोषणात्मक तरीका (अनुशंसित)
प्रभाव को खिड़की की स्टाइल में परिभाषित करें — `onShow()` में, कुछ भी दिखने से पहले:
```java
@Override public void onShow() throws Exception {
   super.onShow();
   getStyle().transition(UIConstants.Transition.SLIDE_LEFT, 0.4f);  // प्रभाव + अवधि (s)
   // … UI माउंट करता है …
}
```
या `WindowStyle` के फ़ील्ड/फ़्लुएंट द्वारा:
```java
getStyle().transition = UIConstants.Transition.FADE;   // सार्वजनिक फ़ील्ड
getStyle().transitionDuration = 0.3f;
// फ़्लुएंट समतुल्य:
getStyle().transition(UIConstants.Transition.FADE).transitionDuration(0.3f);
```

## उपलब्ध प्रभाव (`UIConstants.Transition`)
| मान | प्रभाव |
|---|---|
| `NONE` | तत्काल बदलाव (डिफ़ॉल्ट) |
| `FADE` | एक स्क्रीन दूसरे पर धुँधलाती है |
| `SLIDE_LEFT` / `SLIDE_RIGHT` | क्षैतिज अक्ष पर स्लाइड करता है |
| `SLIDE_UP` / `SLIDE_DOWN` | ऊर्ध्वाधर अक्ष पर स्लाइड करता है |
| `SCALE` | नई स्क्रीन केंद्र से बढ़ती है |
| `SCALE_DOWN` | वर्तमान स्क्रीन केंद्र की ओर सिकुड़ती है |

> डिफ़ॉल्ट: `WindowStyle.transition` `NONE` से शुरू होता है और `transitionDuration` `0.5s` से। **Pickers** पहले से ही
> डिफ़ॉल्ट रूप से `FADE` का उपयोग करते हैं।

## अंदरूनी तौर पर यह कैसे काम करता है
`ScreenTransition.begin(Transition, duration)` वर्तमान स्क्रीन को "पहले" के रूप में और नई को अगले फ़्रेम में
"बाद" के रूप में कैप्चर करता है और इंटरपोलेट करता है (एक आंतरिक `AlphaAnimation` का उपयोग करते हुए)। आप आम तौर
पर इसे **नहीं** कॉल करते — जब `transition != NONE` हो, तब `Window.show()`/`hide()` इसे कॉल करता है।

## सर्वोत्तम अभ्यास
- **नेविगेशन के इरादे** के अनुसार प्रभाव चुनें: आगे बढ़ने के लिए `SLIDE_LEFT`, वापस जाने के लिए
  `SLIDE_RIGHT`/`SCALE_DOWN`।
- अवधि छोटी रखें (0.25–0.4s) — लंबे ट्रांज़िशन बाधा डालते हैं।
- ट्रांज़िशन को `onShow()` में परिभाषित करें (खिड़की के पेंट होने से पहले)।

## आम गलतियाँ
- ट्रांज़िशन को बहुत देर से परिभाषित करना (पहले पेंट के बाद) — "पहले" पहले ही बदल चुका है।
- लंबी अवधि जो नेविगेशन को धीमा कर देती है।

## यह भी देखें
- [मान एनिमेशन](/docs/ui/animations/value-animations) · [खिड़की स्टैक](/docs/ui/navigation/the-window-stack)