Easing Functions አጋዥ

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

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

ይህ ገጽ ትክክለኛውን 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

ሁሉም easings

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 {

}

function (x: number): number {

}

የeasing ለውጦች ይመልከቱ:

This function:

This function

Linear function:

Linear function