Android Academy · पाठ

एनिमेशन और ट्रांज़िशन

ViewPropertyAnimator, ObjectAnimator और AnimatorSet से views को एनिमेट करें। fragment transitions, साझा तत्वों के एनिमेशन और spring physics जोड़ें।

पाठ 4, कुल 5 में से13 चरण

एनिमेशन और ट्रांज़िशन, CoddyKit पर Android Academy का एक निःशुल्क पाठ है। यह 5 में से 4वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Android Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Android Academy पाठ्यक्रम में कुल 5 पाठ शामिल हैं।

एनिमेशन क्यों महत्वपूर्ण हैं

एनिमेशन ऐप को जीवंत और प्रतिक्रियाशील महसूस कराते हैं। वे:

  • उपयोगकर्ता की कार्रवाइयों पर दृश्य प्रतिक्रिया देते हैं
  • दिखाते हैं कि स्क्रीन एक-दूसरे से कैसे संबंधित हैं
  • डेटा में बदलाव को कम झटकेदार बनाते हैं
  • उपयोगकर्ताओं को समझने में सहायता करते हैं कि क्या बदला और क्यों

मुख्य नियम: एनिमेशन UI की सहायता के लिए होने चाहिए, उससे ध्यान भटकाने के लिए नहीं। उन्हें 300ms से कम रखें।

ViewPropertyAnimator — त्वरित एनिमेशन

किसी view को एनिमेट करने का सबसे सरल तरीका। कॉल्स को चेन करें और start() कॉल करें:

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator नाम के आधार पर किसी भी object की किसी भी property को एनिमेट करता है। यह ViewPropertyAnimator से अधिक लचीला है:

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — क्रमिक और समानांतर

AnimatorSet कई animators को साथ-साथ या एक के बाद एक चलाने का संयोजन करता है:

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpolators

Interpolators एनिमेशन में बदलाव की गति को नियंत्रित करते हैं। सामान्य interpolators:

  • LinearInterpolator — स्थिर गति
  • AccelerateInterpolator — धीरे शुरू होकर तेज़ होता है (बाहर निकलने के लिए)
  • DecelerateInterpolator — तेज़ शुरू होकर धीमा होता है (प्रवेश के लिए)
  • AccelerateDecelerateInterpolator — धीमा → तेज़ → धीमा (डिफ़ॉल्ट)
  • OvershootInterpolator — लक्ष्य से आगे जाकर वापस उछलता है
  • BounceInterpolator — अंत में उछलता है

TransitionManager — Layout में बदलाव

दृश्यता या layout properties बदलने से पहले TransitionManager.beginDelayedTransition() कॉल करके layout में होने वाले बदलावों को अपने-आप एनिमेट करें:

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Fragment Transitions

fragment transactions में प्रवेश/निकास एनिमेशन जोड़ें:

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Shared Element Transitions

दो स्क्रीन के बीच किसी view को साझा करें, ताकि वह एक स्थान से दूसरे स्थान तक एनिमेट हो (जैसे, एक thumbnail का फैलकर पूरी image बन जाना):

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Spring Animation

Spring animations linear या decelerate एनिमेशन से अधिक प्राकृतिक लगते हैं, क्योंकि वे भौतिक spring physics का अनुकरण करते हैं:

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — जटिल एनिमेशन

Lottie JSON के रूप में निर्यात किए गए After Effects animations चलाता है। यह loading spinners, onboarding और empty states के लिए बिल्कुल उपयुक्त है:

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

एनिमेशन की सर्वोत्तम प्रक्रियाएँ

सुचारु और सुलभ एनिमेशन के लिए दिशानिर्देश:

  • अधिकांश UI animations के लिए अवधि 150–300ms रखें
  • हमेशा AnimatorUtils.areAnimatorsEnabled() या Settings.System.ANIMATOR_DURATION_SCALE का सम्मान करें
  • वेस्टिब्युलर विकार वाले उपयोगकर्ता animations बंद कर सकते हैं — Reduce Motion accessibility setting जाँचें
  • जिन चीज़ों को एनिमेट करने की आवश्यकता नहीं है, उन्हें एनिमेट न करें — कम ही बेहतर है
  • कम क्षमता वाले उपकरणों पर test करें (animations से frame drops हो सकते हैं)

त्वरित जाँच

स्क्रीन पर प्रवेश करने वाले किसी तत्व को धीमा होकर स्थिर होता हुआ महसूस कराने के लिए कौन-सा interpolator सबसे अच्छा है?

पुनरावलोकन: Animations और Transitions

सुचारु ऐनिमेशन के साथ अपने ऐप में जीवंतता भरें:

  • view.animate() — अल्फा, ट्रांसलेशन, स्केल और रोटेशन का त्वरित नियंत्रण
  • ObjectAnimator — किसी भी प्रॉपर्टी पर सूक्ष्म नियंत्रण
  • AnimatorSet — कई ऐनिमेटरों का समन्वय (साथ में/बाद में)
  • TransitionManager.beginDelayedTransition() — लेआउट बदलावों को अपने-आप ऐनिमेट करें
  • साझा एलिमेंट ट्रांज़िशन — स्क्रीन बदलने पर सहज निरंतरता
  • Lottie — After Effects से जटिल JSON ऐनिमेशन

अगला विषय: कई अनुभागों वाले ऐप्स के लिए Bottom Navigation और Tabs।

शुरुआत निःशुल्क

एआई शिक्षक के साथ Kotlin सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम
36
पाठ
152

अक्सर पूछे जाने वाले प्रश्न

क्या “एनिमेशन और ट्रांज़िशन” पाठ निःशुल्क है?

हाँ — Android Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “एनिमेशन और ट्रांज़िशन” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Android Academy पाठ्यक्रम में कुल 5 पाठ शामिल हैं।

“एनिमेशन और ट्रांज़िशन” में मैं क्या सीखूँगा?

ViewPropertyAnimator, ObjectAnimator और AnimatorSet से views को एनिमेट करें। fragment transitions, साझा तत्वों के एनिमेशन और spring physics जोड़ें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Android Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Android Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Android Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 5 में से 4वाँ पाठ है।

“एनिमेशन और ट्रांज़िशन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Android Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Android Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

  1. Material Design की मूल बातें
  2. थीम और शैलियाँ
  3. कस्टम Views
  4. एनिमेशन और ट्रांज़िशन
  5. Bottom Navigation और टैब
← Android Academy पर वापस जाएँ