ورقة غش للـEasing Functions
Easing functions هي دوال تحدد معدل تغيير خاصية أو قيمة مع الزمن.
الأشياء في الواقع لا تيدأ أو توقف حركتها فجأة، وغالبا لا تتحرك بسرعة ثابتة. عندما نفتح درجاً، فإننا نحركه بسرعة في البداية، ثم ننقص السرعة أثناء خروجه. أسقط شيئا وستراه يتسارع للأسفل، ثم يرتد للأعلى بعد اصطدامه بالأرض.
هذه الصفحة تساعدك على إختيار ال easing function المناسبة.
مفتوح المصدر
ساهم بترجمة هذه الصفحة للغتك
x
t
CSS
في CSS، خصائص ال transition وال animation تسمح لك بتحديد ال easing function.
.block { transition: transform 0.6s ; }
جربها على cubic-bezier.com.
في CSS، يمكن التعبير عن هذه الدالة بإستعمال
@keyframes:الحجم
تحميل...
الموضع
تحميل...
الشفافية
تحميل...
PostCSS
في PostCSS، التعبير عن هذه الدالة بشكل أسهل بكثير. هناك إضافة postcss-easings التي تستعمل معلومات ال transition من هذا الموقع.
.block { transition: transform 0.6s ; }
يتم تحويل هذا التعبير إلى تعبير CSS المذكور أعلاه
للأسف، لا يمكن استعمال هذه الدالة عن طريق إضافة ل PostCSS. لكن بمكن التعبير عنها عن طريق
@keyframes, أنظر أعلاه.Gradient
يمكن رسم gradient بإستخدام postcss-easing-gradients.
.block { background: linear-gradient( to bottom, #1473e6, , #247b5e ); }
دالة رياضية
بالأسفل يمكنك رؤية كود هذه الدالة بلغة TypeScript. المتغير x يمثل تقدم الحركة بين 0 (بداية الحركة) و 1 (نهاية الحركة).
function (x: number): number {
}بالأسفل يمكنك رؤية كود هذه الدالة بلغة TypeScript. المتغير x يمثل تقدم الحركة بين 0 (بداية الحركة) و 1 (نهاية الحركة).
function (x: number): number {
}جرب ال easing من أجل تغيرات:
هذه الدالة:
هذه الدالة
الدالة الخطية:
الدالة الخطية