CAAnimation — مفاهیم کلیدی، CAAnimationGroup و انیمیشن‌های لایه

نویسنده: IT Sectr منتشر شده: 2026-03-01 زمان مطالعه: 8 دقیقه

CAAnimation — کلاس پایه انتزاعی Core Animation که رابط‌های مشترک برای همه انواع انیمیشن‌ها را تعریف می‌کند: CABasicAnimation، CAKeyframeAnimation، CAAnimationGroup، CATransition. مقاله سلسله‌مراتب کلاس‌ها، ویژگی‌های کلیدی، گروه‌بندی انیمیشن‌ها و مثال‌های عملی در Swift را توضیح می‌دهد.

نکات اصلی

  • CAAnimation — کلاس پایه انتزاعی Core Animation که CABasicAnimation، CAKeyframeAnimation، CAAnimationGroup، CATransition از آن ارث‌بری می‌کنند
  • CAAnimationGroup — اجرای همزمان چند انیمیشن با duration و timingFunction مشترک
  • CAKeyframeAnimation — انیمیشن بر اساس کادرهای کلیدی با مصفوف‌های مقادیر و نشانگرهای زمانی
  • CAMediaTiming — پروتکل مدیریت زمان: duration، repeatCount، autoreverses، timeOffset
  • CATransition — انتقال‌های از پیش تعریف‌شده بین وضعیت‌های لایه (fade، push، moveIn، reveal)

CAAnimation چیست؟

CAAnimation — کلاس انتزاعی Core Animation که رابط‌های مشترک برای همه انیمیشن‌ها را تعریف می‌کند. آن پروتکل CAMediaTiming (زمان، تکرار، بازگشت خودکار) و CAMediaTimingFillMode (رفتار قبل/پس از انیمیشن) را پیاده‌سازی می‌کند. CAAnimation نمی‌توان مستقیما نمونه‌سازی کرد — از یکی از زیرکلاس‌ها استفاده کنید: CABasicAnimation، CAKeyframeAnimation، CAAnimationGroup، CATransition یا CAAnimation (از طریق animationForKeyPath).

هر CAAnimation به CALayer از طریق روش add(_:forKey:) اضافه می‌شود. پارامتر forKey یک شناسه‌گر منحصربه‌فرد برای انیمیشن در لایه است. همان keyPath می‌تواند فقط یک انیمیشن فعال داشته باشد. برای جایگزینی انیمیشن، قبل از افزودن نوی، از removeAnimation(forKey:) استفاده کنید.

به گزارش Apple، CAAnimation یک تغییر موقت در لایه است. پس از پایان انیمیشن، اگر fillMode و isRemovedOnCompletion تنظیم نشده باشند، presentation layer به مقادیر model layer بازمی‌گردد.

سلسله‌مراتب کلاس‌های CAAnimation

Core Animation چهار زیرکلاس اصلی CAAnimation را فراهم می‌کند، هر کدام برای سناریوی انیمیشن خود. شناخت سلسله‌مراتب به انتخاب نوع مناسب برای وظیفه کمک می‌کند.

کلاسکاربردویژگی‌های کلیدی
CABasicAnimationانیمیشن یک ویژگی از A به BfromValue، toValue، byValue، keyPath
CAKeyframeAnimationانیمیشن بر اساس چند کادر کلیدیvalues، keyTimes، path، calculationMode
CAAnimationGroupگروه‌بندی چند انیمیشنمصفوف animations، duration واحد
CATransitionانتقال بین وضعیت‌های لایهtype (fade/push/moveIn/reveal)، subtype، startProgress

CABasicAnimation — ساده‌ترین و محبوب‌ترین زیرکلاس. CAKeyframeAnimation برای مسیرهای پیچیده (مثل حرکت در منحنی بزیه) استفاده می‌شود. CAAnimationGroup چند انیمیشن را به صورت همزمان اجرا می‌کند. CATransition — انتقال آماده بین تصاویر یا وضعیت‌های محتوا.

CAMediaTiming — مدیریت زمان

پروتکل CAMediaTiming — بخش بنیادین CAAnimation. آن ویژگی‌های زمانی اساسی را تعریف می‌کند: duration (مدت زمان)، repeatCount (تعداد تکرار)، repeatDuration (مجموع مدت تکرار)، autoreverses (بازگشت به ابتدا)، beginTime (زمان شروع نسبت به والد)، timeOffset (جابجایی در یک چرخه)، speed (سرعت پخش).

ویژگی fillMode (CAMediaTimingFillMode) نمایش لایه را قبل (backwards) و بعد (forwards) از انیمیشن تعیین می‌کند. مقادیر: removed (پیش‌فرض — بازگشت به model layer)، forwards (در وضعیت نهایی باقی می‌ماند)، backwards (وضعیت ابتدایی را قبل از شروع نشان می‌دهد)، both (هر دو رفتار را ترکیب می‌کند). fillMode فقط با isRemovedOnCompletion = false کار می‌کند.

CAAnimation از CAMediaTiming ارث‌بری می‌کند و می‌تواند در یک انیمیشن والد (CAAnimationGroup) تودر شود. در این صورت، beginTime نسبت به شروع والد محاسبه می‌شود و duration توسط والد محدود می‌شود. Speed = 2.0 انیمیشن را دو برابر سریع‌تر می‌کند.

CAAnimationGroup و CAKeyframeAnimation

CAAnimationGroup چند CAAnimation را در یک گروه ترکیب می‌کند. همه انیمیشن‌های فرزند به صورت همزمان اجرا می‌شوند، اگر برای هر کدام beginTime تنظیم نشده باشد. گروه duration خود را دارد که حداکثر مدت انیمیشن‌های فرزند را محدود می‌کند. timingFunction گروه به عنوان مقدار پیش‌فرض اعمال می‌شود، اگر انیمیشن فرزند خود را تنظیم نکرده باشد.

CAKeyframeAnimation ویژگی را بر اساس چند کادر کلیدی تعریف‌شده توسط مصفوف values انیمیت می‌کند. پارامتر keyTimes (مصفوف NSNumber از 0 تا 1) نشانگرهای زمانی هر کادر را مشخص می‌کند. calculationMode درون‌یابی را تعیین می‌کند: linear، discrete (بدون درون‌یابی)، paced (سرعت یکنواخت)، cubic (اسپلاین)، cubicPaced.

swift
import QuartzCore

// CAAnimationGroup — ترکیب انیمیشن‌ها
func complexLayerAnimation(_ layer: CALayer) {
    let fade = CABasicAnimation(keyPath: "opacity")
    fade.fromValue = 1.0
    fade.toValue = 0.3

    let scale = CABasicAnimation(keyPath: "transform.scale")
    scale.fromValue = 1.0
    scale.toValue = 1.5

    let rotate = CABasicAnimation(keyPath: "transform.rotation.z")
    rotate.fromValue = 0
    rotate.toValue = Double.pi * 2

    let group = CAAnimationGroup()
    group.animations = [fade, scale, rotate]
    group.duration = 2.0
    group.repeatCount = .infinity
    group.autoreverses = true

    layer.add(group, forKey: "pulse")
}

// CAKeyframeAnimation — حرکت در مسیر
func animateAlongPath(_ layer: CALayer) {
    let path = UIBezierPath()
    path.move(to: CGPoint(x: 0, y: 0))
    path.addCurve(
        to: CGPoint(x: 200, y: 300),
        controlPoint1: CGPoint(x: 100, y: 0),
        controlPoint2: CGPoint(x: 100, y: 300)
    )

    let anim = CAKeyframeAnimation(keyPath: "position")
    anim.path = path.cgPath
    anim.duration = 1.5
    anim.calculationMode = .cubicPaced
    anim.rotationMode = .auto
    anim.fillMode = .forwards
    anim.isRemovedOnCompletion = false

    layer.add(anim, forKey: "pathAnim")
    layer.position = CGPoint(x: 200, y: 300)
}

// CAKeyframeAnimation با مقادیر سفارشی
func bounceAnimation(_ layer: CALayer) {
    let bounce = CAKeyframeAnimation(keyPath: "position.y")
    bounce.values = [0, -50, 0, -25, 0, -10, 0]
    bounce.keyTimes = [0, 0.15, 0.3, 0.45, 0.6, 0.8, 1.0]
    bounce.duration = 0.8
    bounce.timingFunction = CAMediaTimingFunction(name: .easeOut)
    bounce.isAdditive = true // نسبت به موقعیت فعلی
    layer.add(bounce, forKey: nil)
}

CAAnimationGroup fade، scale و rotate را با duration 2.0 به صورت همزمان اجرا می‌کند. CAKeyframeAnimation با path و calculationMode = .cubicPaced حرکت یکنواخت در امتداد منحنی بزیه با چرخش خودکار (rotationMode = .auto) را فراهم می‌کند. bounceAnimation برای جابجایی نسبی از isAdditive استفاده می‌کند.

نمونه کد در Swift

نمونه کامل CAAnimation برای انیمیشن لایه پیچیده با استفاده از CATransition برای تغییر محتوا و CAAnimationGroup برای پولس جهتها.

swift
import UIKit
import QuartzCore

class AnimationDemoView: UIView {

    private let demoLayer = CALayer()
    private var currentColor: CGColor = UIColor.systemBlue.cgColor

    override func layoutSubviews() {
        super.layoutSubviews()
        demoLayer.frame = CGRect(x: bounds.midX - 40, y: bounds.midY - 40,
                                 width: 80, height: 80)
        demoLayer.backgroundColor = currentColor
        demoLayer.cornerRadius = 12
        layer.addSublayer(demoLayer)
    }

    func animateTransition() {
        // CATransition — انتقال بین وضعیت‌ها
        let transition = CATransition()
        transition.type = .fade
        transition.duration = 0.5
        transition.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        demoLayer.add(transition, forKey: nil)

        // محتوا را از طریق ترانزاکشن تغییر می‌دهیم
        currentColor = currentColor == UIColor.systemBlue.cgColor
            ? UIColor.systemRed.cgColor
            : UIColor.systemBlue.cgColor
        demoLayer.backgroundColor = currentColor
    }

    func startPulse() {
        let scaleUp = CABasicAnimation(keyPath: "transform.scale")
        scaleUp.fromValue = 1.0
        scaleUp.toValue = 1.3

        let fadeOut = CABasicAnimation(keyPath: "opacity")
        fadeOut.fromValue = 1.0
        fadeOut.toValue = 0.6

        let glow = CABasicAnimation(keyPath: "shadowOpacity")
        glow.fromValue = 0.0
        glow.toValue = 0.8

        let group = CAAnimationGroup()
        group.animations = [scaleUp, fadeOut, glow]
        group.duration = 1.2
        group.autoreverses = true
        group.repeatCount = .infinity
        group.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)

        demoLayer.add(group, forKey: "pulse")
    }

    func stopAnimations() {
        demoLayer.removeAllAnimations()
        demoLayer.transform = CATransform3DIdentity
        demoLayer.opacity = 1.0
        demoLayer.shadowOpacity = 0.0
    }
}

CATransition با type: .fade یک انتقال روان بین دو وضعیت backgroundColor ایجاد می‌کند. CAAnimationGroup scale، opacity و shadowOpacity را برای ایجاد اتر پولس ترکیب می‌کند. removeAllAnimations() همه انیمیشن‌ها را بازنشانده و لایه را به مقادیر اولیه model layer بازمی‌گرداند.

سوالات متداول

تفاوت CABasicAnimation و CAKeyframeAnimation چیست؟

CABasicAnimation ویژگی را از مقدار ابتدایی (fromValue) تا مقدار پایانی (toValue) با درون‌یابی یکنواخت انیمیت می‌کند. CAKeyframeAnimation به شما اجازه می‌دهد مصفوفی از مقادیر وسطی (values) و نشانگرهای زمانی (keyTimes) را برای انیمیشن غیرخطی کادری تعیین کنید، از جمله حرکت در منحنی از طریق path.

کی از CAAnimationGroup استفاده کنیم؟

CAAnimationGroup زمانی نیاز است که چند انیمیشن با تضمین همزمانی به صورت همزمان اجرا شوند: duration گروه تمام انیمیشن‌های فرزند را محدود می‌کند. از گروه برای اترات ترکیبی استفاده کنید: مقیاس‌کردن + تغییر شفافیت + چرخش به صورت همزمان.

fillMode در CAAnimation چیست؟

fillMode نمایش لایه را قبل (backwards) و بعد (forwards) از انیمیشن تعیین می‌کند. مقدار .forwards لایه را پس از پایان انیمیشن در وضعیت نهایی نگه می‌دارد (نیازمند isRemovedOnCompletion = false است). .both backwards (وضعیت ابتدایی قبل از شروع) و forwards را ترکیب می‌کند.

چگونه CAAnimation را از انیمیشن CALayer تمایز دهیم؟

CAAnimation یک شیئٔ انیمیشن (دستور) است که به CALayer از طریق layer.add(animation, forKey:) اضافه می‌شود. انیمیشن به عنوان یک شیئٔ مستقل وجود دارد، می‌تواند مجددا استفاده شود (با کپی) و توسط CAMediaTiming مدیریت شود. لایه می‌تواند چندین انیمیشن با کلیدهای مختلف داشته باشد.

نتایج

  • CAAnimation — کلاس پایه انتزاعی Core Animation با پیاده‌سازی CAMediaTiming و CAMediaTimingFillMode
  • سلسله‌مراتب کلاس‌ها — CABasicAnimation (یک ویژگی)، CAKeyframeAnimation (چند کادر)، CAAnimationGroup (گروه‌بندی)، CATransition (انتقال‌ها)
  • CAMediaTiming — پروتکل با duration، repeatCount، autoreverses، beginTime، timeOffset، speed، fillMode
  • CAAnimationGroup — اجرای همزمان انیمیشن‌ها با duration و timingFunction واحد
  • CAKeyframeAnimation — انیمیشن بر اساس values/keyTimes یا path (منحنی بزیه) با calculationMode
  • CATransition — انواع از پیش تعریف‌شده: fade، push، moveIn، reveal با قابلیت تنظیم subtype
  • مدیریت — layer.add(animation, forKey:)، removeAnimation(forKey:)، removeAllAnimations()

ما یک اپلیکیشن موبایل به صورت کلید در دست توسعه خواهیم داد

IT Sectr از سال 2017 برنامه‌های iOS و Android را برای استارتاپ‌ها و کسب‌وکارها ایجاد می‌کند. ما به شما مشاوره می‌دهیم و بهترین راه‌حل را پیشنهاد خواهیم کرد.

بحث درباره پروژه

همچنین بخوانید