مخزنا spring() وtweened()
حرّك القيم الرقمية باستخدام Stores spring المعتمدة على الفيزياء أو Stores tweened المعتمدة على المدة
مخزنا spring() وtweened() درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
مخازن الحركة
يوفّر Svelte مخازن واعية بالحركة: tweened (تعتمد على المدة) وspring (تعتمد على الفيزياء).
الاستيراد
من svelte/motion.
import { tweened, spring } from "svelte/motion";إنشاء Tweened
مرّر قيمة ابتدائية وخيارات مثل duration وeasing.
const progress = tweened(0, { duration: 500 });التعيين أو التحديث
استدعِ set() أو update()؛ إذ يحرّك المخزن الانتقال بين القيم تلقائيًا.
progress.set(1);إنشاء Spring
تحتوي مخازن Spring على خياري stiffness وdamping للتحكم في السلوك الفيزيائي.
const coords = spring({ x: 0, y: 0 }, { stiffness: 0.1, damping: 0.25 });الاشتراك باستخدام $
استخدمها مثل أي مخزن آخر داخل المكوّنات.
<p>{$progress}</p>الأرقام والكائنات
يُجري كلا المخزنين استيفاءً للأرقام والبنى التي تحتوي على خصائص رقمية متداخلة.
الاستيفاء المخصص
مرّر دالة interpolate مخصصة للقيم غير الرقمية مثل الألوان.
Spring الفوري
استدعِ spring.set(value, { hard: true }) للانتقال مباشرةً من دون حركة.
حالات الاستخدام
تتبّع مؤشر الفأرة، والسحب، وواجهات المستخدم التي يتحكم فيها التمرير، والعدادات، وأشرطة التقدم.
الاقتران مع التحويلات
طبّق القيمة المتحركة على style="transform: ..." للحصول على حركة سلسة.
تحقق سريع
أي مخزن يوفّر حركة شبيهة بالحركة الفيزيائية؟
مراجعة
يحرّك كل من tweened وspring من svelte/motion القيم الرقمية بسلاسة.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 41
- الدروس
- 163
الأسئلة الشائعة
هل درس «مخزنا spring() وtweened()» مجاني؟
نعم — نص درس «مخزنا spring() وtweened()» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «مخزنا spring() وtweened()»؟
حرّك القيم الرقمية باستخدام Stores spring المعتمدة على الفيزياء أو Stores tweened المعتمدة على المدة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «مخزنا spring() وtweened()»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- animate:flip لإعادة ترتيب القوائم
- مخزنا spring() وtweened()
- دوال التيسير المخصصة
- دمج الانتقالات والرسوم المتحركة