الرسوم المتحركة في تطوير الجوال: ما هي، أنواعها وكيفية استخدامها

الرسوم المتحركة في Android: Property Animation و View Animation

يوفر Android نظامين رئيسيين للرسوم المتحركة: View Animation (قديم) و Property Animation (حديث). View Animation (أو Tween Animation) تعمل فقط مع التمثيل البصري — تغير عرض العرض ولكن ليس خصائصه الفعلية (على سبيل المثال، تبقى إحداثيات النقر في مكانها). 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 Animation قابلة للتطبيق،但对于 المشاريع الجديدة، يوصى باستخدام Property Animation.

الرسوم المتحركة في Jetpack Compose

يقدم Jetpack Compose واجهة برمجة تطبيقات حديثة للرسوم المتحركة: 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) — واجهة برمجة تطبيقات منخفضة المستوى للرسوم المتحركة لـ 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 والويب. رسوم 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 للعناصر التفاعلية لشاشات الإعداد. هذا يقلل وقت تطوير الرسوم المتحركة بنسبة 60% مقارنة بالتنفيذ اليدوي على UIKit أو Canvas.

Shared Element Transition و Hero Animation

Shared Element Transition — رسم متحرك حيث يتحرك عنصر (صورة، نص، بطاقة) ويتحول بسلاسة عند الانتقال بين الشاشات. هذا يخلق وهم الاستمرارية: المستخدم لا "يذهب" إلى شاشة جديدة، بل "يسقط" في العنصر.

Android Shared Element Transition

في Android، يتم تنفيذ الانتقال من خلال ActivityOptionsCompat وسمات transitionName. يدعم FragmentTransaction addSharedElement للانتقالات داخل النشاط. يستخدم Compose SharedTransitionLayout مع SharedContentState.

iOS Hero Transition

iOS لا يحتوي على Hero Transition مدمج، لكن مكتبة Hero (بواسطة Luke Zhao) تنفذ هذا النمط على UIKit. ببساطة قم بتعيين معرف للعناصر على كلتا الشاشتين — سيقوم 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. تحدد هذه كيف تتغير سرعة الرسوم المتحركة من البداية إلى النهاية.

مُقحمات Android

يدعم Android العديد من المُقحمات المدمجة: LinearInterpolator (منتظم)، AccelerateDecelerateInterpolator (بطيء-سريع-بطيء)، FastOutSlowInInterpolator (Material Design)، OvershootInterpolator (مع تجاوز) و BounceInterpolator (مع ارتداد). يمكن إنشاء مُقحم مخصص من خلال XML أو فئة TimeInterpolator.

Spring Animation

Spring Animation (رسوم الزنبرك المتحركة) تصمم فيزياء الزنبرك مع معلمات التخميد (damping) والصلابة (stiffness). التخميد 0 — تذبذبات لا نهائية، 1 — بدون تذبذبات. الصلابة تحدد سرعة العودة. Spring Animation متاحة في iOS (UIViewPropertyAnimator مع UISpringTimingParameters)، Android (SpringAnimation من physics2) و SwiftUI (spring()).

وثائق Spring Animation في Android تحتوي على أمثلة تكوين مفصلة.

رسوم الجدول الزمني المتحركة

Timeline (الجدول الزمني) — نهج يتم فيه تقسيم الرسوم المتحركة إلى إطارات بمرور الوقت. يستخدم للتسلسلات المعقدة حيث تكون AnimationSet أو الرسوم المتحركة الجماعية غير مرنة بما فيه الكفاية. يدعم Android AnimatorSet، و iOS — CAAnimationGroup، و Flutter — Interval في AnimationController.