ऐनिमेशन देखें

Compose को आज़माएं

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

प्रॉपर्टी को ऐनिमेट करें →

व्यू पर इंटरपोलेटेड ऐनिमेशन बनाने के लिए, व्यू ऐनिमेशन सिस्टम का इस्तेमाल किया जा सकता है. ट्वीन ऐनिमेशन, ऐनिमेशन का हिसाब लगाता है. इसके लिए, वह शुरू होने का समय, खत्म होने का समय, साइज़, रोटेशन, और ऐनिमेशन के अन्य सामान्य पहलुओं जैसी जानकारी का इस्तेमाल करता है.

ट्वीन ऐनिमेशन, View ऑब्जेक्ट के कॉन्टेंट पर कई तरह के आसान ट्रांसफ़ॉर्मेशन (जगह, साइज़, रोटेशन, और पारदर्शिता) कर सकता है. इसलिए, अगर आपके पास कोई TextView ऑब्जेक्ट है, तो टेक्स्ट को घुमाया जा सकता है, छोटा या बड़ा किया जा सकता है या उसकी जगह बदली जा सकती है. अगर इसमें बैकग्राउंड इमेज है, तो टेक्स्ट के साथ-साथ बैकग्राउंड इमेज भी बदल जाएगी. animation package से, ट्विन ऐनिमेशन में इस्तेमाल की गई सभी क्लास मिलती हैं.

ऐनिमेशन के निर्देशों के क्रम से, ट्विन ऐनिमेशन तय होता है. इसे एक्सएमएल या Android कोड से तय किया जाता है. लेआउट तय करने के लिए, एक्सएमएल फ़ाइल का इस्तेमाल करने का सुझाव दिया जाता है. ऐसा इसलिए, क्योंकि ऐनिमेशन को हार्ड-कोड करने के मुकाबले, एक्सएमएल फ़ाइल को पढ़ना, फिर से इस्तेमाल करना, और बदलना आसान होता है. यहां दिए गए उदाहरण में, हमने एक्सएमएल का इस्तेमाल किया है. (एक्सएमएल के बजाय, अपने ऐप्लिकेशन कोड में ऐनिमेशन तय करने के बारे में ज़्यादा जानने के लिए, AnimationSet क्लास और अन्य Animation सबक्लास देखें.)

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

ऐनिमेशन एक्सएमएल फ़ाइल, आपके Android प्रोजेक्ट की res/anim/ डायरेक्ट्री में होनी चाहिए. फ़ाइल में एक ही रूट एलिमेंट होना चाहिए: यह एक <alpha>, <scale>, <translate>, <rotate>, इंटरपोलेटर एलिमेंट या <set> एलिमेंट होगा, जिसमें इन एलिमेंट के ग्रुप शामिल होंगे. इनमें एक और <set> भी शामिल हो सकता है. डिफ़ॉल्ट रूप से, ऐनिमेशन से जुड़े सभी निर्देश एक साथ लागू होते हैं. इन्हें क्रम से दिखाने के लिए, आपको startOffset एट्रिब्यूट की वैल्यू देनी होगी. इसका उदाहरण यहां दिया गया है.

ApiDemos के इस एक्सएमएल का इस्तेमाल, View ऑब्जेक्ट को स्ट्रेच करने के लिए किया जाता है. इसके बाद, इसे एक साथ घुमाने और रोटेट करने के लिए किया जाता है.

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

स्क्रीन के निर्देशांक (इस उदाहरण में इस्तेमाल नहीं किए गए हैं), सबसे ऊपर बाएं कोने में (0, 0) होते हैं. ये नीचे और दाईं ओर जाने पर बढ़ते हैं.

कुछ वैल्यू, जैसे कि pivotX को ऑब्जेक्ट के हिसाब से या पैरंट के हिसाब से तय किया जा सकता है. पक्का करें कि आपने अपनी ज़रूरत के हिसाब से सही फ़ॉर्मैट का इस्तेमाल किया हो. जैसे, पैरंट के हिसाब से 50% के लिए "50" या खुद के हिसाब से 50% के लिए "50%".

Interpolator असाइन करके, यह तय किया जा सकता है कि समय के साथ ट्रांसफ़ॉर्मेशन कैसे लागू किया जाता है. Android में कई इंटरपोलेटर सबक्लास शामिल हैं. ये अलग-अलग स्पीड कर्व तय करते हैं. उदाहरण के लिए, AccelerateInterpolator बताता है कि ट्रांसफ़ॉर्मेशन धीरे-धीरे शुरू होगा और फिर इसकी स्पीड बढ़ जाएगी. इनमें से हर एक की एट्रिब्यूट वैल्यू होती है, जिसे एक्सएमएल में लागू किया जा सकता है.

इस एक्सएमएल को प्रोजेक्ट की res/anim/ डायरेक्ट्री में hyperspace_jump.xml के तौर पर सेव करने पर, यहां दिया गया कोड इसे रेफ़रंस करेगा और लेआउट के ImageView ऑब्जेक्ट पर लागू करेगा.

AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump).also { hyperspaceJumpAnimation ->
    findViewById<ImageView>(R.id.spaceshipImage).startAnimation(hyperspaceJumpAnimation)
}

ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
spaceshipImage.startAnimation(hyperspaceJumpAnimation);

startAnimation() के बजाय, Animation.setStartTime() का इस्तेमाल करके ऐनिमेशन शुरू होने का समय तय किया जा सकता है. इसके बाद, View.setAnimation() का इस्तेमाल करके ऐनिमेशन को व्यू पर असाइन किया जा सकता है.

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

ध्यान दें: आपका ऐनिमेशन चाहे जिस तरह से मूव हो या उसका साइज़ बदले, ऐनिमेशन को होल्ड करने वाले व्यू की सीमाएं, उसे अडजस्ट करने के लिए अपने-आप नहीं बदलेंगी. इसके बावजूद, ऐनिमेशन को व्यू की सीमाओं से बाहर भी बनाया जा सकता है और उसे काटा नहीं जाएगा. हालांकि, अगर ऐनिमेशन पैरंट व्यू की सीमाओं से बाहर जाता है, तो क्लिप हो जाएगी.