دوال التيسير المخصصة
اكتب دوال التيسير أو استوردها للتحكم في وتيرة الرسوم المتحركة
دوال التيسير المخصصة درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ما المقصود بالتسهيل
تربط دالة التسهيل الزمن الخطي (من 0 إلى 1) بمنحنى تقدم غير خطي، ما يمنح الرسوم المتحركة طابعًا مميزًا.
توقيع الدالة
تأخذ دالة التسهيل t ضمن [0, 1] وتُرجع تقدمًا معدّلًا.
function linear(t) { return t; }المكتبة المضمنة
يصدّر svelte/easing في Svelte منحنيات شائعة: linear وquadIn وcubicOut وelasticOut وbounceOut وغير ذلك.
استخدام الدوال المضمنة
مرّرها إلى انتقال أو حركة تدريجية.
import { cubicOut } from "svelte/easing";
const p = tweened(0, { easing: cubicOut });الدوال المخصصة
اكتب دالتك الخاصة لتتوافق مع التصميم.
function easeInOutSine(t) { return -(Math.cos(Math.PI * t) - 1) / 2; }منحنيات Bezier
حوّل قيم CSS cubic-bezier إلى دوال JavaScript للتحكم الدقيق.
متى تُستخدم
طابق التسهيل مع الإجراء: استخدم cubic-out للدخول، وcubic-in للخروج، وelastic-out لظهور نابض.
التركيب
ادمج عدة دوال تسهيل لإنشاء حركة معقدة، مثل بداية سريعة ونهاية بطيئة وارتداد عند الانتهاء.
أداة تصور التسهيل
استخدم أدوات عبر الإنترنت مثل easings.net لمعاينة المنحنيات قبل كتابة الشيفرة.
إمكانية الوصول
تجنّب دوال التسهيل شديدة الارتداد للمستخدمين الذين لديهم حساسية تجاه الحركة.
إعادة الاستخدام
عرّف دوال التسهيل المخصصة في وحدة مشتركة للحفاظ على إحساس متسق في أنحاء تطبيقك.
تحقق سريع
ما نطاق الإدخال لدالة التسهيل؟
مراجعة
يربط التسهيل التقدم الخطي بمنحنى. استخدم الدوال المضمنة من svelte/easing أو اكتب دوالًا مخصصة.
الأسئلة الشائعة
هل درس «دوال التيسير المخصصة» مجاني؟
نعم — نص درس «دوال التيسير المخصصة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «دوال التيسير المخصصة»؟
اكتب دوال التيسير أو استوردها للتحكم في وتيرة الرسوم المتحركة تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «دوال التيسير المخصصة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- animate:flip لإعادة ترتيب القوائم
- مخزنا spring() وtweened()
- دوال التيسير المخصصة
- دمج الانتقالات والرسوم المتحركة