פונקציית הריכוך (Easing Functions)

פונקציית הריכוך (Easing Functions) קובעת את מהירות תזוזה באנימצייה

דברים אמיתיים לא מתחילים לנוע באופן מיידי ובמהירות קבועה. כשפותחים מגירה, ראשית אנו מאיצים אותה ואז מאיטים. וכאשר הכדור נופל הוא מאיץ כל הזמן, ואחרי שפוגע ברצפה הוא קופץ מעט, עד שעוצר

האתר הזה יעזור לך למצוא את הפונקצייה שמתאימה לך

Open Source

Help translate site to your language

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

כל הפונקציות

CSS

ב- CSS, מאפייני המעבר וההנפשה מאפשרים לך לציין פונקציית הקלה.

.block {
	transition: transform 0.6s ;
}

לערוך ב cubic-bezier.com.

ב- CSS ניתן ליישם פונקציה זו עם @keyframes:

גודל

טעינה...

עמדה

טעינה...

שקיפות

טעינה...

PostCSS

ב- PostCSS להישתמש בפונקצייה פשוט יותר. יש פלגין postcss-easings, שלוקח מידע מהאתר הזה.

.block {
	transition: transform 0.6s ;
}

הצהרה זו מומרת לזו שתוארה לעיל.

למרבה הצער, לא ניתן להגדיר פונקציית החלקה זו באמצעות תוסף כלשהו PostCSS. ניתן לעשות זאת עם @keyframes.

מדרון צבעים

אפשר לצייר שיפוע עם postcss-easing-gradients.

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

פונקציית מתמטיקה

להלן מופיע הקוד לפונקציית המעבר שנכתב TypeScript. משתנה X זו התקדמות של האנימציה, איפה ש 0 זה תחילת אנימציה ו 1 – זה סופה

function (x: number): number {

}

function (x: number): number {

}

לבדוק את השינוי של האטה:

פונקציה נוככית:

פונקציה נוככית

פונקציה לינארית:

פונקציה לינארית