UIView.animate: ما هو، رسوم خصائص UIView المتحركة في iOS

ما هو UIView.animate؟

UIView.animate هو طريقة ثابتة من فئة UIView، ظهرت في iOS 4 (2010). توفر واجهة برمجة تطبيقات تصريحية لتحريك الخصائص القابلة للتحريك لـ UIView: frame وbounds وcenter وalpha وtransform وbackgroundColor. تقبل الطريقة كتلة (إغلاق) مع تغييرات الخصائص — يقوم النظام تلقائياً بإنشاء CABasicAnimation لكل خاصية تم تغييرها.

حلت بناء جملة الكتل محل beginAnimations/commitAnimations القديمة (iOS 2-3) وأصبحت معيار الحركة في UIKit. يتم تنفيذ حركات UIView.animate على الخيط الرئيسي ولا تمنع واجهة المستخدم. افتراضياً، مدة الحركة هي 0.25 ثانية مع منحنى easeInOut.

وفقاً لـ Apple WWDC 2023، النهج الموصى به للحركة في المشاريع الجديدة هو SwiftUI مع معدّلات .animation() و.transition()، لكن UIView.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 تعيد العرض إلى حالته الأولية بسلاسة وتتكرر إلى أجل غير مسمى. لعدد محدود من التكرارات، استخدم animateKeyframes.

الحركة النابضية عبر UIView.animate

الحركة النابضية تضيف تأثير نابض فيزيائي: لا يتحرك الكائن فقط من النقطة A إلى B، بل يتجاوز الهدف مع تذبذبات مخمدة. المعلمات: usingSpringWithDamping (التخميد 0-1، حيث 0 أقصى تذبذب) وinitialSpringVelocity (السرعة الأولية للنابض).

توصي Apple باستخدام usingSpringWithDamping في نطاق 0.4-0.8 لحركات واجهة المستخدم الطبيعية. القيمة 0.5 تنشئ ارتداداً ملحوظاً دون الشعور بـ "المطاطية". initialSpringVelocity = 1.0 تقابل سرعة 1 نقطة/ثانية. عند 0، تبدأ الحركة من السكون.

// مثال للحركة النابضية والإطارية
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
        }
    }
}

الحركة الإطارية

UIView.animateKeyframes تسمح بتقسيم حركة إلى عدة خطوات (keyframes)، لكل منها وقتها ومدتها النسبيان. تقبل طريقة addKeyframe(withRelativeStartTime:relativeDuration:) قيماً زمنية من 0 إلى 1 نسبة إلى المدة الإجمالية للحركة.

الحركات الإطارية مفيدة للتأثيرات متعددة المراحل: نبض الزر (زيادة → توقف → عودة)، ظهور متسلسل للعناصر، تشوهات معقدة بحالات وسيطة. يمكن أن يكون لكل keyframe منحنى حركته الخاص عبر options.

// حركة إطارية بتسلسل معقد
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 داخل كتلة الحركة، ينشئ النظام CABasicAnimation لخصائص position وbounds للطبقة المقابلة. إذا تم تغيير alpha — CABasicAnimation لخاصية opacity للطبقة.

يستخدم Core Animation عملية خادم عرض منفصلة (backboardd في iOS) تعالج الحركات بتردد 120 هرتز (ProMotion). لا يمنع UIView.animate الخيط الرئيسي — يتم إرسال تغييرات الخصائص إلى خادم العرض، الذي يقوم باستيفاء الإطارات دون مشاركة التطبيق.

وفقاً لـ Apple، الحركات عبر UIView.animate لها حمل زائد ~2-3% من المعالج لكل طبقة تم تغييرها عند 60 FPS. للحركات الجماعية (20+ كائناً في وقت واحد)، يُوصى باستخدام CATransaction والإدارة اليدوية للطبقات.

لتصحيح وتصور حركات UIKit، استخدم Xcode Debug View Hierarchy — يُظهر CAAnimations النشطة على كل طبقة، ومدتها، ومنحناها، وحالتها الحالية. فهم البنية الداخلية لـ Core Animation يساعد في تجنب مشاكل الأداء مع الحركات المعقدة واختيار النهج الأمثل بين UIView.animate والاستخدام المباشر لـ CABasicAnimation.