تكرار السؤال: …
الإجابة المختصرة
عبر تقسيم المجال الزمني للـ AnimationController الواحد (من 0.0 إلى 1.0) إلى فترات زمنية متداخلة أو متتالية باستخدام فئات CurvedAnimation المزودة بـ Interval(start, end, curve).
الشرح
بدلاً من إنشاء AnimationController منفصل لكل عنصر وتنسيق توقيتاتها يدوياً، تُبنى حركات Staggered باستخدام Controller رئيسي واحد. يتم تعريف Animations متعددة (للشفافية، الموقع، القياس) وكل منها مربوط بـ CurvedAnimation تحدد Interval مثل Interval(0.0, 0.5) للأول و Interval(0.4, 1.0) للثاني. هذا يضمن تزامن الحركات بدقة متناهية وسهولة إدارتها وعكسها ككتلة متحدة.
مثال بالكود
final opacityAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.0, 0.4, curve: Curves.easeIn),
),
);
final slideAnimation = Tween<Offset>(begin: const Offset(0, 1), end: Offset.zero).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.3, 1.0, curve: Curves.easeOutCubic),
),
);أخطاء شائعة
- محاولة إنشاء عشرات وحدات التحكم المنفصلة وربطها بـ await Future.delayed()، مما يؤدي لتعقيد شديد وفقدان التزامن وسلوك غير مستقر عند إلغاء الحركة.