የCSS Cubic Bezier ጀነሬተር

የCSS timing functions እና የCubic Bezier መሰረታዊ ፅንሰ-ሀሳብ

በCSS transitions እና animations ውስጥ የጊዜ ተግባራት (timing functions) የአንድን እንቅስቃሴ ፍጥነት እና ሂደት ለመወሰን ያገለግላሉ። አኒሜሽኑ ከመጀመሪያው እስከ መጨረሻው ድረስ ባለው ጊዜ ውስጥ እንዴት እንደሚጓዝ የሚወስነው በዚህ ኩርባ ቅርጽ ነው። የcubic-bezier(x1, y1, x2, y2) ተግባር አራት የቁጥጥር ነጥቦችን በመጠቀም ብጁ የሆኑ የፍጥነት ለውጦችን (easing effects) ለመፍጠር ያስችላል።

ይህ የCSS Cubic Bezier ጀነሬተር የeasing ኩርባን በእይታ ለመቅረጽ እና ትክክለኛውን የCSS ኮድ በቀላሉ ለማግኘት የሚረዳ መሳሪያ ነው። ኩርባው የሚሳለው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።

የቁጥጥር ነጥቦች እና የኩርባው ህጎች

የቤዚየር ኩርባ በአራት ነጥቦች ይገለጻል። የመጀመሪያው ነጥብ (0, 0) እና የመጨረሻው ነጥብ (1, 1) ሁልጊዜም ቋሚ ናቸው። በመሳሪያው ላይ የሚስተካከሉት ሁለቱ እጀታዎች የመጀመሪያው የቁጥጥር ነጥብ (x1, y1) እና ሁለተኛው የቁጥጥር ነጥብ (x2, y2) ናቸው።

በመሳሪያው ውስጥ የሚከተሉት ህጎች እና ገደቦች ይተገበራሉ፦

• የአቅጣጫ ህግ፦ ኩርባው ከታች-ግራ (መጀመሪያ) ወደ ላይ-ቀኝ (መጨረሻ) ይሄዳል። ጊዜ ከግራ ወደ ቀኝ ሲሄድ እድገቱ ደግሞ ወደ ላይ ይሄዳል።
• የX እሴት ገደብ፦ የመጀመሪያው የቁጥጥር ነጥብ X እና ሁለተኛው የቁጥጥር ነጥብ X እሴቶች ሁልጊዜ በ0 እና 1 መካከል መሆን አለባቸው። ይህ የጊዜ ፍሰት ወደ ኋላ እንዳይመለስ ይከላከላል።
• የY እሴት ገደብ፦ የY እሴቶች ከ -0.70 እስከ 1.70 ባለው ክልል ውስጥ ሊስተካከሉ ይችላሉ። የY እሴት ከላይ ወይም ከታች ማለፉ አኒሜሽኑ ከመቆሙ በፊት እንዲያልፍ (overshoot) ወይም ወደኋላ እንዲስብ (pull-back) ለማድረግ ያስችላል።

የመሳሪያው ግብዓቶች እና አጠቃቀም

በመሳሪያው ላይ የሚከተሉትን ግብዓቶች በመጠቀም የኩርባውን ቅርጽ መቀየር ይችላሉ፦

1. ሁለቱን እጀታዎች መጎተት፦ የእርስዎ ኩርባ ቅርጽን ለመቀየር በግራፊኩ ላይ ያሉትን የቁጥጥር ነጥቦች መጎተት ይቻላል።
2. የቁጥጥር ነጥቦች እሴቶችን ማስገባት፦
   • የመጀመሪያው የቁጥጥር ነጥብ X (ከ0 እስከ 1)።
   • የመጀመሪያው የቁጥጥር ነጥብ Y (ከ -0.70 እስከ 1.70)።
   • ሁለተኛው የቁጥጥር ነጥብ X (ከ0 እስከ 1)።
   • ሁለተኛው የቁጥጥር ነጥብ Y (ከ -0.70 እስከ 1.70)።
3. ቅድመ-ማስተካከያዎች መምረጥ፦ እንደ "ease", "ease-in", "ease-out", "ease-in-out", "ወደ ኋላ መግቢያ", "ወደ ኋላ መውጫ", ወይም "ወደ ኋላ መግቢያ-መውጫ" ያሉ ዝግጁ አማራጮችን መምረጥ ይቻላል።

በቁልፍ ሰሌዳ ለመጠቀም የቁጥጥር ነጥብ እጀታ ላይ ፎከስ አድርገው የግራ ቀስት ቁልፍን ሲጫኑ እሴቱ ለምሳሌ ወደ 0.99 ይቀየራል። ባዶ ወይም ቁጥር ያልሆኑ ግብዓቶች ሲገቡ መሳሪያው የተሟላ እሴት እስኪገባ ድረስ ይጠብቃል። አንድን የቁጥር ግብዓት ሜዳ አጽድተው ትኩረት ሲያጡ (lose focus) የቀድሞው ትክክለኛ እሴት ይመለሳል። እንዲሁም ለ "የመጀመሪያው የቁጥጥር ነጥብ" እንደ 9 ያለ ከገደብ ውጪ የሆነ እሴት አስገብተው ትኩረት ሲያጡ እሴቱ በራስ-ሰር ወደ 1 ይስተካከላል።

የውጤት አቀራረብ እና ቅድመ-ዕይታ

የኩርባውን ቅርጽ ሲያስተካክሉ መሳሪያው የሚከተሉትን ውጤቶች ያሳያል፦

• የእርስዎ ኩርባ፦ የeasing ኩርባውን የእይታ ቅርጽ ያሳያል።
• የእንቅስቃሴ ማሳያ፦ አንድ ነጥብ በኩርባው ፍጥነት መሰረት ሲንቀሳቀስ፣ ሌላኛው ነጥብ ደግሞ በተመሳሳይ ጊዜ በቋሚ ፍጥነት (linear) ይንቀሳቀሳል። ይህ የፍጥነት ልዩነቱን በግልጽ ለማነጻጸር ይረዳል።
• የcubic-bezier() እሴት፦ ለCSS የሚሆን ትክክለኛ የcubic-bezier(x1, y1, x2, y2) እሴት ያመነጫል።
• የኮፒ ሁኔታ፦ እሴቱን በተሳካ ሁኔታ ሲቀዱ "Copied" የሚል ምልክት ይታያል።

የCubic Bezier የወሰን ገደቦች

ምንም እንኳን የcubic-bezier() ተግባር ለብዙ አይነት ብጁ አኒሜሽኖች ጠቃሚ ቢሆንም የራሱ የሆነ የወሰን ገደብ አለው። አንድ ነጠላ የcubic-bezier ኩርባ ወደ ኋላ መሳብ (anticipation) እና ማለፍ (overshoot) ማሳየት ቢችልም፣ በአንድ አቅጣጫ ተጉዞ መቆም ብቻ ነው የሚችለው። እንደ bounce (የኳስ መዝለል ውጤት) ወይም elastic (የላስቲክ መሳብ ውጤት) ያሉ አቅጣጫን በተደጋጋሚ የሚቀያይሩ ውስብስብ እንቅስቃሴዎችን በአንድ የcubic-bezier() ተግባር ብቻ መግለጽ አይቻልም።

ተደጋግሞ የሚነሱ ጥያቄዎች (FAQ)

ሁለቱ እጀታዎች እና አራቱ ቁጥሮች ምን ማለት ናቸው?

ኩርባው ከታች-ግራ (መጀመሪያ) ወደ ላይ-ቀኝ (መጨረሻ) ይሄዳል፤ ጊዜ ከግራ ወደ ቀኝ ሲሄድ እድገቱ ደግሞ ወደ ላይ ይሄዳል። ሁለቱ እጀታዎች ኩርባውን የሚያጥፉ የቁጥጥር ነጥቦች ናቸው — እያንዳንዳቸው 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() ተግባር ያስፈልጋል።

የ"ወደ ኋላ መውጫ" ቅድመ-ማስተካከያ እሴት ስንት ነው?

የ"ወደ ኋላ መውጫ" ቅድመ-ማስተካከያ ሲመረጥ የcubic-bezier() እሴቱን ወደ cubic-bezier(0.34, 1.56, 0.64, 1) ያዘጋጀዋል። ይህ እሴት አኒሜሽኑ ከመቆሙ በፊት ከተወሰነው ግብ በላይ አልፎ (overshoot) እንዲመለስ ያደርጋል።