أنماط الإنتقالات animation في لغة الأنماط الإنسيابية cssanimation
في درس سابق بعنوان ( الأنميشن animation في لغة الأنماط الإنسيابية css ) تعرفنا بعجالة على طريقة إنشاء مؤثرات إنتقالة .
و من ضمن التوصيفات اللتي تعرفنا عليها في هدا الدرس توصيف نمط أو طريقة الإنتقال animation-timing-function
و اللدي يمكن كتابته في الثرتيب الثالث لتوصيف animation أو إستخدام التوصيف المخصص animation-timing-function
مرحبا
مع إستبدال 12 بعدد المراحل
مثال عملي
ease
Steps(12)
Ease_in
في درس سابق بعنوان ( الأنميشن animation في لغة الأنماط الإنسيابية css ) تعرفنا بعجالة على طريقة إنشاء مؤثرات إنتقالة .
و من ضمن التوصيفات اللتي تعرفنا عليها في هدا الدرس توصيف نمط أو طريقة الإنتقال animation-timing-function
و اللدي يمكن كتابته في الثرتيب الثالث لتوصيف animation أو إستخدام التوصيف المخصص animation-timing-function
يمكنك مراجعة الدرس السابق من خلال الرابط
النمط السهل ease هو الشكل الإفتراضي و يمكن كتابته بإحدى الطريقتين التاليتين
أنماط الإنتقال الشائعة كالتالي
linear
ease
ease-in
ease-out
ease-in-out
لاحض أن جميع العناصر تقطع نفس المسافة في نفس الوقت لكن يبقى الإختلاف في توزيع السرعة على المسافة
بإستثناء النمط الخطي linear فجميع الأنماط الأخرى تتغير السرعة فيها حسب الموقع
يمكن أيضا جعل الإنتقال متقطع إلى مراحل متساوية
steps()
animation-timing-function: steps(12,start);
مع إستبدال 12 بعدد المراحل
مثال عملي
ease
Steps(12)
Ease_in
Ease_out
النمط الأكثر إثارة في الأنميشن هو النمط المخصص
و اللدي يمكنك من خلاله التحكم يدويا بالتسارع و التباطء الخاص بالعنصر
لأخد فكرة لاحض المربع التالي
الإنتقال من نقطة البدء إلى الهدف يستغرق وقتا و مسافة
نقطة البدء حمراء و نقطة الهدف خضراء . فيما يمثل الخط الأفقي المدة . و الخط العمودي يمثل المسافة
يسمى هدا الرسم بمكعب بيزر cubic bezie و من خلاله يمكن التحكم على وجه الدقة بتسارع أو تباطئ العنصر في مساره
لاحض في النمودج التالي حركة السهم المرافقة لمسار التسارع على مكعب بيزر
الأجزاء اللتي يكون إتجاه المسار فيها حادا نحو الأعلى تعني سرعة حركة كبيرة
و في المقابل كلما كان الإتجاه أفقيا كانت السرعة أقل
طريقة تحديد المسار في مكعب بيزر
يعتمد إنحراف المسار في مكعب بيزر على نقطتين تسميان بــ : نقاط التأثير البيني
كل نقطة من هاتين النقطتين تؤثر في شكل مسار التسارع
يكتب مسار التسارع في مكعب بيزر على الشكل التالي
cubic-bezier(.94,.2,.22,.87)
يمثل المدخلان الأول و التاني إحداثيات النقطة الأولى
و يمثل المدخل الثالث و الرابع إحداثيات النقطة الثانية
من خلال الأمثلة الثالية يمكنك ملاحظة ثأثير المسار على حركة السهم
cubic-bezier(.97,.04,0,.97)
cubic-bezier(0.62, 0, 0.62, 1)
cubic-bezier(1,0,1,0)
cubic-bezier(0,1,0,1)
يمكن بسهولة الحصول على قيمة مسار التسارع اللتي تريدها من خلال الموقع
https://cubic-bezier.com/
فقط عن طريق تحريك نقاط التأثير البيني يدويا ستحصل على قيمة المسار
علاوة على دلك ستتمكن من معاينة التسارع آنيا
أو يمكن ببساطة فحص العنصر اللدي عليه أنميشن و إستكشاف قيمة مكعب بيزر و نقلها أو تغييرها من خلال متصفح جوجل كروم أو أي متصفح شبيه
cubic-bezier(.82,-0.58,.7,1.64)
