Ինչպե՞ս ստեղծել հատուկ cubic-bezier easing կոր CSS-ի համար։

Քաշեք կառավարման երկու կետերի բռնակները գրաֆիկի վրա, մուտքագրեք ճշգրիտ x1, y1, x2, y2 արժեքները կամ ընտրեք նախահատկերներից մեկը։ Այնուհետև «Արդյունքի ձևաչափ»-ում ընտրեք CSS և սեղմեք «Պատճենել»՝ transition-timing-function-ի համար cubic-bezier() արժեքը ստանալու համար։

Ինչպե՞ս ստեղծել ցատկի կամ գերազանցման էֆեկտ cubic-bezier-ով։

Քաշեք բռնակը վանդակից վերև կամ ներքև, որպեսզի դրա Y արժեքը դուրս գա 0-1 միջակայքից։ Y-ը կարող է գերազանցել այդ միջակայքը, մինչդեռ X-ը մնում է 0-ի և 1-ի միջև։ back-out և anticipate նախահատկերները պատրաստի overshoot մեկնարկային կետեր են։

Կարո՞ղ եմ easing-ը ստանալ Tailwind-ի, Framer Motion-ի կամ anime.js-ի համար։

Այո։ Արդյունքի ձևաչափի ներդիրներն են՝ CSS, Tailwind, Framer Motion և anime.js: Դրանք բոլորը ձևավորում են նույն չորս թվերը, այնպես որ ընտրեք ներդիրը և սեղմեք «Պատճենել»՝ հատվածը ձեր սեղմատախտակին տեղադրելու համար։

Ինչպե՞ս բեռնել առկա cubic-bezier արժեքը՝ այն խմբագրելու համար։

Տեղադրեք արժեք, ինչպիսին է cubic-bezier(.17, .67, .83, .67), ներմուծման դաշտում և սեղմեք «Բեռնել»: Եթե չորս թվերը հնարավոր չէ կարդալ, կստանաք սխալի հաղորդագրություն։ Կորը նաև պահվում է էջի URL-ում հեշից հետո, այնպես որ այն կարելի է տարածել։

Ինչու՞ է նախադիտումը ավելի դանդաղ զգացվում, քան իմ իրական անցումները։

«Շարժման նախադիտում»-ը օգտագործում է «Տևողություն» կարգավորում, որը կարող եք փոխել, և լռելյայն արժեքներն ավելի դանդաղ են, որպեսզի կարողանաք ուսումնասիրել կորը։ Կրճատեք «Տևողություն»-ը, ապա օգտագործեք «Replay»՝ շարժումը ձեր նախատեսած արագությամբ տեսնելու համար։

Իսկապե՞ս անվճար է։

Այո: Յուրաքանչյուր գործիք անվճար է, առանց հաշվի և բանկային քարտի: Աշխատանքը կատարվում է ձեր սարքում, այլ ոչ թե մեր սերվերներում, ինչն էլ այն դարձնում է անվճար:

Արդյո՞ք այն աշխատում է բջջայինով:

Այո։ Աշխատում է iOS-ի և Android-ի ժամանակակից բջջային դիտարկիչներում՝ առանց տեղադրման։

📈

CSS Cubic-Bezier Easing գեներատոր անվճար

Նախագծեք CSS easing կորեր՝ կառավարման կետերն քաշելով, կենդանի կերպով նախադիտեք շարժումն ու պատճենեք cubic-bezier() արժեքը: Ներառում է overshoot/bounce կանխադրածներ:

Գործում է ձեր բրաուզերումԱռանց գրանցման, առանց թռուցիկ պատուհաններիՄուտք չի պահանջվումԱնվճար ընդմիշտ

Աշխատում է անցանց՝ բեռնվելուց հետո

Քաշեք կապույտ-կանաչ և վարդագույն բռնակները՝ կորը ձևավորելու համար

Վերահսկման կետեր

x1y1x2y2

Շարժման նախադիտում

Տևողություն1,6 վ

Լայնության անցում

CSS արժեք

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

Նախաձևեր

Վարդագույն և կապույտ-կանաչ բռնակները կարող են ձգվել արկղից վեր կամ ներքև (Y 0-1-ից դուրս)՝ ստեղծելու 'overshoot' / թռչկոտ ազդեցություններ, ինչպիսիք են back-out-ը և anticipate-ը: X-ը մնում է 0-1-ի սահմաններում (ժամանակը հետ չի կարող գնալ):

Տարածված կիրառություններ

Custom CSS Transition EasingՆախագծեք բնական-զգացողական թեթևում hover effects, menus և UI transitions-ի համար:
Bounce և Overshoot AnimationsՍտեղծեք վճռական spring/bounce շարժում `pull control points-ը box-ից դուրս:
Easing @keyframes Animations-ի համարԸնտրեք ճիշտ animation-timing-function CSS keyframe animations-ի համար:
Easing Values JS Animation Libraries-ի համարՍտանալ cubic-bezier values GSAP, Framer Motion, anime.js և ևս շատ:
Հասկացեք Ինչպես աշխատում է Easing-ըՏեսեք կապը bezier curve-ի և այն շարժման միջև, որը այն արտադրում է:

Ինչպես է այն աշխատում

Խմբագիրը կառուցված է ամբողջովին դիտարկիչում՝ օգտագործելով React state և SVG — ոչ մի գրադարան չի մշակում կորի մաթեմատիկան։ Երկու քաշվող ղեկավարման կետեր սահմանում են SVG խորանարդ Bezier ուղի, և դիտարկիչի սեփական CSS անիմացիայի շարժիչը վարում է շարժման նախադիտումը՝ ստացված cubic-bezier() արժեքը ուղղակիորեն @keyframes կանոնի մեջ ներարկելով։

1
Քաշեք կամ մուտքագրեք ղեկավարման կետեր
Երկու բռնակ (P1-ը` ծովականաչ, P2-ը` վարդագույն) գտնվում են SVG կտավի վրա։ Քաշելն օգտագործում է Pointer Events API-ն setPointerCapture-ով, որպեսզի բռնակը հետևի ձեր մատին կամ ցուցիչին նույնիսկ SVG-ի սահմաններից դուրս։ Կարող եք նաև բռնակները տեղաշարժել սլաք ստեղներով կամ մուտքագրել ճշգրիտ արժեքներ x1/y1/x2/y2 թվային մուտքագրումներում։
2
SVG-ն գծում է կորը իրական ժամանակում
Կորը մեկ SVG <path> տարր է, որի C (խորանարդ Bezier) հրամանը վերահաշվարկվում է չորս ղեկավարման-կետի կոորդինատներից ամեն state թարմացման ժամանակ։ Ոչ մի canvas, ոչ մի արտաքին գրադարան — դիտարկիչի SVG մատուցիչն ուղղակիորեն գծում է ուղին։
3
Դիտարկիչի CSS շարժիչը նախադիտում է հարթեցումը
Երեք կենդանի անիմացիա (սահող կետ, լայնության անցում և մասշտաբ) գործարկում են CSS @keyframes cubic-bezier() արժեքով ներգծված։ Դիտարկիչի սեփական անիմացիայի շարժիչը մեկնաբանում է կորը, ուստի ինչ տեսնում եք, ճիշտ այն է, ինչ ձեր արտադրական CSS-ը կստեղծի։
4
Պատճենեք հատվածը ձեր շրջանակի շարահյուսությամբ
Ներդիրները ձևաչափում են նույն չորս թվերը որպես CSS transition-timing-function, Tailwind կամայական-արժեքով դաս, Framer Motion ease զանգված կամ anime.js հարթեցման տող։ Հատվածը գրվում է սեղմատախտակին navigator.clipboard-ով։ Կորը նաև ծածկագրվում է URL հեշում (#b=x1,y1,x2,y2), որպեսզի կարողանաք կիսվել կամ էջանշել այն։