أهلاً بيك يا صديقي المبرمج في مقال جديد من سلسلة شروحات فلاتر (Flutter Tutorials) الممتعة. لو انت شغال على تطبيق ومحتاج تكسر الملل وتدي للواجهات (User Interfaces) شكل مبهر، أكيد فكرت في الأنيميشن (Animation). بس هنا بيظهر "الوجع" الحقيقي؛ لما العميل أو مدير المنتج يطلب منك تحريك عناصر في مساحة ثلاثية الأبعاد (3D Space)، أول حاجة بتيجي في بالك هي إننا هنحتاج محرك ألعاب (Game Engine) معقد زي فلاتر آي إس (Flame) أو هندسة شادر (Shaders) صعبة وتاخد أسابيع من الشغل والتأخير في تسليم المشروع.

الخبر السار، يا بطل، إننا مش محتاجين نعمل كده خالص! فلاتر (Flutter) بتقدم لنا أدوات قوية جداً وبسيطة لتصميم أنيميشن 3D بسيط جوه واجهات التطبيقات التقليدية (UI) من غير ما نحتاج أي محركات ألعاب خارجية. في المقال ده، هناخد رحلة تفصيلية نعرف إزاي نحرك العناصر في المحاور الثلاثة (X, Y, Z) عشان نطلع بعمق بصري (Visual Depth) يخطف الأنظار.

إيه هو سر الـ 3D في الفلاتر من غير محركات ألعاب؟

عشان نفهم اللعبة ماشية إزاي، لازم نعرف إن شاشة الموبايل في الأصل عبارة عن مسحوق ثنائي الأبعاد (2D Surface). البكسلات ليها طول وعرض بس (X و Y). طب المحور الثالث (Z) بيجي منين؟ هنا بيجي دور مصفوفات التحويل (Matrix Transforms) وخصوصاً مصفوفة المنظور (Perspective Matrix).

الفكرة باختصار إن فلاتر بتدعم ماتريكس اسمها Matrix4. الماتريكس دي بتسمح لنا نعمل دوران (Rotation)، وتحجيم (Scaling)، وترجمة (Translation) للعنصر في مساحة الـ 3D. وميزة ده إنه خفيف جداً على المعالج (CPU/GPU) مقارنة بإننا نحمل محرك ألعاب كامل جوه تطبيق موبايل عادي. ده بيخلي الأداء ناعم (Smooth 60/120 FPS) وبيحافظ على بطارية الموبايل.

الأدوات السحرية: Transform و AnimationController

عشان نبني أنيميشن 3D حقيقي، احنا محتاجين حاجتين أساسيتين في إطار عمل فلاتر (Flutter Framework):

• متحكم الأنيميشن (AnimationController): المسؤول عن وقت البداية والنهاية والسرعة والـ Ticker.
• عنصر التحويل (Transform Widget): وهو الودجت السحري اللي بيستقبل الـ Matrix4 ويطبق التغييرات البصرية على العنصر.

تعال نشوف مثال عملي وبسيط لمربع (Container) بنحركه في محورين (X و Y) مع إعطاء إيحاء بالعمق (Z-axis perspective):

class Simple3DAnimation extends StatefulWidget {
  @override
  _Simple3DAnimationState createState() => _Simple3DAnimationState();
}

class _Simple3DAnimationState extends State<Simple3DAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 3),
      vsync: this,
    )..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _controller,
      builder: (context, child) {
        return Transform(
          transform: Matrix4.identity()
            ..setEntry(3, 2, 0.001) // هنا بنضيف تأثير المنظور (Perspective)
            ..rotateX(_controller.value * 2.0 * 3.14159)
            ..rotateY(_controller.value * 2.0 * 3.14159),
          alignment: FractionalOffset.center,
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              borderRadius: BorderRadius.circular(20),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.5),
                  blurRadius: 10,
                  spreadRadius: 2,
                )
              ],
            ),
            child: Center(
              child: Text(
                '3D Flutter',
                style: TextStyle(color: Colors.white, fontSize: 22),
              ),
            ),
          ),
        );
      },
    );
  }
}

تفسير الكود خطوة بخطوة للمطورين

الكود اللي فات ده يعتبر حجر الأساس لأي أنيميشن ثلاثي الأبعاد في فلاتر (Flutter 3D Animation). تعال نوضح التكات المهمة اللي فيه:

• دالة setEntry(3, 2, 0.001): دي السحر كله! الرقم ده هو اللي بيعمل تأثير المنظور (Perspective). من غير السطر ده، العنصر هيلف في مساحة 2D مزيفة ومش هتحس إن فيه عمق أو إن فيه جزء قريب وجزء بعيد عن عين المستخدم.
• دالة rotateX و rotateY: دي اللي بتحرك العنصر على محاور الفراغ. لما بنضرب القيمة في باي (3.14159)، بنضمن إن العنصر بيعمل دورة كاملة 360 درجة.
• محاذاة المحور (alignment): تحديد الـ FractionalOffset.center بيخلي العنصر يلف حوالين مركزه بالظبط، وده بيدي إيحاء بالواقعية وبيمنع إن العنصر يطير بره الشاشة.

أفكار إبداعية لتطبيق الـ 3D في واجهات التطبيق (UI/UX)

مش لازم الأنيميشن يكون عبارة عن مربعات بتلف وخلاص! تقدر تستخدم التقنية دي في حاجات كتيرة جداً تفيد بها مشروعك:

• بطاقات الدفع الإلكتروني (Credit Cards): تخلي المستخدم يقدر يقلب الكارت بصباعه (Swipe/Drag) عشان يشوف ظهر الكارت وفيه كود الـ CVV، وده بيدي إيحاء تطبيقات البنوك العالمية.
• قوائم الانتقال (List Item Entry): لما العناصر تظهر لأول مرة في القائمة (ListView)، تقدر تعملها تأثير دخول 3D خفيف يخلي الواجهة تبدو كأنها "بتطلع من الشاشة".
• أزرار التفاعل (Interactive Buttons): لما المستخدم يضغط على زرار، يحصل تأثير انضغاط في محور Z يديله إحساس ملموس (Tactile Feedback).

خاتمة ونصيحة من أخ

يا صاحبي، البرمجة مش بس كود بينكتب، دي فن بصري (Visual Art) والـ UI الكويسة بتفرق جداً في تقييم التطبيق وتجربة المستخدم (User Experience). ماتخافش تجرب وتلعب بالـ Matrix4 وتغير في الأرقام لحد ما تطلع بنتيجة فريدة تعبر عن شخصيتك وشغلكم. السر كله في التجربة والخطأ (Trial and Error). بالتوفيق في مشروعك القادم، ومستني أشغل تطبيقاتكم المبدعة!