Flutter Mobile Development · درس

الحركات المتدرجة والقائمة على الفيزياء

أنشئ حركة غنية في Flutter باستخدام حركات متدرجة تقودها Intervals ومحاكاة نوابض طبيعية قائمة على الفيزياء.

الحركات المتدرجة والقائمة على الفيزياء درس مجاني في Flutter Mobile Development على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Flutter Mobile Development، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Beyond a Single Tween

You already know implicit and explicit animations. Staggered animations sequence multiple properties on one controller, and physics-based animations make motion feel natural.

One Controller, Many Animations

A single AnimationController can drive several Animation objects, each running during a different slice of time.

final controller = AnimationController(
  vsync: this,
  duration: const Duration(seconds: 2),
);

Intervals

A CurvedAnimation with an Interval restricts an animation to a fraction of the parent timeline.

final fade = CurvedAnimation(
  parent: controller,
  curve: const Interval(0.0, 0.4, curve: Curves.easeIn),
);

Staggering Properties

Give each property its own interval so they animate in sequence — fade first, then slide, then scale.

final slide = CurvedAnimation(
  parent: controller,
  curve: const Interval(0.4, 0.7, curve: Curves.easeOut),
);
final scale = CurvedAnimation(
  parent: controller,
  curve: const Interval(0.7, 1.0, curve: Curves.elasticOut),
);

Driving the Tweens

Map each curved animation through a Tween to the values you need.

final opacity = Tween<double>(begin: 0, end: 1).animate(fade);
final offset = Tween<Offset>(
  begin: const Offset(0, 0.3), end: Offset.zero,
).animate(slide);

Building the Widget

Use AnimatedBuilder to rebuild as the controller ticks, applying every staggered value at once.

AnimatedBuilder(
  animation: controller,
  builder: (context, child) => Opacity(
    opacity: opacity.value,
    child: SlideTransition(position: offset, child: child),
  ),
  child: const Card(child: Text('Hello')),
);

Starting the Sequence

Call forward() to play. Because intervals overlap or chain, the children animate in a pleasing stagger.

@override
void initState() {
  super.initState();
  controller.forward();
}

What Are Physics Simulations?

Physics-based animations ignore fixed durations and instead model forces. A SpringSimulation produces realistic bounce and settle.

Spring Simulation

Define a SpringDescription (mass, stiffness, damping) and run it with the controller.

const spring = SpringDescription(mass: 1, stiffness: 100, damping: 10);
final sim = SpringSimulation(spring, 0, 1, 0);
controller.animateWith(sim);

Fling Gestures

The fling method launches an animation with velocity, perfect for swipe-to-dismiss or drag release.

void onDragEnd(DragEndDetails d) {
  controller.fling(velocity: d.primaryVelocity! / 1000);
}

Dispose the Controller

Always dispose the controller to free its ticker.

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

Quick Check

How do you make several properties of one controller animate in sequence rather than all at once?

Recap

You learned advanced motion:

Staggered animations via Intervals on one controller
AnimatedBuilder to apply many values together
Physics simulations with SpringSimulation and fling

These techniques make your UI feel alive and natural.

الأسئلة الشائعة

هل درس «الحركات المتدرجة والقائمة على الفيزياء» مجاني؟

نعم — نص درس «الحركات المتدرجة والقائمة على الفيزياء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Flutter Mobile Development، انتقل إلى CoddyKit PRO. تتضمن دورة Flutter Mobile Development 4 دروس في المجموع.

ماذا ستتعلم في «الحركات المتدرجة والقائمة على الفيزياء»؟

أنشئ حركة غنية في Flutter باستخدام حركات متدرجة تقودها Intervals ومحاكاة نوابض طبيعية قائمة على الفيزياء. تتمرن على Flutter Mobile Development مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Flutter Mobile Development؟

لا تُشترط خبرة سابقة. Flutter Mobile Development على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الحركات المتدرجة والقائمة على الفيزياء»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Flutter Mobile Development هذا؟

نعم. كل درس في Flutter Mobile Development يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Flutter Mobile Development