CSS සඳහා custom cubic-bezier easing වක්රයක් සාදා ගන්නේ කෙසේද?

ප්රස්ථාරයේ ඇති පාලක ලක්ෂ්ය හැසිරවුම් (handles) දෙක අදින්න, නැතහොත් නිශ්චිත x1, y1, x2, y2 අගයන් ටයිප් කරන්න, නැතිනම් පූර්ව සිටුවම් එකක් තෝරන්න. ඉන්පසු ප්රතිදාන ආකෘතිය යටතේ CSS තෝරා transition-timing-function සඳහා cubic-bezier() අගය ලබා ගැනීමට පිටපත් කරන්න ක්ලික් කරන්න.

cubic-bezier භාවිතයෙන් bounce හෝ overshoot ප්රයෝගයක් සාදා ගන්නේ කෙසේද?

හැසිරවුමක් කොටුවෙන් ඉහළට හෝ පහළට අදින්න, එවිට එහි Y අගය 0-1 සීමාව ඉක්මවා යයි. X අගය 0 සහ 1 අතර පවතින අතරතුර Y අගයට එම පරාසය ඉක්මවිය හැක. Back-out සහ anticipate වැනි පූර්ව සිටුවම් overshoot සඳහා සූදානම් කළ ආරම්භක ලක්ෂ්ය වේ.

Tailwind, Framer Motion හෝ anime.js සඳහා easing ලබා ගත හැකිද?

ඔව්. ප්රතිදාන ආකෘති ටැබ් ලෙස CSS, Tailwind, Framer Motion සහ anime.js පවතී. ඒවා සියල්ලම එකම අංක හතර ආකෘතිගත කරයි, එබැවින් ටැබ් එකක් තෝරා ඔබේ clipboard එකට කේත කොටස පිටපත් කිරීමට පිටපත් කරන්න ක්ලික් කරන්න.

දැනට පවතින cubic-bezier අගයක් සංස්කරණය කිරීමට load කරන්නේ කෙසේද?

cubic-bezier(.17, .67, .83, .67) වැනි අගයක් ආයාත කොටුව තුළට paste කර පූරණය ක්ලික් කරන්න. අංක හතර කියවිය නොහැකි නම් දෝෂ පණිවිඩයක් ලැබේ. මෙම වක්රය බෙදා ගත හැකි වන පරිදි පිටුවේ URL එකෙහි hash එකට පසුවද සුරැකේ.

මගේ සැබෑ transitions වලට වඩා පෙරදසුන මන්දගාමී බවක් දැනෙන්නේ ඇයි?

චලන පෙරදසුන ඔබට වෙනස් කළ හැකි කාලසීමාව සැකසුමක් භාවිතා කරන අතර, වක්රය අධ්යයනය කිරීමට හැකි වන පරිදි පෙරනිමි වේගය මන්දගාමී කර ඇත. කාලසීමාව කෙටි කර, ඔබට සැබවින්ම අවශ්ය වේගයෙන් චලනය බැලීමට Replay භාවිතා කරන්න.

මෙය සැබැවින්ම නොමිලේද?

ඔව්. සෑම මෙවලමක්ම ගිණුමක් හෝ ක්රෙඩිට් කාඩ්පතක් නොමැතිව නොමිලේ භාවිත කළ හැක. ක්රියාවලිය අපගේ සේවාදායක වෙනුවට ඔබගේම උපාංගය මත ක්රියාත්මක වන අතර, මෙය නොමිලේ පවත්වාගෙන යාමට හැකි වන්නේ එබැවිනි.

ජංගම දුරකථනයේ ක්රියා කරයිද?

ඔව්. එය iOS සහ Android හි වත්මන් ජංගම බ්රවුසරවල ක්රියා කරයි, කිසිවක් ස්ථාපනය කිරීම අවශ්ය නැත.

📈

නොමිලේ CSS Cubic-Bezier Easing සකසන්නා

Control points ඇදීමෙන් CSS easing curves නිර්මාණය කරන්න, motion සජීවව preview කරන්න, සහ cubic-bezier() අගය copy paste කරන්න. Overshoot/bounce presets ඇතුළත් ය.

ඔබේ බ්‍රවුසරයේ ක්‍රියා කරයිලියාපදිංචි වීමක් නැත, පොප්-අප් නැතලොගිනය අවශ්‍ය නැතසදාකාලිකව නොමිලේ

load වූ පසු offline ක්‍රියා කරයි

වක්‍රය හැඩ ගන්වීමට teal සහ rose හැඩලාවේ ඇදගෙන යන්න

පාලක ලක්ෂ්‍ය

x1y1x2y2

චලන පෙරදසුන

කාලසීමාවත 1.6

පළල සංක්‍රාන්තිය

CSS අගය

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

පූර්ව සකසීම්

rose සහ teal හැඩලාවේ පෙට්ටියට ඉහළින් හෝ පහළින් අදිය හැක (Y 0-1 ඉක්මවා) — මෙය back-out සහ anticipate වැනි ඉක්මවා යාම / ටිකා ගැසීම ප්‍රයෝග නිර්මාණය කරයි. X 0-1 ඇතුළත ම රැඳේ (කාලය ආපස්සට ළඟා විය නොහැක).

පොදු භාවිත

අභිරුචි CSS Transition Easingමතු දුටුවට, මෙනු සහ UI සම්මතයිනිට සඳහා ස්වාභාවික-වෙසක සඡුවතා සකසන්න.
උස සහ කඩවටින කදමඔස්සේ පටිබිම්බ ඇතිරුවලු නඩු බිම් එක ඉවතින්න තුළ ක්‍රීඩාපූර්ණ පිපිරුම/ උස සිතුවිමි.
@keyframes කදමවලට සඡුවතාCSS keyframe කදම් සඳහා නිවැරදි සිතුවිම්-සිතුවිම්-කර්යභාරය තෝරා ගන්න.
JS සිතුවිම් පුස්තකාලයට සඡුවතා අගයින්GSAP, Framer Motion, anime.js සහ තවත් cubic-bezier අගයින් ලබා ගන්න.
සඡුවතා ක්‍රියා කරන්නේ කෙසේද යන්න තේරුම් ගන්නBezier වක්‍රය සහ එය ඉතිරිකරන සිතුවිම් අතර සම්බන්ධතාවය බලන්න.

එය ක්‍රියා කරන්නේ කෙසේද

editor එක React state සහ SVG භාවිතයෙන් සම්පූර්ණයෙන්ම බ්‍රවුසරයේ ගොඩනගා ඇත — curve ගණිතය පුස්තකාලයක් හසුරුවන්නේ නැත. drag කළ හැකි control points දෙකක් SVG cubic Bezier path එකක් අර්ථ දක්වයි, බ්‍රවුසරයේම CSS animation එන්ජිම ලැබෙන cubic-bezier() අගය කෙලින්ම @keyframes rule එකකට යොදා motion preview එක ධාවනය කරයි.

1
Control points drag කරන්න හෝ ටයිප් කරන්න
handles දෙකක් (ටීල් වර්ණයෙන් P1, රෝස වර්ණයෙන් P2) SVG canvas එකක සිටී. Dragging setPointerCapture සහිත Pointer Events API භාවිතා කරන නිසා handle එක SVG සීමාවෙන් පිටතද ඔබේ ඇඟිල්ල හෝ cursor එක follow කරයි. arrow keys වලින්ද handles nudge කළ හැක හෝ x1/y1/x2/y2 number inputs වලට නිශ්චිත අගයන් ටයිප් කළ හැක.
2
SVG curve එක තථ්‍ය කාලීනව අඳියි
curve එක තනි SVG <path> element එකකි, එහි C (cubic Bezier) command එක සෑම state යාවත්කාලීන කිරීමකදීම control-point coordinates හතරෙන් නැවත ගණනය කෙරේ. canvas එකක්, බාහිර පුස්තකාලයක් නැත — බ්‍රවුසරයේ SVG renderer එක path එක කෙලින්ම අඳියි.
3
Browser CSS එන්ජිම easing එක පෙරදසුන් කරයි
සජීවී animations තුනක් (ලිස්සන ලක්ෂ්‍යයක්, පළල transition එකක්, සහ scale එකක්) inline injected cubic-bezier() අගය සමඟ CSS @keyframes ධාවනය කරයි. බ්‍රවුසරයේම animation එන්ජිම curve එක interpret කරයි, එබැවින් ඔබ දකින දේ ඔබේ production CSS හරියටම නිපදවන දෙයයි.
4
ඔබේ framework එකේ syntax එකෙන් snippet එක පිටපත් කරන්න
Tabs එකම අංක හතර CSS transition-timing-function, Tailwind arbitrary-value class, Framer Motion ease array, හෝ anime.js easing string ලෙස format කරයි. snippet එක navigator.clipboard සමඟ clipboard වෙත ලියනු ලැබේ. curve එකද URL hash එකේ (#b=x1,y1,x2,y2) encode කෙරෙන නිසා ඔබට එය බෙදාගැනීමට හෝ bookmark කිරීමට හැක.