دمج الانتقالات والرسوم المتحركة
اجمع الانتقالات والرسوم المتحركة للحصول على تأثيرات واجهة غنية ومنسّقة
دمج الانتقالات والرسوم المتحركة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
الحركة متعددة الطبقات
ادمج transition: وanimate: للعناصر التي تتلاشى عند الظهور وتُعاد مواضعها بسلاسة.
مثال
قائمة مهام تظهر فيها العناصر الجديدة بحركة سريعة إلى الداخل، بينما تُعاد مواضع العناصر الموجودة بسلاسة.
{#each todos as todo (todo.id)}
<li in:fly={{ y: 20 }} animate:flip>{todo.text}</li>
{/each}ترتيب التطبيق
يتعامل Svelte بسلاسة مع الانتقالات المتزامنة ورسوم FLIP المتحركة.
تجنّب التعارض
تؤثر الانتقالات في عتامة العنصر وموضعه، بينما تحرّكه الرسوم المتحركة. ويعمل كلاهما بشكل مستقل.
توحيد المدد
استخدم مددًا متقاربة للانتقالات والرسوم المتحركة كي تبدو الحركة منسّقة.
استخدام تسهيل مخصص
طبّق دالة التسهيل نفسها على كليهما للحفاظ على إحساس متسق.
مراقبة الأداء
قد تكون الرسوم المتحركة المتزامنة الكثيرة في القوائم الكبيرة مكلفة. حدّد العناصر المرئية أو استخدم العرض الافتراضي.
الاقتران مع المخازن
يمكن لمخازن Spring أو tweened تحريك الخصائص الرقمية التي تتغير بالتزامن مع الانتقالات.
الاستخدام في العالم الحقيقي
لوحات المعلومات، ولوحات السحب والإفلات، والمعارض القابلة للفرز؛ أي مكان تتغير فيه القوائم بمرور الوقت.
إمكانية الوصول
احترم prefers-reduced-motion باستمرار في كل من الانتقالات والرسوم المتحركة.
تأثير الصقل
تزيد الحركة المنسّقة الجودة المتصوَّرة بدرجة كبيرة، ولذلك تستحق الجهد.
تحقق سريع
هل يمكنك استخدام transition: وanimate: معًا؟
مراجعة
استخدم transition: للدخول والخروج، وanimate: لإعادة الترتيب، للحصول على واجهة مستخدم غنية ومصقولة.
الأسئلة الشائعة
هل درس «دمج الانتقالات والرسوم المتحركة» مجاني؟
نعم — نص درس «دمج الانتقالات والرسوم المتحركة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «دمج الانتقالات والرسوم المتحركة»؟
اجمع الانتقالات والرسوم المتحركة للحصول على تأثيرات واجهة غنية ومنسّقة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «دمج الانتقالات والرسوم المتحركة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- animate:flip لإعادة ترتيب القوائم
- مخزنا spring() وtweened()
- دوال التيسير المخصصة
- دمج الانتقالات والرسوم المتحركة