Store spring(): رسوم متحركة قائمة على الفيزياء
حرّك القيم باستخدام صلابة وتخميد قابلين للضبط للحصول على إحساس طبيعي
Store spring(): رسوم متحركة قائمة على الفيزياء درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
فيزياء النابض
يحرّك مخزن spring القيم باستخدام الصلابة والتخميد، مثل النابض الحقيقي.
الاستيراد
من svelte/motion.
import { spring } from "svelte/motion";إنشاء نابض
مرّروا قيمة ابتدائية وخيارات.
const pos = spring({ x: 0, y: 0 }, { stiffness: 0.2, damping: 0.4 });تحديث الهدف
عيّنوا هدفًا جديدًا، وستتحرك القيمة نحوه.
pos.set({ x: 100, y: 50 });الاشتراك باستخدام $
استخدموا القيمة تفاعليًا في القالب.
<div style="transform: translate({$pos.x}px, {$pos.y}px);"></div>تتبّع الفأرة
حدّثوا هدف النابض بإحداثيات الفأرة لتتبّع المؤشر بصورة طبيعية.
التعيين الفوري
مرّروا { hard: true } للانتقال فورًا.
pos.set({x: 0, y: 0}, { hard: true });الصلابة
الصلابة الأعلى تعني اقترابًا أسرع من الهدف.
التخميد
التخميد الأعلى يعني تذبذبًا أقل. وتشير القيمة 1 إلى عدم وجود ارتداد.
المتجهات والكائنات
تستوفي النوابض القيم الرقمية داخل المصفوفات والكائنات المتداخلة.
الأداء
تستخدم النوابض rAF داخليًا. وهي سلسة حتى مع وجود العديد من النسخ المتزامنة.
تحقق سريع
ما الذي تتحكم فيه صلابة spring؟
خلاصة
تحرّك مخازن spring القيم باستخدام الفيزياء. اضبطوا stiffness وdamping للحصول على الإحساس المطلوب.
الأسئلة الشائعة
هل درس «Store spring(): رسوم متحركة قائمة على الفيزياء» مجاني؟
نعم — نص درس «Store spring(): رسوم متحركة قائمة على الفيزياء» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «Store spring(): رسوم متحركة قائمة على الفيزياء»؟
حرّك القيم باستخدام صلابة وتخميد قابلين للضبط للحصول على إحساس طبيعي تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «Store spring(): رسوم متحركة قائمة على الفيزياء»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- Store spring(): رسوم متحركة قائمة على الفيزياء
- Store tweened(): المدة والتيسير
- دوال الاستيفاء
- تحريك مسارات SVG بالحركة