Store tweened(): المدة والتيسير
استوفِ القيم على مدى مدة ثابتة باستخدام تيسير مضمّن أو مخصص
Store tweened(): المدة والتيسير درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
المعتمد على المدة
يحرّك مخزن tweened القيم خلال مدة ثابتة باستخدام دالة تسهيل.
إنشاء مخزن
مرّروا قيمة ابتدائية وخيارات.
import { tweened } from "svelte/motion";
const p = tweened(0, { duration: 500, easing: cubicOut });التحريك إلى هدف
استدعوا set بالقيمة الجديدة. يحرّك المخزن القيمة خلال المدة المحددة.
p.set(100);طريقة التحديث
حرّكوا القيمة انطلاقًا من قيمتها الحالية.
p.update(n => n + 1);الاشتراك
استخدموا $p في القالب.
<progress value={$p} max="100"></progress>تسهيل مخصص
مرّروا أي دالة تسهيل من svelte/easing أو دالتكم الخاصة.
الأهداف الكائنية
مثل spring، يستطيع tweened تحريك قيم الكائنات.
التجاوز لكل استدعاء
تقبل set وسيط خيارات ثانيًا لتجاوز المدة أو التسهيل في انتقال واحد.
p.set(0, { duration: 1000 });متى نستخدمه
فضّلوا tweened على spring عندما تحتاجون إلى حركة متوقعة تعتمد على الوقت.
حالات الاستخدام
أشرطة التقدم، والمقاييس، والرسوم المتحركة المتسلسلة.
الأداء
مثل spring، يستخدم tweened rAF داخليًا لحركة سلسة.
تحقق سريع
ما الفرق الرئيسي بين tweened وspring؟
خلاصة
يحرّك tweened القيم خلال مدة ثابتة باستخدام التسهيل. استخدموه للحركة المتوقعة المعتمدة على الوقت.
الأسئلة الشائعة
هل درس «Store tweened(): المدة والتيسير» مجاني؟
نعم — نص درس «Store tweened(): المدة والتيسير» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «Store tweened(): المدة والتيسير»؟
استوفِ القيم على مدى مدة ثابتة باستخدام تيسير مضمّن أو مخصص تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «Store tweened(): المدة والتيسير»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Store spring(): رسوم متحركة قائمة على الفيزياء
- Store tweened(): المدة والتيسير
- دوال الاستيفاء
- تحريك مسارات SVG بالحركة