Easing Functions አጋዥ

Easing functions በጊዜ ሂደት የአንድ parameter የለውጥ መጠንን ይገልጻሉ።

እውነተኛ ነገሮች በቅጽበት ጀምረው በቅጽበት የሚይቆሙ አይደሉም፣ እናም በቋሚ ፍጥነት በጭራሽ አይንቀሳቀሱም። የልብስ መሳቢያን ስንከፍት መጀመሪያ በፍጥነት እናንቀሳቅሰዋለን፣ በመውጣት ላይ አያለ ግን ፍጥነቱን አንቀንሰዋለን። አንድ ነገር ወደ መሬት ስንጥል በመጀመሪያ ወደታች በፍጥነት ይወርዳል፣ ወለሉን ከነካ በኋላ ግን ነጥሮ ይመለሳል።

ይህ ገጽ ትክክለኛውን easing function መምረጥ ያግዝዎታል።

Open Source
ይህን ድህረ ገጽ ወደ ቋንቋዎት መተርጎም ያግዙን
xt
easeInSine
xt
easeOutSine
xt
easeInOutSine
xt
easeInQuad
xt
easeOutQuad
xt
easeInOutQuad
xt
easeInCubic
xt
easeOutCubic
xt
easeInOutCubic
xt
easeInQuart
xt
easeOutQuart
xt
easeInOutQuart
xt
easeInQuint
xt
easeOutQuint
xt
easeInOutQuint
xt
easeInExpo
xt
easeOutExpo
xt
easeInOutExpo
xt
easeInCirc
xt
easeOutCirc
xt
easeInOutCirc
xt
easeInBack
xt
easeOutBack
xt
easeInOutBack
xt
easeInElastic
xt
easeOutElastic
xt
easeInOutElastic
xt
easeInBounce
xt
easeOutBounce
xt
easeInOutBounce

x
t
CSS
CSS ላይ transition እና animation የሚባሉት ንብረቶች easing function ለመግለጽ ያግዛሉ።
.block {
	transition: transform 0.6s ;
}
cubic-bezier.com ላይ ያስተካክሉ።
ይህ ተግባር CSS ላይ በ@keyframes መከናወን ይችላል።:
መጠን
በመጫን ላይ...
ቦታ
በመጫን ላይ...
ግልፅነት
በመጫን ላይ...
PostCSS
በPostCSS የeasing function ተግባርን መግለፅ በጣም ቀላል ነው። የtransition መረጃ ከcubic-bezier.com የሚወስድ ^postcss-easings^ የሚባል plugin አለ።
.block {
	transition: transform 0.6s ;
}
ይህ መግለጫ ከላይ ወደተገለጸው ተቀይሯል።
እንደ አለመታደል ሆኖ easing function በማንኛውም የPostCSS plugin ማዘጋጀት አይቻልም። በ@keyframes ሊከናወን ይችላል፣ ከላይ ይመልከቱ።
ግሬዲየንት
postcss-easing-gradients በመጠቀም ግሬዲየንት መሳል ይቻላል።
.block {
	background: linear-gradient(
		to bottom,
		#1473e6,
		,
		#247b5e
	);
}
Math function
ከዚህ በታች ይህ easing function በTypeScript ተጽፎ ያገኛሉ። x የአኒሜሽኑን absolute progress(ግስጋሴ) በ0 (የአኒሜሽኑ መጀመሪያ) እና በ1 (የአኒሜሽኑ መጨረሻ) ይወክላል።
function (x: number): number {
}
ከዚህ በታች ይህ easing function በTypeScript ተጽፎ ያገኛሉ። x የአኒሜሽኑን absolute progress(ግስጋሴ) በ0 (የአኒሜሽኑ መጀመሪያ) እና በ1 (የአኒሜሽኑ መጨረሻ) ይወክላል።
function (x: number): number {
}
የeasing ለውጦች ይመልከቱ:
This function:
This function
Linear function:
Linear function