موبائل ڈویلپمنٹ میں اینیمیشن: یہ کیا ہے، کتنی اقسام ہیں اور کیسے استعمال کریں

Android میں اینیمیشن: Property Animation اور View Animation

Android دو اہم اینیمیشن سسٹم فراہم کرتا ہے: View Animation (پرانا) اور Property Animation (جدید)۔ View Animation (یا Tween Animation) صرف بصری نمائندگی کے ساتھ کام کرتا ہے — یہ View کے ڈسپلے کو تبدیل کرتا ہے لیکن اس کی حقیقی خصوصیات کو نہیں بدلتا (مثال کے طور پر، کلک کوآرڈینیٹ اپنی جگہ پر رہتے ہیں)۔ Property Animation، جو Android 3.0 میں متعارف کرائی گئی، 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 کے حقیقی پیرامیٹرز کو تبدیل نہیں کرتی۔ سادہ اثرات (جھپکنا، گھومنا) کے لیے 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 تبدیلیوں، پاتھ اینیمیشن (keyframe)، ماسکنگ اور کمپوزیشن کو سپورٹ کرتا ہے۔ 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 کو سپورٹ کرتا ہے۔