تخفيف مستند إلى الفيزياء

تقتصر دوال التخفيف التقليدية في CSS، مثل ease-in أو cubic-bezier()، على المنحنيات البسيطة، ما يجعل من المستحيل إنشاء تأثيرات معقّدة مستندة إلى الفيزياء، مثل الارتدادات أو النوابض. وتحلّ دالة التوقيت linear() هذه المشكلة من خلال السماح لك بتقديم سلسلة من نقاط التوقف التي يمكن أن تقارب المنحنيات المعقدة. يتم استكمال الانتقالات والصور المتحركة استنادًا إلى خطوط مستقيمة بين نقاط التوقف، ولكن ضمن نقاط توقف كافية، يمكن أن تظهر بسلاسة.

خطوات التنفيذ

1. إنشاء نقاط توقّف المنحنى: من غير العملي رسم عشرات النقاط يدويًا لإنشاء تأثير ارتداد أو قفز. استخدِم دالة توقيت من مكتبة خارجية، أو استخدِم أداة لتحويل دالة تخفيف JavaScript حالية أو مسار SVG إلى بنية linear(). اختياري: يمكنك تخزين دوال التوقيت هذه كخصائص مخصّصة في CSS لإعادة استخدامها في جميع صفحات موقعك الإلكتروني.
2. تحديد دالة التوقيت: طبِّق نقاط التوقف التي تم إنشاؤها على السمة transition-timing-function أو animation-timing-function، أو من خلال الاختصارَين transition أو animation.
3. ضبط المدة: على عكس محرّكات التأثيرات الحركية في JavaScript التي تستمد المدة من الخصائص المادية (الكتلة والصلابة)، لا تزال CSS تتطلّب سمة duration ثابتة. قد تحتاج إلى تعديل المدة للحصول على التأثير المطلوب.

مثال: Spring Easing

يوضّح هذا المثال كيفية استخدام دالة linear() مخصّصة لإنشاء تأثير نابض يتجاوز القيمة المستهدَفة قبل الاستقرار.

.spring {
  /* Define the physics-based easing as a reusable variable */
  --spring-easing: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);


  /* Apply the easing with a duration that fits the spring's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.8s var(--spring-easing);
}

.spring:hover {
  scale: 1.2;
}

مثال: الارتداد

يوضّح هذا المثال كيفية استخدام دالة linear() مخصّصة لإنشاء تأثير ارتداد.

.bounce {
  /* Define the physics-based easing as a reusable variable */
  --bounce-easing: linear(0, 0.214 14.7%, 0.386 23.7%, 0.598 31.9%, 0.999 44.7%, 0.807 52.6%, 0.762 56%, 0.747 59.4%, 0.758 62.4%, 0.793 65.6%, 0.999 77.4%, 0.961 81.2%, 0.949 84.8%, 0.956 88%, 0.993 95.5%, 1);


  /* Apply the easing with a duration that fits the bounce's complexity */
  /* MANDATORY: Always include a duration; linear() does not calculate it automatically */
  transition: scale 0.4s var(--bounce-easing);
}

.bounce:hover {
  scale: 1.2;
}

الاعتبارات الأساسية:

• الأداء: للحصول على صور متحركة سلسة مستندة إلى الفيزياء، يمكنك تطبيق linear() على السمات التي تعمل على سلسلة محادثات منفصلة، مثل transform وopacity.
• الدقة مقابل الحمولة: على الرغم من أنّ زيادة نقاط التوقف تؤدي إلى منحنى أكثر سلاسة، فإنّها تزيد أيضًا من حجم CSS. تتيح لك معظم أدوات الإنشاء "تبسيط" المنحنى للعثور على التوازن الأمثل بين السلاسة وحجم الرمز البرمجي.
• تجنُّب استخدام التعتيم في الارتدادات: قد يؤدي تطبيق تأثيرات الارتداد على opacity إلى حدوث وميض مزعج بصريًا إذا تجاوزت القيمة الحدّ الأقصى أقل من 0 أو أعلى من 1.
• تسهيل الاستخدام: قد تؤدي الصور المتحركة المعقّدة المستندة إلى الفيزياء إلى تشتيت انتباه بعض المستخدمين أو تسبّب لهم حساسية تجاه الحركة. احترِم دائمًا الإعدادات المفضّلة للمستخدم من خلال تقليل هذه الصور المتحركة أو إيقافها.

@media (prefers-reduced-motion: reduce) {
  .element {
    transition: none;
  }
}

استراتيجيات احتياطية

الخيار الاحتياطي لخدمة مقارنة الأسعار (CSS)

بالنسبة إلى المتصفّحات التي لا تتيح استخدام linear()، يمكنك توفير دالة تخفيف عادية كحلّ بديل. سيتجاهل المتصفّح القيمة linear() إذا لم يتعرّف عليها، وسيعود إلى البيان الصالح السابق.

.element {
  /* Fallback for older browsers (standard smooth exit) */
  transition: transform 0.8s ease-out;
  
  /* Modern browsers will override with the physics-based easing */
  transition-timing-function: linear(0, 1.1, 0.95, 1.02, 1);
}

الاحتياطي لمكتبة JavaScript (Motion/GSAP)

اختياري: إذا كانت الرسوم المتحركة الفيزيائية العالية الدقة مهمة حتى في المتصفّحات القديمة، استخدِم مكتبة JavaScript مثل Motion‏ (motion.dev) أو GSAP‏ (greensock.com) للتعامل مع الرسوم المتحركة عندما لا تكون السمة linear() متوافقة.

1. رصد التوافق: استخدِم CSS.supports() للتحقّق مما إذا كان المتصفّح يتوافق مع الدالة linear().
2. التحميل/التطبيق المشروط: في حال عدم توفّر الدعم، استخدِم تنفيذ الارتداد أو القفز في المكتبة.

/* Detect if the browser supports the linear() function */
const supportsLinearEasing = window.CSS && CSS.supports('animation-timing-function', 'linear(0, 1)');

if (!supportsLinearEasing) {
  /* 
     Example using Motion (motion.dev) for a spring fallback.
     This should only be initialized if native CSS support is missing.
  */
  import("https://cdn.jsdelivr.net/npm/motion@latest/dist/motion.js").then(({ animate, spring }) => {
    animate(".element", { transform: "scale(1.2)" }, {
      easing: spring({ stiffness: 100, damping: 10 })
    });
  });
}

يمكنك أيضًا استخدام @supports في CSS لرصد الميزات بشكل أكثر وضوحًا:

@supports not (animation-timing-function: linear(0, 1)) {
  .element {
    /* Alternative experience for unsupported browsers */
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}