بوست النهاردة هو بوست دسم وعميق، فـ خلينا نبدأ على طول ونتكلم عن الـCubic Bezier، بدون رغي كتير خلينا نخش في الموضوع على طول
في عالم الـCSS بنستخدم الـTransitions، عشان نغير قيمة Property بشكل متغير مع الزمن، يعني لو بنتكلم على تغيير لون Div، فـ لو بدون استخدام الـTransition الـDiv لونه هيتغير على طول بدون ما نلاحظ أصلًا، ولكن مع الـTransition تقدر تحدد زمن معين يتغير فيه اللون ده
– شوف المثال ده عشان تفهم أكتر : –
https://jsfiddle.net/p51b8qox
وزي ما بنقدر نحدد وقت للـTransition، نقدر كمان نحدد مقدار التغير بالنسبة للوقت! بحيث ان من الفترة الفلانية للفترة الفلانية يتغير اللون بنسبة قد كذا، وللفترة الفلانية بنسبة تانية وهكذا
وهنا بيظهر عندنا كذا قيمة ممكن تقبلها الـTransition Property، وهم بإختصار
Linear
Ease-In
Ease-Out
Ease-In-Out
الـLinear هو التغيير الخطي، تغيير بنسبة متساوية على فترات متساوية من الزمن، زي المثال اللي فوق ده، أقدر أقولك بعد مرور 10% من الزمن اللون هيتغير بنسبة 10% وهكذا، لأن ده تغيير خطي
الباقي هتفهمهم مع الـCubic Bezier، وده بقى الجزء الشيق من بوست النهاردة، الـCubic Bezier (مكعب بيزير) بيعبر عن منحنى بيزيه أو ما يعرف بالـBezier Curve، وبيستخدم عشان ترسم بيه منحنيات سلسة وناعمة، وفي الـTransition هنا فـ هو هيساعدك تعمل Transitions ناعمة وتتحكم في مقدار التغير بالنسبة للوقت بشكل شبه كامل
الـCubic Bezier في الـCSS بيقبل منك 4 مدخلات، في الحقيقة هو بيتم التعبير عنه بـ4 نقط، ولكن اتنين منهم ثابتين ودول نقطة البداية ونقطة النهاية، نقطة البداية هي الزوج المرتب (0,0)، ونقطة النهاية هي الزوج المرتب (1,1)، وهو عبارة عن علاقة بين مقدار التقدم Progress والوقت Time
المدخلات اللي بيقبلها منك هي عبارة عن قيم الـX والـY لنقاط التحكم على مستوى الإحداثيات، وبالبديهة قيم X ماينفعش تبقى أكبر من 1 أو أقل من 0، بص برضه ع الصورة هنا عشان يوصلك المعنى اللي أقصده بشكل أكبر، P0 وP3 هم النقط الافتراضية (نقطة البداية والنهاية)، ونقاط التحكم هي P1 وP2
شوف من هنا :
نقاط التحكم دي هي اللي بتقدر من خلالها تظبط الـCurve اللي بيوصل بين نقطة البداية ونقطة النهاية، وببساطة الـCurve ده اللي بيعبر عن شكل العلاقة بين الـProgress والـTime هو بالظبط اللي بيحدد كمية التقدم بالنسبة للوقت
وعلى هذا المنوال
يبقى الـLinear لو هنمثله بالـCubic Bezier هتبقى نقاط التحكم بتاعته بالشكل ده
P1 = (0,0)
P2 = (1,1)
والـEase-In هتبقى تعديل في قيم نقطة التحكم الأولى بحيث الـCurve يبقى محدب في بداية الـTransition وينتهي بشكل شبه مستقيم في نهايتها بشكل يشبه الـLinear
والـEase-Out عكس الـEase-In، نقطة التحكم التانية هي اللي بيتم فيها التغيير
وأخيرًا Ease-In-Out بتغير في قيم نقطتين التحدب بكل من قيم Ease-In وEase-Out
وأخيرًا وبدل الهري ده كله، لما تحب تعمل Transition بعد ما فهمت الكلام ده، خش على الموقع ده واظبط الـCurve بشكل Visual من خلال نقاط التحكم، وخد النتيجة Copy والسلام عليكم 😂
https://cubic-bezier.com
وبس كدة، ده كان الموضوع بس مش ببساطة، هو الحقيقة موضوع Advanced نوعًا ما وواخد غطسة قوية في الـMathematics، حاولت أبسطه على قد ما أقدر ودي كانت النتيجة، متنساش تقولي فهمت ولا لأ في الكومنتات.
الجينيص
CSS Notes
الجينيص