📈

મફત CSS Cubic-Bezier ઇઝિંગ જનરેટર

કંટ્રોલ પોઇન્ટ્સ ખેંચીને CSS ઇઝિંગ કર્વ્સ ડિઝાઇન કરો, મોશન લાઇવ પ્રિવ્યુ કરો, અને cubic-bezier() વેલ્યુ કોપી કરો. ઓવરશૂટ/બાઉન્સ પ્રીસેટ સામેલ છે.

તમારા બ્રાઉઝરમાં ચાલે છેકોઈ સાઇન-અપ નહીં, કોઈ પોપ-અપ નહીંલૉગિન જરૂરી નથીહંમેશ માટે મફત

એક વાર લોડ થયા પછી ઑફલાઇન કામ કરે છે

કર્વ આકાર આપવા માટે ટીલ અને ગુલાબી હેન્ડલ્સ ખેંચો

કંટ્રોલ પોઈન્ટ

x1y1x2y2

મોશન પ્રિવ્યૂ

સમયગાળો1.6s

પહોળાઈ ટ્રાન્ઝિશન

CSS મૂલ્ય

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

પ્રીસેટ્સ

back-out અને anticipate જેવા 'ઓવરશૂટ' / બાઉન્સ ઇફેક્ટ બનાવવા માટે ગુલાબી અને ટીલ હેન્ડલ્સ બોક્સની ઉપર અથવા નીચે (Y 0-1 ની બહાર) ખેંચી શકાય છે. X 0-1 ની અંદર જ રહે છે (સમય પાછળ જઈ શકતો નથી).

આ કેવી રીતે કાર્ય કરે છે

એડિટર સંપૂર્ણપણે React state અને SVG નો ઉપયોગ કરીને બ્રાઉઝરમાં જ બનેલો છે — કોઈ લાઇબ્રેરી curve ગણિત હેન્ડલ કરતી નથી. બે ડ્રેગ કરી શકાય તેવા કંટ્રોલ પોઈન્ટ SVG cubic Bezier path વ્યાખ્યાયિત કરે છે, અને બ્રાઉઝરનું પોતાનું CSS એનિમેશન એન્જિન પરિણામી cubic-bezier() મૂલ્યને સીધું @keyframes rule માં ઇન્જેક્ટ કરીને મોશન પ્રિવ્યૂ ચલાવે છે.

1
કંટ્રોલ પોઈન્ટ ડ્રેગ કરો કે ટાઈપ કરો
બે હેન્ડલ્સ (ટીલમાં P1, રોઝમાં P2) SVG કેનવાસ પર છે. ડ્રેગિંગ setPointerCapture સાથે Pointer Events API નો ઉપયોગ કરે છે જેથી હેન્ડલ SVG ની સીમાની બહાર પણ તમારી આંગળી કે કર્સરને ટ્રેક કરે. તમે એરો કીઝ વડે હેન્ડલ્સને પણ ખસેડી શકો છો કે x1/y1/x2/y2 નંબર ઇનપુટમાં ચોક્કસ મૂલ્યો ટાઈપ કરી શકો છો.
2
SVG રિયલ ટાઇમમાં કર્વ દોરે છે
કર્વ એક જ SVG <path> એલિમેન્ટ છે જેનો C (cubic Bezier) કમાન્ડ દરેક state update પર ચાર કંટ્રોલ-પોઈન્ટ કોઓર્ડિનેટ્સમાંથી ફરીથી ગણવામાં આવે છે. કોઈ કેનવાસ નહીં, કોઈ બાહ્ય લાઇબ્રેરી નહીં — બ્રાઉઝરનું SVG રેન્ડરર સીધું path દોરે છે.
3
બ્રાઉઝર CSS એન્જિન ઈઝિંગ પ્રિવ્યૂ કરે છે
ત્રણ લાઇવ એનિમેશન (સ્લાઇડિંગ ડોટ, પહોળાઈ ટ્રાન્ઝિશન, અને સ્કેલ) CSS @keyframes ને ઇનલાઇન ઇન્જેક્ટ કરેલા cubic-bezier() મૂલ્ય સાથે ચલાવે છે. બ્રાઉઝરનું પોતાનું એનિમેશન એન્જિન curve ને ઈન્ટરપ્રેટ કરે છે, તેથી તમે જે જુઓ છો તે બરાબર તમારો પ્રોડક્શન CSS બનાવશે.
4
તમારા ફ્રેમવર્કના સિન્ટેક્સમાં સ્નિપેટ કૉપી કરો
ટૅબ્સ સમાન ચાર નંબરોને CSS transition-timing-function, Tailwind arbitrary-value ક્લાસ, Framer Motion ease array, કે anime.js easing string તરીકે ફોર્મેટ કરે છે. સ્નિપેટ navigator.clipboard વડે ક્લિપબોર્ડમાં લખાય છે. Curve ને URL hash (#b=x1,y1,x2,y2) માં પણ એન્કોડ કરવામાં આવે છે જેથી તમે તેને શેર કે બુકમાર્ક કરી શકો.