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

लिखने का तरीका आज़माएं

Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर सुझाया जाता है. 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 की वैल्यू से पता चलता है कि स्क्रीन के बाईं ओर कितने पिक्सल हैं.

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

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

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
}

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

पहला डायग्राम. घुमावदार पाथ का ऐनिमेशन.

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

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

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

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

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

ज़्यादा कंट्रोल के लिए, कर्व तय करने के लिए किसी भी 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();