ورقة غش لل Easing Functions.

Easing functions تحدد معدل تغيير الخاصية مع الزمن.

الأشياء في الواقع لا تبدأ الحركة ولا تتوقف فجأة ، و غالبا لا تتحرك ب سرعة ثابتة. عندما نفتح درج ، فإننا أولا نحركه بسرعة ثم ببطء و نحن نخرجه. اقذف شيئا على الأرض و ستتزيد سرعته إلى الأسفل ثم يرتد للأعلى بعد الإصطدام بالأرض.

هذه الصفحة تساعدك على إختيار ال easing function المناسبة.

Open Source

ساهم بترجمة هذه الصفحة للغتك

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

All easings

CSS

في CSS ، خصائص ال transition و ال animation تسمح لك بتحديد ال easing function .

.block {
	transition: transform 0.6s ;
}

جربها على cubic-bezier.com.

In CSS, this function can be implemented using @keyframes:

Size

Position

Transparency

PostCSS

في PostCSS، ال easing function أسهل بكثير في الوصف. هناك plugin postcss-easings الذي يحول خصائص ال transition من هذا الموقع.

.block {
	transition: transform 0.6s ;
}

يتم تحويل هذا الإعلان إلى الإعلان الموصوف أعلاه

للأسف ال easing function لا يمكن ضبطها PostCSS plugin. يمكن عملها ب @keyframes, شاهد أعلاه.

Gradient

من الممكن رسم gradient بإستخدام postcss-easing-gradients.

.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}

Math function

بالأسفل يمكنك رؤية كود تلك ال easing function مكتوب بلغة TypeScript. المتغير x يمثل تقدم الحركة في الحدود بين 0 (بداية الحركة) و 1 (نهاية الحركة).

function (x: number): number {

}

function (x: number): number {

}

Check easing for changes:

That function:

That function

Linear function:

Linear function