ऐनिमेशन वाले व्यू को एक जगह से दूसरी जगह ले जाना

Compose का इस्तेमाल करके मैसेज लिखना

Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. Compose में ऐनिमेशन इस्तेमाल करने का तरीका जानें.

पोज़िशन को ऐनिमेट करें →

उपयोगकर्ता के इंटरैक्शन या बैकग्राउंड में प्रोसेसिंग की वजह से, स्क्रीन पर मौजूद ऑब्जेक्ट को अक्सर फिर से पोज़िशन करना पड़ता है. ऑब्जेक्ट की पोज़िशन को तुरंत अपडेट करने के बजाय, उसे ऐनिमेशन की मदद से शुरू की गई पोज़िशन से आखिरी पोज़िशन पर ले जाएं. ऐसा करने से, ऑब्जेक्ट एक जगह से दूसरी जगह पर ब्लिंक नहीं करेगा.

Android की मदद से, स्क्रीन पर व्यू ऑब्जेक्ट की जगह बदलने का एक तरीका यह है कि ObjectAnimator का इस्तेमाल करें. आपको ऑब्जेक्ट की आखिरी पोज़िशन और ऐनिमेशन की अवधि तय करनी होती है. ऐनिमेशन की तेज़ी या कमी को कंट्रोल करने के लिए, टाइम इंटरपोलेटर का भी इस्तेमाल किया जा सकता है.

ObjectAnimator की मदद से व्यू की जगह बदलना

ObjectAnimator एपीआई की मदद से, किसी तय अवधि के लिए व्यू की प्रॉपर्टी बदली जा सकती हैं. इसमें ObjectAnimator के इंस्टेंस बनाने के लिए स्टैटिक तरीके शामिल होते हैं. ये इस बात पर निर्भर करते हैं कि किस तरह के एट्रिब्यूट को ऐनिमेट किया जा रहा है. स्क्रीन पर अपने व्यू की जगह बदलते समय, translationX और translationY एट्रिब्यूट का इस्तेमाल करें.

यहां ObjectAnimator का एक उदाहरण दिया गया है, जो व्यू को दो सेकंड में स्क्रीन की बाईं ओर 100 पिक्सल की दूरी पर ले जाता है:

KotlinJava

ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    duration = 2000
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setDuration(2000);
animation.start();

इस उदाहरण में, ObjectAnimator.ofFloat() वाले तरीके का इस्तेमाल किया गया है, क्योंकि अनुवाद की वैल्यू फ़्लोट होनी चाहिए. पहला पैरामीटर वह व्यू होता है जिसे ऐनिमेट करना है. दूसरा पैरामीटर वह प्रॉपर्टी है जिसे ऐनिमेशन किया जा रहा है. व्यू को हॉरिज़ॉन्टल तौर पर मूव करने के लिए, translationX प्रॉपर्टी का इस्तेमाल किया जाता है. आखिरी पैरामीटर, ऐनिमेशन की आखिरी वैल्यू होती है. इस उदाहरण में, 100 की वैल्यू ऐसी पोज़िशन बताती है जो स्क्रीन की बाईं ओर से कई पिक्सल की है.

अगला तरीका बताता है कि ऐनिमेशन में कितना समय लगता है, मिलीसेकंड में. इस उदाहरण में, ऐनिमेशन दो सेकंड (2,000 मिलीसेकंड) तक चलता है.

आखिरी तरीके से ऐनिमेशन चलता है, जिससे स्क्रीन पर व्यू की स्थिति अपडेट हो जाती है.

ObjectAnimator का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, ObjectAnimator का इस्तेमाल करके ऐनिमेशन देखें.

घुमावदार मोशन जोड़ें

ObjectAnimator का इस्तेमाल करना आसान है. हालांकि, यह डिफ़ॉल्ट रूप से व्यू को शुरू और खत्म होने के पॉइंट के बीच सीधी रेखा के साथ फिर से पोज़िशन करता है. मटीरियल डिज़ाइन, स्क्रीन पर ऑब्जेक्ट की जगह बदलने और ऐनिमेशन की अवधि तय करने के लिए, कर्व का इस्तेमाल करता है. घुमावदार मोशन का इस्तेमाल करने से, आपके ऐनिमेशन को ज़्यादा दिलचस्प बनाने के साथ-साथ आपके ऐनिमेशन को ज़्यादा दिलचस्प बनाया जा सकता है.

अपना पाथ तय करें

ObjectAnimator क्लास में कंस्ट्रक्टर हैं, जिनकी मदद से पाथ के साथ-साथ दो या उससे ज़्यादा प्रॉपर्टी का इस्तेमाल करके, निर्देशांकों को ऐनिमेट किया जा सकता है. उदाहरण के लिए, नीचे दिया गया ऐनिमेटर, किसी व्यू की X और Y प्रॉपर्टी को ऐनिमेट करने के लिए Path ऑब्जेक्ट का इस्तेमाल करता है:

KotlinJava

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    val path = Path().apply {
        arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true)
    }
    val animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path).apply {
        duration = 2000
        start()
    }
} else {
    // Create animator without using curved path
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.arcTo(0f, 0f, 1000f, 1000f, 270f, -180f, true);
  ObjectAnimator animator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
  animator.setDuration(2000);
  animator.start();
} else {
  // Create animator without using curved path
}

आर्क ऐनिमेशन ऐसा दिखता है:

पहली इमेज. घुमावदार पाथ का ऐनिमेशन.

Interpolator, ईज़िंग कर्व को लागू करने का तरीका होता है. स्मूद ऐक्शन के कॉन्सेप्ट के बारे में ज़्यादा जानने के लिए, Material Design दस्तावेज़ देखें. Interpolator से यह तय होता है कि किसी ऐनिमेशन में समय के फ़ंक्शन के तौर पर, खास वैल्यू का हिसाब कैसे लगाया जाता है. यह सिस्टम मटीरियल डिज़ाइन स्पेसिफ़िकेशन में, तीन बुनियादी कर्व के लिए एक्सएमएल संसाधन उपलब्ध कराता है:

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

पाथ इंटरपोलेटर का इस्तेमाल करें

PathInterpolator क्लास, Android 5.0 (एपीआई 21) में जोड़ा गया इंटरपोलटर है. यह बेज़ियर कर्व या Path ऑब्जेक्ट पर आधारित होता है. आसान बनाने के लिए, Material Design के दस्तावेज़ में दिए गए Android के उदाहरणों में PathInterpolator का इस्तेमाल किया गया है.

PathInterpolator में, अलग-अलग तरह के बेज़ियर कर्व के आधार पर कन्स्ट्रक्टर होते हैं. सभी बेज़ियर कर्व के शुरू और खत्म होने के पॉइंट (0,0) और (1,1) पर तय हैं. कन्स्ट्रक्टर के अन्य आर्ग्युमेंट, बनाए जा रहे बेज़ियर कर्व के टाइप पर निर्भर करते हैं.

उदाहरण के लिए, क्वाड्रेटिक बेज़ियर कर्व के लिए, एक कंट्रोल पॉइंट के सिर्फ़ X और Y निर्देशांक की ज़रूरत होती है:

KotlinJava

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.67f, 0.33f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.67f, 0.33f);
} else {
  myInterpolator = new LinearInterpolator();
}

इससे एक ईज़िंग कर्व बनता है, जो तेज़ी से शुरू होता है और खत्म होने के साथ-साथ इंतज़ार का दायरा कम होता जाता है.

क्यूबिक बेज़ियर कंस्ट्रक्टर में भी शुरुआत और आखिर के पॉइंट तय होते हैं. हालांकि, इसके लिए दो कंट्रोल पॉइंट की ज़रूरत होती है:

KotlinJava

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f)
} else {
    LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  myInterpolator = new PathInterpolator(0.5f, 0.7f, 0.1f, 1.0f);
} else {
  myInterpolator = new LinearInterpolator();
}

यह मटीरियल डिज़ाइन जोर दिया गया डिलीरेट करें ईज़िंग कर्व को लागू करने की प्रोसेस है.

ज़्यादा कंट्रोल के लिए, कर्व को तय करने के लिए आर्बिट्रेरी Path का इस्तेमाल किया जा सकता है:

KotlinJava

val myInterpolator = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  val path = Path().apply {
    moveTo(0.0f, 0.0f)
    cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f)
  }
  PathInterpolator(path)
} else {
  LinearInterpolator()
}

Interpolator myInterpolator = null;
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  Path path = new Path();
  path.moveTo(0.0f, 0.0f);
  path.cubicTo(0.5f, 0.7f, 0.1f, 1.0f, 1.0f, 1.0f);
  myInterpolator = new PathInterpolator(path);
} else {
  myInterpolator = new LinearInterpolator();
}

इससे क्यूबिक बेज़ियर के उदाहरण जैसा ही ईज़िंग कर्व बनता है, लेकिन इसके बजाय Path का इस्तेमाल किया जाता है.

पाथ इंटरपोलटर को एक्सएमएल संसाधन के तौर पर भी तय किया जा सकता है:

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.5"
    android:controlY1="0.7"
    android:controlX2="0.1f"
    android:controlY2="1.0f"/>

PathInterpolator ऑब्जेक्ट बनाने के बाद, उसे Animator.setInterpolator() विधि में पास किया जा सकता है. Animator, शुरू होने के समय या पाथ वक्र का पता लगाने के लिए इंटरपोलेटर का इस्तेमाल करता है.

KotlinJava

val animation = ObjectAnimator.ofFloat(view, "translationX", 100f).apply {
    interpolator = myInterpolator
    start()
}

ObjectAnimator animation = ObjectAnimator.ofFloat(view, "translationX", 100f);
animation.setInterpolator(myInterpolator);
animation.start();