كيف تعمل الرسوم المتحركة في Flutter؟

Question

Accepted Answer

يوفر Flutter **دعماً قوياً ومرناً للرسوم المتحركة** — من الرسوم المتحركة الضمنية البسيطة إلى الرسوم المتحركة الصريحة المتحكم فيها بالكامل. تعزز الرسوم المتحركة تجربة المستخدم بانتقالات سلسة وحركة، وتجعل النظام القائم على الأدوات في Flutter الرسوم المتحركة في متناول اليد. ## الرسوم المتحركة الضمنية (الطريقة السهلة) ```dart // implicitly-animated widgets animate AUTOMATICALLY when their properties change AnimatedContainer( duration: Duration(milliseconds: 300), width: _expanded ? 200 : 100, // change width → it animates smoothly height: _expanded ? 200 : 100, color: _expanded ? Colors.blue : Colors.red, ) // just change the value (with setState) → Flutter animates the transition // others: AnimatedOpacity, AnimatedPadding, AnimatedPositioned, etc. ``` تنفذ الرسوم المتحركة الضمنية (`AnimatedContainer` و `AnimatedOpacity` وغيرها) الرسوم المتحركة تلقائياً عند تغيير خصائصها — وهي الطريقة الأسهل لإضافة رسوم متحركة. ## الرسوم المتحركة الصريحة (التحكم الكامل) ```dart // explicit animations use an AnimationController for full control class _MyState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; @override void initState() { super.initState(); _controller = AnimationController(duration: Duration(seconds: 1), vsync: this); _animation = Tween(begin: 0, end: 1).animate(_controller); _controller.forward(); // start the animation } @override void dispose() { _controller.dispose(); super.dispose(); } // CLEAN UP the controller! } ``` تستخدم الرسوم المتحركة الصريحة **AnimationController** (للتحكم في التشغيل) و **Tween** (لتحديد نطاق القيمة) للحصول على تحكم دقيق — مطلوب للرسوم المتحركة المخصصة أو المعقدة أو المنسقة. ## أدوات الرسوم المتحركة الأخرى ```text ✓ Hero animations → shared-element transitions between screens (an image flies/grows) ✓ AnimatedBuilder / AnimatedWidget → build UI from an animation efficiently ✓ Page route transitions; staggered animations; physics-based animations ✓ Packages (Rive, Lottie) for complex/designer animations ``` ## أهمية ذلك فهم الرسوم المتحركة في Flutter ذو قيمة لأن **الرسوم المتحركة تعزز تجربة المستخدم** من خلال انتقالات سلسة وحركة تجعل التطبيقات تبدو مصقولة واستجابة، لذا فهي معرفة عملية مفيدة. نظام الرسوم المتحركة في Flutter قوي ومرن، وفهم النهجين الرئيسيين هو المفتاح. **الرسوم المتحركة الضمنية** (أدوات مع رسوم متحركة ضمنية مثل `AnimatedContainer` و `AnimatedOpacity` التي تنفذ الرسوم المتحركة تلقائياً عند تغيير خصائصها) هي **الطريقة السهلة والقابلة للوصول** لإضافة رسوم متحركة — فقط غير قيمة وسيقوم Flutter بتحريك الانتقال بسلاسة، مما يتطلب حداً أدنى من الكود، مناسب لمعظم احتياجات الرسوم المتحركة الشائعة. **الرسوم المتحركة الصريحة** (باستخدام **AnimationController** للتحكم في التشغيل و **Tween** لنطاقات القيم) توفر **تحكماً كاملاً** للرسوم المتحركة المخصصة أو المعقدة أو المنسقة — ضرورية عندما لا تكفي الرسوم المتحركة الضمنية. فهم كليهما — ومتى يتم استخدام كل منهما (الضمنية للرسوم المتحركة البسيطة للخصائص، الصريحة للتحكم الدقيق) — يغطي طيف احتياجات الرسوم المتحركة. معرفة **الأدوات الأخرى** (رسوم متحركة Hero للانتقالات بين الشاشات ذات العنصر المشترك، AnimatedBuilder للرسوم المتحركة الفعالة المدفوعة بـ UI، والحزم مثل Rive/Lottie للرسوم المتحركة المعقدة من المصمم) توسع مجموعة الأدوات. ملاحظة عملية تستحق التذكر هي **التخلص من AnimationControllers** (لمنع التسريب، الاتصال بمعرفة دورة الحياة). بما أن الرسوم المتحركة المصقولة تحسن بشكل كبير تجربة المستخدم (الانتقالات السلسة والحركة والتغذية الراجعة) ويوفر Flutter دعماً قوياً للرسوم المتحركة، وبما أن فهم النهج الضمني والصريح يمكّن من إضافة رسوم متحركة مناسبة، فإن فهم الرسوم المتحركة في Flutter معرفة قيمة وعملية ذات صلة لبناء تطبيقات مصقولة — مفيدة لتعزيز UX بالحركة، من الرسوم المتحركة الضمنية البسيطة (الحالة الشائعة) إلى الرسوم المتحركة الصريحة كاملة التحكم، مهارة قيمة لإنشاء تطبيقات Flutter جذابة واحترافية.