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

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

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

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

ObjectAnimator की मदद से व्यू की स्थिति बदलना

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

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

Kotlin

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

Java

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

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

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

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

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

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

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

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

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

Kotlin

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
}

Java

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
}

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

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

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

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

PathInterpolator का इस्तेमाल करना

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

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

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

Kotlin

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

Java

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

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

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

Kotlin

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

Java

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();
}

यह, मटीरियल डिज़ाइन के emphasized decelerate ईज़िंग कर्व को लागू करने का एक तरीका है.

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

Kotlin

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()
}

Java

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, इंटरपोलेटर का इस्तेमाल करके, ऐनिमेशन शुरू होने पर उसके समय या पाथ कर्व को तय करता है.

Kotlin

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

Java

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