የCSS Cubic Bezier ጀነሬተር
የeasing ኩርባን ለመቅረጽ ሁለቱን እጀታዎች ይጎትቱ፣ ነጥቡ ከቋሚው ጋር ሲወዳደር ይመልከቱ፣ እና የcubic-bezier() እሴቱን ይቅዱ።
cubic-bezier(0.25, 0.1, 0.25, 1)ኩርባው የሚሳለው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
በተደጋጋሚ የሚነሱ ጥያቄዎች
ሁለቱ እጀታዎች እና አራቱ ቁጥሮች ምን ማለት ናቸው?
ኩርባው ከታች-ግራ (መጀመሪያ) ወደ ላይ-ቀኝ (መጨረሻ) ይሄዳል፤ ጊዜ ከግራ ወደ ቀኝ ሲሄድ እድገቱ ደግሞ ወደ ላይ ይሄዳል። ሁለቱ እጀታዎች ኩርባውን የሚያጥፉ የቁጥጥር ነጥቦች ናቸው — እያንዳንዳቸው X እና Y አላቸው፣ ስለዚህ በአንድ ላይ cubic-bezier(x1, y1, x2, y2) ይሆናሉ። X በ0 እና 1 መካከል ሲቆይ፣ Y ግን እንቅስቃሴው ከመቆሙ በፊት እንዲያልፍ (overshoot) ወይም ወደኋላ እንዲስብ ለማድረግ ከላይ ወይም ከታች ሊያልፍ ይችላል።
እሴቱን በCSS ኮዴ ውስጥ እንዴት እጠቀማለሁ?
የcubic-bezier() እሴቱን ይቅዱ እና የጊዜ ተግባር (timing function) በሚገባበት በማንኛውም ቦታ ያስገቡት — transition-timing-function, animation-timing-function, ወይም በአጭሩ ለምሳሌ transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)። ease, ease-in, ease-out እና ease-in-out የሚሉት ቁልፍ ቃላት ቋሚ የcubic-bezier ኩርባዎች ናቸው፤ ስለዚህ ከእነዚህ ቅድመ-ማስተካከያዎች አንዱን ሲመርጡ ከጀርባ ያለውን ትክክለኛ እሴት ያሳየዎታል።
ይህ የbounce ወይም elastic ውጤት መፍጠር ይችላል?
በራሱ ብቻ አይችልም። አንድ ነጠላ cubic-bezier ቀድሞ መሳብ እና ማለፍ (overshoot) ይችላል — የ"back" ቅድመ-ማስተካከያዎች ይህንን ለማድረግ አንዱን እጀታ ከሳጥኑ በላይ ይጎትቱታል — ነገር ግን በአንድ አቅጣጫ ተጉዞ መቆም ብቻ ነው የሚችለው። Bounce እና elastic አቅጣጫን በተደጋጋሚ ይቀያይራሉ፣ ይህንን ደግሞ በአንድ cubic-bezier መግለጽ አይቻልም፤ ለእነሱ የCSS keyframes ወይም በርካታ ማቆሚያዎች ያሉት linear() ተግባር ያስፈልጋል።