ड्रॉ करने लायक ग्राफ़िक्स ऐनिमेट करें

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

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

पहला विकल्प, AnimationDrawable का इस्तेमाल करना है. इससे, ड्रॉ करने लायक कई स्टैटिक फ़ाइलें तय की जा सकती हैं. ये फ़ाइलें, ऐनिमेशन बनाने के लिए एक-एक करके दिखती हैं. दूसरा विकल्प, AnimatedVectorDrawable का इस्तेमाल करना है. इससे, ड्रॉ करने लायक वेक्टर की प्रॉपर्टी को ऐनिमेट किया जा सकता है.

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

ऐनिमेशन बनाने का एक तरीका यह है कि ड्रॉ करने लायक संसाधनों का क्रम लोड किया जाए. जैसे, फ़िल्म का रोल. The AnimationDrawable क्लास ड्रॉ करने लायक इस तरह के ऐनिमेशन की बुनियादी क्लास है.

`AnimationDrawable ` क्लास के एपीआई का इस्तेमाल करके, अपने कोड में किसी ऐनिमेशन के फ़्रेम तय किए जा सकते हैं. हालांकि, इन्हें एक एक्सएमएल फ़ाइल की मदद से तय करना आसान होता है. इस फ़ाइल में, ऐनिमेशन बनाने वाले फ़्रेम की सूची होती है. इस तरह के ऐनिमेशन के लिए एक्सएमएल फ़ाइल, आपके Android प्रोजेक्ट की res/drawable/ डायरेक्ट्री में होनी चाहिए. इस मामले में, निर्देशों में ऐनिमेशन के हर फ़्रेम का क्रम और अवधि दी जाती है.

एक्सएमएल फ़ाइल में, रूट नोड के तौर पर <animation-list> एलिमेंट और चाइल्ड <item> नोड की सीरीज़ होती है. हर नोड, एक फ़्रेम तय करता है. जैसे, ड्रॉ करने लायक संसाधन और उसकी अवधि. Drawable ऐनिमेशन के लिए, एक्सएमएल फ़ाइल का उदाहरण यहां दिया गया है:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">
    <item android:drawable="@drawable/rocket_thrust1" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust2" android:duration="200" />
    <item android:drawable="@drawable/rocket_thrust3" android:duration="200" />
</animation-list>

यह ऐनिमेशन तीन फ़्रेम तक चलता है. सूची के android:oneshot एट्रिब्यूट को true पर सेट करने से, यह एक बार चलता है. इसके बाद, यह रुक जाता है और आखिरी फ़्रेम पर बना रहता है. अगर android:oneshot को false पर सेट किया जाता है, तो ऐनिमेशन लूप में चलता है.

अगर इस एक्सएमएल को प्रोजेक्ट की res/drawable/ डायरेक्ट्री में rocket_thrust.xml के तौर पर सेव किया जाता है, तो इसे View में बैकग्राउंड इमेज के तौर पर जोड़ा जा सकता है. इसके बाद, इसे चलाने के लिए start() को कॉल किया जा सकता है. यहां एक ऐसी ऐक्टिविटी का उदाहरण दिया गया है जिसमें ऐनिमेशन को ImageView में जोड़ा जाता है. इसके बाद, स्क्रीन को छूने पर इसे ऐनिमेट किया जाता है:

Kotlin

private lateinit var rocketAnimation: AnimationDrawable

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.main)

    val rocketImage = findViewById<ImageView>(R.id.rocket_image).apply {
        setBackgroundResource(R.drawable.rocket_thrust)
        rocketAnimation = background as AnimationDrawable
    }

    rocketImage.setOnClickListener({ rocketAnimation.start() })
}

Java

AnimationDrawable rocketAnimation;

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);

  ImageView rocketImage = (ImageView) findViewById(R.id.rocket_image);
  rocketImage.setBackgroundResource(R.drawable.rocket_thrust);
  rocketAnimation = (AnimationDrawable) rocketImage.getBackground();

  rocketImage.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        rocketAnimation.start();
      }
  });
}

ध्यान दें कि start() तरीका, जिसे AnimationDrawable पर कॉल किया गया है, आपकी Activity के onCreate() तरीके के दौरान कॉल नहीं किया जा सकता. ऐसा इसलिए, क्योंकि AnimationDrawable अब तक विंडो से पूरी तरह अटैच नहीं हुआ है. बिना किसी इंटरैक्शन के, ऐनिमेशन को तुरंत चलाने के लिए, इसे अपनी Activity में onStart() तरीके से कॉल किया जा सकता है. यह तरीका तब कॉल किया जाता है, जब Android, व्यू को स्क्रीन पर दिखाता है.

एक्सएमएल सिंटैक्स और उपलब्ध टैग और एट्रिब्यूट के बारे में ज़्यादा जानने के लिए, ऐनिमेशन के संसाधन देखें.

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

ड्रॉ करने लायक वेक्टर ड्रॉ करने लायक एक ऐसा टाइप है जिसे पिक्सलेट या धुंधला हुए बिना स्केल किया जा सकता है. AnimatedVectorDrawable क्लास—और AnimatedVectorDrawableCompat पीछे की ओर कंपैटिबिलिटी के लिए—की मदद से, ड्रॉ करने लायक वेक्टर की प्रॉपर्टी को ऐनिमेट किया जा सकता है. जैसे, उसे घुमाना या पाथ डेटा बदलकर उसे किसी दूसरी इमेज में मॉर्फ़ करना.

आम तौर पर, ड्रॉ करने लायक ऐनिमेटेड वेक्टर को तीन एक्सएमएल फ़ाइलों में तय किया जाता है:

  • res/drawable/ में <vector> एलिमेंट वाला ड्रॉ करने लायक वेक्टर.
  • res/drawable/ में <animated-vector> एलिमेंट वाला ड्रॉ करने लायक ऐनिमेटेड वेक्टर.
  • res/animator/ में <objectAnimator> एलिमेंट वाले एक या उससे ज़्यादा ऑब्जेक्ट ऐनिमेटर.

ड्रॉ करने लायक ऐनिमेटेड वेक्टर, <group> और <path> एलिमेंट के एट्रिब्यूट को ऐनिमेट कर सकते हैं. <group> एलिमेंट, पाथ या सबग्रुप का सेट तय करता है. वहीं, <path> एलिमेंट, ड्रॉ किए जाने वाले पाथ तय करता है.

जब ड्रॉ करने लायक कोई ऐसा वेक्टर तय किया जाता है जिसे ऐनिमेट करना हो, तो ग्रुप और पाथ को यूनीक नाम असाइन करने के लिए, android:name एट्रिब्यूट का इस्तेमाल करें. इससे, ऐनिमेटर की परिभाषाओं से उन्हें रेफ़र किया जा सकता है. उदाहरण के लिए:

res/drawable/vectordrawable.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

ड्रॉ करने लायक ऐनिमेटेड वेक्टर की परिभाषा, ड्रॉ करने लायक वेक्टर में मौजूद ग्रुप और पाथ को उनके नामों से रेफ़र करती है:

res/drawable/animatorvectordrawable.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@animator/rotation" />
    <target
        android:name="v"
        android:animation="@animator/path_morph" />
</animated-vector>

ऐनिमेशन की परिभाषाएं, ObjectAnimator या AnimatorSet ऑब्जेक्ट को दिखाती हैं. इस उदाहरण में, पहला ऐनिमेटर, टारगेट ग्रुप को 360 डिग्री घुमाता है:

res/animator/rotation.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
  <objectAnimator
      android:duration="6000"
      android:propertyName="rotation"
      android:valueFrom="0"
      android:valueTo="360" />
</set>

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

res/animator/path_morph.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

यहां, AnimatedVectorDrawable का नतीजा दिया गया है:

दूसरी इमेज. एक AnimatedVectorDrawable.

ड्रॉ करने लायक ऐनिमेटेड वेक्टर (एवीडी) की झलक

Android Studio में मौजूद, ड्रॉ करने लायक ऐनिमेटेड वेक्टर टूल की मदद से, ड्रॉ करने लायक ऐनिमेटेड संसाधनों की झलक देखी जा सकती है. इस टूल की मदद से, Android Studio में <animation-list>, <animated-vector>, और <animated-selector> संसाधनों की झलक देखी जा सकती है. साथ ही, इससे कस्टम ऐनिमेशन को बेहतर बनाना आसान हो जाता है.

Android Studio में ऐनिमेशन की झलक देखने और उसे चलाने वाला उपयोगकर्ता
तीसरी इमेज. Android Studio में मौजूद, ड्रॉ करने लायक ऐनिमेटेड वेक्टर टूल.

ज़्यादा जानकारी के लिए, AnimatedVectorDrawable के लिए एपीआई रेफ़रंस देखें.