मोबाइल डेवलपमेंट में एनिमेशन: यह क्या है, कितने प्रकार के होते हैं और कैसे उपयोग करें

Android में एनिमेशन: Property Animation और View Animation

Android दो मुख्य एनिमेशन सिस्टम प्रदान करता है: View Animation (पुराना) और Property Animation (आधुनिक)। View Animation (या Tween Animation) केवल दृश्य प्रतिनिधित्व के साथ काम करता है — यह व्यू के प्रदर्शन को बदलता है लेकिन इसके वास्तविक गुणों को नहीं बदलता (उदाहरण के लिए, क्लिक निर्देशांक अपनी जगह पर रहते हैं)। Android 3.0 में पेश की गई Property Animation, Animator — ValueAnimator, ObjectAnimator या AnimatorSet के माध्यम से वस्तु के वास्तविक गुणों को बदलती है।

ObjectAnimator और ValueAnimator

ObjectAnimator Property Animation की सबसे लोकप्रिय क्लास है। यह दिए गए Interpolator के साथ निर्दिष्ट समय में वस्तु के एक विशिष्ट गुण (उदाहरण के लिए, translationX, alpha, scaleY) को एनिमेट करता है।

ObjectAnimator.ofFloat(myView, "translationX", 0f, 300f).apply {
    duration = 500
    interpolator = FastOutSlowInInterpolator()
    startDelay = 200
}.start()

ValueAnimator किसी विशिष्ट वस्तु से बंधा नहीं है — यह मान उत्पन्न करता है जो किसी भी गुण या कस्टम लॉजिक के लिए उपयोग किए जा सकते हैं।

View Animation और XML एनिमेशन

View Animation XML फ़ाइलों res/anim/ में वर्णित है। चार प्रकार समर्थित हैं: scale, translate, rotate, alpha। नुकसान यह है कि एनिमेशन व्यू के वास्तविक पैरामीटर नहीं बदलता है। सरल प्रभावों (पलकना, घूमना) के लिए View Animation अभी भी लागू है, लेकिन नई परियोजनाओं के लिए Property Animation की सिफारिश की जाती है।

Jetpack Compose में एनिमेशन

Jetpack Compose आधुनिक एनिमेशन API प्रदान करता है: animateAsState, Animatable, AnimatedVisibility और AnimatedContent। Compose में एनिमेशन प्रतिक्रियाशील है: जब स्थिति बदलती है, एनिमेशन स्वचालित रूप से शुरू हो जाता है।

var expanded = remember { mutableStateOf(false) }
val size = animateAsState(
    if (expanded) 200f else 50f
)
Box(
    modifier = Modifier
        .size(size.value, size.value)
        .clickable { expanded = !expanded }
        .background(Color.Blue)
)

iOS में एनिमेशन: Core Animation और UIView.animate

iOS Core Animation — CALayer के साथ काम करने वाला निम्न-स्तरीय फ्रेमवर्क — पर आधारित एक शक्तिशाली एनिमेशन स्टैक प्रदान करता है। UIKit Core Animation के ऊपर सुविधाजनक UIView.animate और UIViewPropertyAnimator विधियों के साथ निर्मित होता है।

UIView.animate

UIView.animate iOS में एनिमेट करने का सबसे सरल तरीका है। फ्रेम, अल्फा, ट्रांसफॉर्म, backgroundColor और अन्य UIView गुणों को एनिमेट करने की अनुमति देता है।

UIView.animate(
    withDuration: 0.5,
    delay: 0.2,
    usingSpringWithDamping: 0.6,
    initialSpringVelocity: 1.0,
    options: [.curveEaseInOut]
) {
    myView.frame.origin.x += 300
    myView.alpha = 0.5
}

UIKit Dynamics

UIKit Dynamics — भौतिक एनिमेशन के लिए एक फ्रेमवर्क: गुरुत्वाकर्षण, टक्कर, स्प्रिंग, आकर्षण बल। मैन्युअल भौतिकी गणना के बिना वस्तुओं का यथार्थवादी व्यवहार बनाने की अनुमति देता है। कस्टम ट्रांज़िशन, एनिमेटेड मेनू और गेम तत्वों के लिए उपयोग किया जाता है।

CAAnimation और Core Animation

Core Animation (CAAnimation, CABasicAnimation, CAKeyframeAnimation) — CALayer एनिमेशन के लिए निम्न-स्तरीय API। 3D रूपांतरण, पथ एनिमेशन (कीफ्रेम), मास्किंग और संरचना का समर्थन करता है। SwiftUI animation और withAnimation मॉडिफ़ायर के माध्यम से पर्दे के पीछे Core Animation का उपयोग करता है।

let animation = CABasicAnimation(keyPath: "transform.rotation.z")
animation.fromValue = 0
animation.toValue = CGFloat.pi * 2
animation.duration = 1.0
animation.repeatCount = .infinity
myLayer.add(animation, forKey: "rotation")

अधिकांश iOS परियोजनाओं के लिए SwiftUI अपने अंतर्निहित एनिमेशन के साथ उपयोग किया जाता है। उदाहरण के लिए, withAnimation स्थिति परिवर्तनों को एक एनिमेटेड संदर्भ में लपेटता है।

वेक्टर एनिमेशन: Lottie और Rive

जटिल एनिमेशन (पात्र, संक्रमण, लोडर) को कोड के साथ लागू करना कठिन है। Lottie और Rive इस समस्या को हल करते हैं, जिससे डिज़ाइनर दृश्य संपादकों में एनिमेशन बना सकते हैं और डेवलपर उन्हें तैयार घटक के रूप में ऐप में एम्बेड कर सकते हैं।

Lottie

Lottie — Airbnb (अब LottieFiles) की एक लाइब्रेरी जो JSON प्रारूप में निर्यात किए गए Adobe After Effects के एनिमेशन को रेंडर करती है। Android, iOS, Flutter, React Native और Web पर समर्थित। Lottie एनिमेशन वेक्टर हैं, गुणवत्ता खोए बिना स्केल करते हैं और प्रोग्रामेटिक रूप से अनुकूलित किए जा सकते हैं (गति, प्रगति, रंग)।

// Android
import com.airbnb.lottie.LottieAnimationView
val lottieView = findViewById<LottieAnimationView>(R.id.lottieView)
lottieView.setAnimation(R.raw.loading_animation)
lottieView.playAnimation()

Rive

Rive (पूर्व में 2Dimensions) — वेक्टर एनिमेशन के लिए एक अधिक उन्नत उपकरण। Lottie के विपरीत, Rive इंटरैक्टिव एनिमेशन का समर्थन करता है: स्थिति, ट्रिगर, संक्रमण। एनिमेशन Rive Editor में बनाया जाता है और ऐप में State Machine के माध्यम से नियंत्रित किया जाता है। Rive गेम इंटरफेस, एनिमेटेड आइकन और फीडबैक के साथ जटिल संक्रमणों के लिए उपयुक्त है।

IT Sectr में हम सजावटी एनिमेशन (लोडर, सफल संचालन, खाली स्थिति) के लिए Lottie और ऑनबोर्डिंग स्क्रीन के इंटरैक्टिव तत्वों के लिए Rive का उपयोग करते हैं। यह UIKit या Canvas पर मैन्युअल कार्यान्वयन की तुलना में एनिमेशन विकास समय को 60% कम करता है।

Shared Element Transition और Hero Animation

Shared Element Transition — एक एनिमेशन जहां एक तत्व (चित्र, पाठ, कार्ड) स्क्रीन के बीच संक्रमण करते समय आसानी से चलता और रूपांतरित होता है। यह निरंतरता का भ्रम पैदा करता है: उपयोगकर्ता एक नई स्क्रीन पर "नहीं जाता", बल्कि तत्व में "गिर जाता है"।

Android Shared Element Transition

Android में संक्रमण ActivityOptionsCompat और transitionName विशेषताओं के माध्यम से कार्यान्वित किया जाता है। FragmentTransaction Activity के भीतर संक्रमण के लिए addSharedElement का समर्थन करता है। Compose SharedContentState के साथ SharedTransitionLayout का उपयोग करता है।

iOS Hero Transition

iOS में अंतर्निहित Hero Transition नहीं है, लेकिन Hero लाइब्रेरी (Luke Zhao द्वारा) UIKit पर इस पैटर्न को लागू करती है। बस दोनों स्क्रीन पर तत्वों को एक id निर्दिष्ट करें — Hero स्वचालित रूप से एक सहज संक्रमण बनाएगा। SwiftUI में, संक्रमण एनिमेशन NavigationStack और matchedGeometryEffect के माध्यम से अंतर्निहित है।

Flutter Hero

Flutter में tag पैरामीटर के साथ एक अंतर्निहित Hero विजेट है। जब दो पृष्ठों में समान tag के साथ Hero होता है, तो Flutter स्वचालित रूप से उनके बीच संक्रमण को एनिमेट करता है। यह मोबाइल एप्लिकेशन में जटिल एनिमेशन लागू करने के सबसे सरल तरीकों में से एक है।

Hero(
    tag: 'profile_avatar',
    child: CircleAvatar(
        backgroundImage: AssetImage('avatar.jpg'),
        radius: 50,
    ),
)

Spring Animation, Interpolator और Easing

एनिमेशन को प्राकृतिक दिखाने के लिए, गति वक्र का उपयोग किया जाता है — Android में Interpolator और iOS में Easing। वे निर्धारित करते हैं कि एनिमेशन की गति शुरू से अंत तक कैसे बदलती है।

Android Interpolator

Android कई अंतर्निहित Interpolator का समर्थन करता है: LinearInterpolator (समान), AccelerateDecelerateInterpolator (धीमा-तेज़-धीमा), FastOutSlowInInterpolator (Material Design), OvershootInterpolator (ओवरशूट के साथ) और BounceInterpolator (उछाल के साथ)। कस्टम Interpolator XML या TimeInterpolator क्लास के माध्यम से बनाया जा सकता है।

Spring Animation

Spring Animation (स्प्रिंग एनिमेशन) damping (अवमंदन) और stiffness (कठोरता) मापदंडों के साथ स्प्रिंग भौतिकी को मॉडल करता है। अवमंदन 0 — अनंत दोलन, 1 — कोई दोलन नहीं। कठोरता वापसी की गति निर्धारित करती है। Spring Animation iOS (UISpringTimingParameters के साथ UIViewPropertyAnimator), Android (physics2 से SpringAnimation) और SwiftUI (spring()) में उपलब्ध है।

Android में Spring Animation दस्तावेज़ में विस्तृत कॉन्फ़िगरेशन उदाहरण हैं।

टाइमलाइन एनिमेशन

Timeline (समयरेखा) — एक दृष्टिकोण जहां एनिमेशन को समय के साथ फ्रेम में विभाजित किया जाता है। जटिल अनुक्रमों के लिए उपयोग किया जाता है जहां AnimationSet या समूह एनिमेशन पर्याप्त लचीला नहीं है। Android AnimatorSet, iOS — CAAnimationGroup, Flutter — AnimationController में Interval का समर्थन करता है।