انیمیشن در توسعه موبایل: چیست، چه انواعی دارد و چگونه استفاده کنیم

انیمیشن در 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 است. یک ویژگی خاص شیء (به عنوان مثال، translationX، alpha، scaleY) را در مدت زمان مشخص با Interpolator معین انیمیشن می‌کند.

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 است. اجازه می‌دهد frame، alpha، transform، 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) — یک API سطح پایین برای انیمیشن CALayer. از تبدیل‌های سه‌بعدی، انیمیشن مسیر (keyframe)، ماسک‌گذاری و ترکیب پشتیبانی می‌کند. SwiftUI از Core Animation در پشت صحنه از طریق اصلاح‌کننده‌های animation و withAnimation استفاده می‌کند.

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) که انیمیشن‌های Adobe After Effects صادر شده در قالب JSON را رندر می‌کند. در 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 کاهش می‌دهد.

Shared Element Transition و Hero Animation

Shared Element Transition — انیمیشنی که در آن یک عنصر (تصویر، متن، کارت) هنگام انتقال بین صفحه‌ها به آرامی حرکت می‌کند و تغییر شکل می‌دهد. این توهم تداوم را ایجاد می‌کند: کاربر به یک صفحه جدید «نمی‌رود»، بلکه در عنصر «سقوط می‌کند».

Android Shared Element Transition

در Android انتقال از طریق ActivityOptionsCompat و ویژگی‌های transitionName پیاده‌سازی می‌شود. FragmentTransaction از addSharedElement برای انتقال‌های داخل Activity پشتیبانی می‌کند. Compose از SharedTransitionLayout با SharedContentState استفاده می‌کند.

iOS Hero Transition

iOS انتقال Hero داخلی ندارد، اما کتابخانه Hero (توسط Luke Zhao) این الگو را در UIKit پیاده‌سازی می‌کند. فقط به عناصر در هر دو صفحه یک id اختصاص دهید — Hero به طور خودکار یک انتقال روان ایجاد می‌کند. در SwiftUI، انیمیشن انتقال از طریق NavigationStack و matchedGeometryEffect داخلی است.

Flutter Hero

Flutter یک ویجت Hero داخلی با پارامتر tag دارد. وقتی دو صفحه حاوی Hero با tag یکسان هستند، Flutter به طور خودکار انتقال بین آنها را انیمیشن می‌کند. این یکی از ساده‌ترین راه‌ها برای پیاده‌سازی انیمیشن پیچیده در یک اپلیکیشن موبایل است.

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

Spring Animation، Interpolator و Easing

برای اینکه انیمیشن طبیعی به نظر برسد، از منحنی‌های سرعت استفاده می‌شود — Interpolator در Android و Easing در iOS. آنها تعیین می‌کنند که سرعت انیمیشن از ابتدا تا انتها چگونه تغییر می‌کند.

Interpolatorهای Android

Android از چندین Interpolator داخلی پشتیبانی می‌کند: LinearInterpolator (یکنواخت)، AccelerateDecelerateInterpolator (کند-سریع-کند)، FastOutSlowInInterpolator (Material Design)، OvershootInterpolator (با بیش‌روی) و BounceInterpolator (با جهش). Interpolator سفارشی را می‌توان از طریق XML یا کلاس TimeInterpolator ایجاد کرد.

Spring Animation

Spring Animation (انیمیشن فنری) فیزیک فنر را با پارامترهای damping (میرایی) و stiffness (سفتی) مدل می‌کند. میرایی ۰ — نوسانات بی‌نهایت، ۱ — بدون نوسان. سفتی سرعت بازگشت را تعیین می‌کند. Spring Animation در iOS (UIViewPropertyAnimator با UISpringTimingParameters)، Android (SpringAnimation از physics2) و SwiftUI (spring()) در دسترس است.

مستندات Spring Animation در Android شامل مثال‌های پیکربندی دقیق است.

انیمیشن جدول زمانی

Timeline (جدول زمانی) — رویکردی که در آن انیمیشن به فریم‌هایی در طول زمان تقسیم می‌شود. برای توالی‌های پیچیده استفاده می‌شود که در آن AnimationSet یا انیمیشن گروهی به اندازه کافی انعطاف‌پذیر نیستند. Android از AnimatorSet، iOS از CAAnimationGroup، Flutter از Interval در AnimationController پشتیبانی می‌کند.