مولّد منحنى cubic-bezier

ما منحنى cubic-bezier؟

تحتاج الحركات والانتقالات في CSS إلى قاعدة توزّع التقدّم على الزمن. فـ`linear` توزّعه بالتساوي، وما هو أطرف من ذلك منحنى. وتتيح لك ‎cubic-bezier(x1, y1, x2, y2)‎ رسم ذلك المنحنى بنفسك بوضع نقطتَي تحكّم بين بداية ثابتة عند (0، 0) ونهاية ثابتة عند (1، 1).

ومواصفة CSS Easing دقيقة في بيان معنى المحورين: فقيم تقدّم الدخل هي قيم x على المنحنى، وقيم y هي قيم تقدّم الخرج. أي إن x هي مقدار ما مضى من المدة، وy مقدار ما تحقق من الحركة. فالمنحنى الذي يصعد بحدة في أوله ثم يستوي يصف شيئًا ينطلق سريعًا ثم ينزلق حتى يقف.

والكلمات المفتاحية الأربع المألوفة ليست إلا منحنيات مسماة. فـ`ease` هي ‎cubic-bezier(0.25, 0.1, 0.25, 1)‎، و`ease-in` هي (0.42, 0, 1, 1)، و`ease-out` هي (0, 0, 0.58, 1)، و`ease-in-out` هي (0.42, 0, 0.58, 1). وأي منحنى تسحبه هنا مشروع مثلها تمامًا.

طريقة الاستعمال

1. اسحب أيًّا من المقبضين. يُعاد رسم المنحنى أثناء تحريكهما، ويتحدث CSS معه. والمقبضان يقبلان التركيز، فتحركهما مفاتيح الأسهم بمقدار 0.01، ومع Shift بمقدار 0.1، إن آثرت الدقة على السرعة.
2. جرّب إعدادًا جاهزًا أو تجاوز المربع. كلمات CSS المفتاحية الخمس على بعد نقرة. أما الإعدادان ذوا التجاوز فيسحبان المنحنى خارج مربع 0–1 عن قصد، وذلك جائز، وهو ما يجعل الحركة تتجاوز هدفها ثم تعود إليه.
3. شغّلها ثم انسخها. تتحرك المعاينة بـCSS الحقيقي، فالمتصفح هو الذي يحسب التسارع وأنت ترى الشيء نفسه لا إعادة تنفيذ له. ويعطيك زر النسخ تصريح ‎transition-timing-function‎ كاملًا.

الخطأ الذي تدور حوله هذه الصفحة حقًا

منحنى بيزييه التكعيبي وسيطي. فكلٌّ من x وy دالة في وسيط خفي، سمِّه s، يمتد من 0 إلى 1 وليس هو الزمن ولا التقدّم. ولذلك فتقويم التسارع عند اللحظة t خطوتان: حلّ ‎x(s) = t‎ لإيجاد s، ثم إرجاع ‎y(s)‎.

وتخطّي ذلك الحل وإقحام الزمن مباشرةً مكان الوسيط هو أشيع ما يفسد به كودُ التسارع المكتوب باليد، وليس خطأً خفيًا. ففي `ease`، وهي القيمة الافتراضية للمتصفح نفسه، يخطئ الاختصار بمقدار 28.74% من مدى الحركة كله، وأسوأ ما يكون عند 40% من الطريق. وفي `ease-in` و`ease-out` يبلغ 22.96%.

وثمة مصيدة كذلك عند اختبار كودك أنت. فـ`ease-in-out` شبه متناظرة، فيتعادل الخطأ في معظمه ويهبط إلى 2.86%، وهو قليل يكفي ليبدو فرق تقريب. وأسوأ منها ‎cubic-bezier(0, 0, 1, 1)‎: فهي تعطي خطًا مستقيمًا تمامًا، فتبدو الحالة الآمنة للاختبار، ومع ذلك يظل الاختصار مخطئًا فيها بمقدار 9.62%، لأن ‎x(s)‎ فيها تساوي ‎3s² − 2s³‎ لا s.

بل إن الاختصار لا يكون مضبوطًا إلا لعائلة واحدة من المنحنيات: ‎x1 = 1/3‎ و‎x2 = 2/3‎. فهذه وحدها نقاط التحكم التي تجعل ‎x(s)‎ دالةَ الهوية، ومن ثم هي وحدها التي يكون فيها الوسيط هو الزمن حقًا. وكل منحنى سواها يحتاج إلى الحل.

واللوحة أسفل المحرّر تقيس هذا للمنحنى الذي ركّبته أنت، لأن حجم الخطأ متوقف على المنحنى كليًا.

حدود معلنة بصراحة

قيم x محصورة بين 0 و1 وقيم y ليست كذلك، وتلك قاعدة المواصفة لا قرارٌ اتُّخذ هنا: فالصياغة هي ‎cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)‎. وهذا التفاوت ليس اعتباطًا. فما دام مقبضا x داخل الفترة الواحدية، تكون ‎x(s)‎ متزايدة دائمًا، فيقابل كلَّ لحظة نقطةٌ واحدة لا غير على المنحنى، وقد تحققنا من ذلك على 200,000 زوج عشوائي دون مثال مضاد واحد. وأخرج x عن المدى ينهر ذلك الضمان، وهو بعينه سبب رفض CSS له. أما ترك y حرًّا فلا يكلّف شيئًا ويمنحك التجاوز.

والتجاوز حقيقي ويستحق النظر: فالإعداد back-out يبلغ تقدّم خرج قدره 1.0869 قبل أن يستقر، وback-in يهبط أولًا إلى −0.0969. وهذان الإعدادان عرفان شائعان لا جزءان من CSS، والصفحة تسمّيهما كذلك.

والحلّال نيوتن-رافسون مع ارتداد إلى التنصيف، وهو ما تستعمله محركات المتصفحات نفسها. ويُختبر بالتعويض لا في مقابل تنفيذ ثانٍ: إذ يُعاد الوسيط الذي يرجعه إلى x ويُشترط أن يستعيد الزمن بخطأ دون جزء من المليون، على 40,000 منحنى عشوائي، وعلى المنحنيات المستوية الأطراف حيث يتعثر نيوتن ويتولى التنصيف.

ويغطي هذا المحرّر cubic-bezier وحده. ففي CSS أيضًا ‎linear()‎ بمحطات حرة، وعائلة ‎steps()‎، وليست أيٌّ منهما منحنى بيزييه: فلهما محرّر آخر، ولا تُقارَب هنا في صمت.

وثمانية وأربعون تحققًا تغطي قيم الكلمات المفتاحية، والحلّال، وضمانَ الاطراد ومثالَه المضاد، وأرقامَ الخطأ المنشورة، والتنسيق.

لماذا هذه الأداة مجانية؟

هي منحنى وحلّال ومربع نص، وكلها تجري داخل متصفحك. لا يُرفع شيء، ولا حساب يُنشأ، والمعاينة تستعمل حركة المتصفح نفسه لا شيئًا يُقدَّم من هنا.

ولوحة القياس ليست إضافة مدفوعة كذلك، فهي علة وجود الصفحة.