UIView.animate: این چیست، انیمیشن ویژگی‌های UIView در iOS

UIView.animate چیست؟

UIView.animate — یک متد ایستا از کلاس UIView است که در iOS 4 (2010) معرفی شد. این یک API اعلامی برای انیمیشن ویژگی‌های قابل انیمیشن UIView ارائه می‌دهد: frame، bounds، center، alpha، transform، backgroundColor. متد یک بلوک (بستن) با تغییرات ویژگی‌ها دریافت می‌کند — سیستم به طور خودکار برای هر ویژگی تغییر یافته CABasicAnimation ایجاد می‌کند.

نحو بلوکی جایگزین beginAnimations/commitAnimations قدیمی (iOS 2-3) شد و به استاندارد انیمیشن در UIKit تبدیل گردید. انیمیشن‌های UIView.animate روی نخ اصلی اجرا می‌شوند و UI را مسدود نمی‌کنند. به طور پیش‌فرض، مدت انیمیشن 0.25 ثانیه با منحنی easeInOut است.

بر اساس داده‌های Apple WWDC 2023، روش توصیه‌شده برای انیمیشن در پروژه‌های جدید SwiftUI با اصلاح‌کننده‌های .animation() و .transition() است، اما UIKit.animate ابزار اصلی برای پشتیبانی از iOS 16 و پایین‌تر، و همچنین برای انتقال‌های سفارشی پیچیده باقی می‌ماند.

پارامترها و گزینه‌های انیمیشن

UIView.animate سه پارامتر کلیدی ارائه می‌دهد: duration (مدت زمان بر حسب ثانیه)، delay (تأخیر قبل از شروع) و options (مجموعه ماسک‌های بیتی UIView.AnimationOptions). Options شامل curve (easeInOut، easeIn، easeOut، linear)، repeat (تکرار)، autoreverse (بازگشت خودکار)، allowUserInteraction، beginFromCurrentState و overrideInheritedDuration است.

پارامتر options از طریق آرایه ترکیب می‌شود: [.curveEaseOut، .repeat، .autoreverse]. انیمیشن با repeat و autoreverse به نرمی View را به حالت اولیه بازمی‌گرداند و بی‌نهایت تکرار می‌شود. برای تعداد محدود تکرار از animateKeyframes استفاده کنید.

انیمیشن فنری از طریق UIView.animate

انیمیشن فنری یک اثر فیزیکی فنر اضافه می‌کند: شیء نه تنها از نقطه A به B حرکت می‌کند، بلکه هدف را با نوسانات میرا «پشت سر می‌گذارد». پارامترها: usingSpringWithDamping (میرایی 0-1، که 0 حداکثر نوسان است) و initialSpringVelocity (سرعت اولیه فنر).

Apple usingSpringWithDamping را در محدوده 0.4-0.8 برای انیمیشن‌های طبیعی UI توصیه می‌کند. مقدار 0.5 یک بازگشت قابل توجه بدون احساس «لاستیکی بودن» ایجاد می‌کند. initialSpringVelocity = 1.0 معادل سرعت 1 pt/ثانیه است. در 0، انیمیشن از حالت سکون شروع می‌شود.

// نمونه انیمیشن فنری و keyframe
import UIKit

class AnimatedView: UIView {

    func springBounce() {
        // انیمیشن فنری با میرایی
        UIView.animate(
            withDuration: 0.8,
            delay: 0,
            usingSpringWithDamping: 0.5,
            initialSpringVelocity: 1.0,
            options: [.allowUserInteraction],
            animations: {
                self.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                self.alpha = 0.7
            },
            completion: { _ in
                UIView.animate(withDuration: 0.3) {
                    self.transform = .identity
                    self.alpha = 1.0
                }
            }
        )
    }

    func slideIn(from offset: CGFloat) {
        self.transform = CGAffineTransform(translationX: offset, y: 0)
        self.alpha = 0.0

        UIView.animate(
            withDuration: 0.6,
            delay: 0.1,
            options: [.curveEaseOut]
        ) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

انیمیشن Keyframe

UIView.animateKeyframes به شما امکان می‌دهد انیمیشن را به چند مرحله (keyframes) تقسیم کنید، هر کدام با زمان و مدت نسبی خود. متد addKeyframe(withRelativeStartTime:relativeDuration:) مقادیر زمانی از 0 تا 1 را نسبت به مدت کل انیمیشن می‌پذیرد.

انیمیشن‌های Keyframe برای افکت‌های چندمرحله‌ای مفید هستند: ضربان دکمه (بزرگ شدن → مکث → بازگشت)، ظاهر شدن متوالی عناصر، تغییر شکل‌های پیچیده با حالت‌های میانی. هر keyframe می‌تواند منحنی انیمیشن خود را از طریق options داشته باشد.

// انیمیشن keyframe با دنباله پیچیده
func complexPulse() {
    UIView.animateKeyframes(withDuration: 2.0, delay: 0, options: [.repeat]) {
        UIView.addKeyframe(withRelativeStartTime: 0.0, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
            self.alpha = 0.5
        }
        UIView.addKeyframe(withRelativeStartTime: 0.25, relativeDuration: 0.25) {
            self.transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
            self.alpha = 0.8
        }
        UIView.addKeyframe(withRelativeStartTime: 0.5, relativeDuration: 0.5) {
            self.transform = .identity
            self.alpha = 1.0
        }
    }
}

// انیمیشن با بستن‌های تودرتو
func animateCardTransition() {
    UIView.animate(withDuration: 0.4, delay: 0, options: [.curveEaseOut]) {
        self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3, delay: 0, options: [.curveEaseIn]) {
            self.transform = .identity
        }
    }
}

ساختار داخلی: Core Animation در پشت صحنه

در پشت صحنه، UIView.animate انیمیشن را به CALayer هر UIView از طریق Core Animation (CAAnimation) واگذار می‌کند. وقتی frame را در داخل بلوک انیمیشن تغییر می‌دهید، سیستم برای ویژگی‌های position و bounds لایه مربوطه CABasicAnimation ایجاد می‌کند. اگر alpha تغییر کند — CABasicAnimation برای ویژگی opacity لایه.

Core Animation از یک فرآیند جداگانه render server (backboardd در iOS) استفاده می‌کند که انیمیشن‌ها را با فرکانس 120 هرتز (ProMotion) پردازش می‌کند. UIView.animate نخ اصلی را مسدود نمی‌کند — تغییرات ویژگی‌ها به render server فرستاده می‌شوند که بدون مشارکت برنامه فریم‌ها را درون‌یابی می‌کند.

بر اساس اطلاعات Apple، انیمیشن‌های از طریق UIView.animate سربار ~2-3% CPU برای هر لایه تغییر یافته در 60 FPS دارند. برای انیمیشن‌های انبوه (20+ شیء همزمان) استفاده از CATransaction و مدیریت دستی لایه‌ها توصیه می‌شود.

برای اشکال‌زدایی و تجسم انیمیشن‌های UIKit از Xcode Debug View Hierarchy استفاده کنید — CAAnimations فعال روی هر لایه، مدت، منحنی و وضعیت فعلی آنها را نشان می‌دهد. درک ساختار داخلی Core Animation به جلوگیری از مشکلات عملکرد در انیمیشن‌های پیچیده و انتخاب رویکرد بهینه بین UIView.animate و استفاده مستقیم از CABasicAnimation کمک می‌کند.