الإطارات الرئيسية والتحريك المتدرّج
أنشئ تحريكات معقدة ومتدرجة
الإطارات الرئيسية والتحريك المتدرّج درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.
الرسوم المتحركة متعددة الخطوات
تنتقل التحولات البسيطة من A إلى B. وللحركة متعددة الخطوات، مثل الارتداد والنبض وتدرّج الألوان، توفّر Angular الدالة keyframes، كما توفّر stagger لتحريك عناصر متعددة بالتتابع.
دالة keyframes
تأخذ keyframes مصفوفة من خطوات style، وتحتوي كل خطوة على offset من 0 إلى 1 يحدّد موضعها ضمن مدة التحريك.
animate('1s', keyframes([
style({ opacity: 0, offset: 0 }),
style({ opacity: 0.5, offset: 0.3 }),
style({ opacity: 1, offset: 1 })
]))فهم offset
يمثّل offset جزءًا من المدة الكلية. تمثّل 0 البداية، وتمثّل 1 النهاية. ينبغي أن تزداد قيم offset عبر المصفوفة.
تأثير الارتداد
تتيح لكم keyframes تجاوز الموضع المستهدف ثم الاستقرار عليه لإنشاء تأثير ارتداد.
keyframes([
style({ transform: 'translateY(0)', offset: 0 }),
style({ transform: 'translateY(-20px)', offset: 0.5 }),
style({ transform: 'translateY(0)', offset: 1 })
])حذف قيم Offset
إذا حذفتم offset، توزّع Angular إطارات keyframes بالتساوي على مدة التحريك.
keyframes([
style({ opacity: 0 }),
style({ opacity: 1 })
])دالة query
لتحريك العناصر الفرعية لعنصر مضيف، استخدموا query لتحديدها داخل التحول.
transition('* => *', [
query(':enter', [
style({ opacity: 0 })
])
])دالة stagger
تطبّق stagger إزاحة زمنية بين تحريك كل عنصر من العناصر المحددة، مما ينشئ تأثيرًا متتابعًا.
query(':enter', [
style({ opacity: 0 }),
stagger(100, [
animate('300ms', style({ opacity: 1 }))
])
])تطبيق التتابع على قائمة
اجمعوا بين query وstagger في trigger على حاوية القائمة، بحيث تتلاشى العناصر للظهور واحدًا تلو الآخر.
trigger('listAnim', [
transition('* => *', [
query(':enter', [
style({ opacity: 0 }),
stagger(80, animate('250ms', style({ opacity: 1 })))
], { optional: true })
])
])العَلَم الاختياري
مرّروا { optional: true } إلى query حتى لا يتسبب التحريك في حدوث خطأ عند عدم وجود عناصر مطابقة.
التتابع السالب
تعكس القيمة السالبة في stagger الترتيب، فتحرّك العناصر الأخيرة أولًا، وهذا مفيد لتأثيرات الخروج المتتابعة.
stagger(-50, animate('200ms', style({ opacity: 0 })))ملاحظة حول الأداء
قد يكون تطبيق التتابع على عدد كبير من العناصر مكلفًا. حافظوا على قِصر مدة التحريك لكل عنصر، وفضّلوا transform وopacity لإبقاء الرسوم المتحركة على GPU.
اختبار سريع
اختبروا مدى فهمكم لإطارات keyframes والتتابع.
مراجعة
تعلّمتم أن keyframes يعرّف الحركة متعددة الخطوات باستخدام قيم offset، بينما يحرّك query مع stagger عناصر متعددة بتتابع. استخدموا { optional: true } للأمان، وفضّلوا الخصائص الملائمة لـ GPU.
الأسئلة الشائعة
هل درس «الإطارات الرئيسية والتحريك المتدرّج» مجاني؟
نعم — نص درس «الإطارات الرئيسية والتحريك المتدرّج» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.
ماذا ستتعلم في «الإطارات الرئيسية والتحريك المتدرّج»؟
أنشئ تحريكات معقدة ومتدرجة تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟
لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الإطارات الرئيسية والتحريك المتدرّج»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟
نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- أساسيات التحريك: trigger و state
- الانتقالات والتوقيت
- تحريك الدخول والمغادرة
- الإطارات الرئيسية والتحريك المتدرّج