মোবাইল ডেভেলপমেন্টে অ্যানিমেশন: এটি কী, কত প্রকার এবং কীভাবে ব্যবহার করবেন

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 সমর্থন করে।