أسئلة مقابلات Animations, Motion & Custom Painters في Flutter
10 سؤال عن Animations, Motion & Custom Painters من مسار Flutter. اقرأ الإجابة المختصرة لكل سؤال هنا، وافتح السؤال للشرح الكامل والأمثلة والأخطاء الشائعة والمصادر.
- مبتدئ
ما الفرق الأساسي بين الـ Implicit Animations والـ Explicit Animations في Flutter ومتى تختار كلاً منهما؟
الـ Implicit Animations تدير الـ Controller تلقائياً بمجرد تغيير قيمة الـ Property (مثل AnimatedContainer)، بينما الـ Explicit تمنحك تحكماً كاملاً عبر AnimationController لبدء الحركة، إيقافها، عكسها، أو تكرارها.
اقرأ الشرح الكامل - متوسط
ما هو دور الـ Ticker والـ TickerProvider (vsync) في تشغيل الحركات داخل Flutter؟
الـ Ticker يُرسل إشعاراً مع كل فريم شاشة يطلبه المحرك (عادة 60 أو 120 هرتز)، والـ vsync يضمن ربط الـ Ticker بدورة حياة الشاشة لإيقاف تشغيل الحركة عند اختفاء الويدجت منعاً لهدر المعالج والبطارية.
اقرأ الشرح الكامل - متوسط
كيف يحسن AnimatedBuilder أداء الواجهة مقارنة بإعادة بناء الشجرة عبر setState() أثناء الحركة؟
يقوم AnimatedBuilder بإعادة رسم وبناء الويدجت الفرعي المتحرك فقط في كل فريم، مع إمكانية تمرير الشجرة الثابتة كـ child جاهز يتم تفاديه تماماً من الـ Rebuild.
اقرأ الشرح الكامل - متقدم
كيف تصمم حركة متسلسلة (Staggered Animation) متناسقة باستخدام AnimationController واحد و Interval curves؟
عبر تقسيم المجال الزمني للـ AnimationController الواحد (من 0.0 إلى 1.0) إلى فترات زمنية متداخلة أو متتالية باستخدام فئات CurvedAnimation المزودة بـ Interval(start, end, curve).
اقرأ الشرح الكامل - متوسط
كيف تعمل ويدجت Hero في Flutter وما هو دور flightShuttleBuilder و createRectTween؟
تنشئ Hero حركة انتقال سلسة لعنصر مشترك بين مسارين في الـ Navigator عبر نقله في طبقة الـ Overlay؛ ويتحكم flightShuttleBuilder في شكل العنصر أثناء الطيران بينما يحدد createRectTween مسار الحركة الفيزيائي.
اقرأ الشرح الكامل - متقدم
ما هي اعتبارات الأداء القصوى عند استخدام CustomPainter وما الذي يتحكم به shouldRepaint()؟
يحدد shouldRepaint() ما إذا كانت هناك حاجة لإعادة تنفيذ أوامر الرسم على الـ Canvas عند إعادة البناء؛ وعدم التحقق الدقيق من الحقول يؤدي لإعادة رسم فادحة وغير مبررة تستهلك الـ GPU.
اقرأ الشرح الكامل - متقدم
كيف تبني حركات تفاعلية قائمة على المحاكاة الفيزيائية (Physics-based simulation) مثل النوابض (Springs)؟
باستخدام AnimationController.animateWith() وتمرير محاكاة فيزيائية مشتقة من Simulation مثل SpringSimulation مع تحديد الكتلة والصلابة ونسبة التخميد.
اقرأ الشرح الكامل - متوسط
كيف تبني انتقالات مخصصة بين الشاشات باستخدام PageRouteBuilder و transitionsBuilder؟
من خلال استبدال MaterialPageRoute بـ PageRouteBuilder وتمرير دالة transitionsBuilder التي تستقبل الـ animation والـ secondaryAnimation لتطبيق مؤثرات مثل الانزلاق والتلاشي.
اقرأ الشرح الكامل - متقدم
ما هو دور RepaintBoundary في تسريع الحركات المعقدة ومنع إعادة رسم أجزاء الشاشة الثابتة؟
تنشئ RepaintBoundary طبقة عرض منفصلة (Render Layer) في الـ Render Tree، مما يمنع انتقال إشارة الرسم غير الصالح (Paint Dirty Flag) إلى الـ Parent وباقي عناصر الشاشة.
اقرأ الشرح الكامل - متوسط
متى تستخدم مكتبات المتجهات مثل Rive و Lottie في مقابل كتابة الحركات برمجياً بكود Flutter الخالص؟
تُستخدم Rive و Lottie للرسوم التوضيحية الفنية المعقدة والحركات الفيكتورية التفاعلية المصممة عبر برامج تصميم، بينما تُفضل الحركات الكودية الخالصة للـ Micro-interactions البسيطة وعناصر واجهة المستخدم القابلة للتخصيص الديناميكي.
اقرأ الشرح الكامل