როგორ შევქმნა საკუთარი cubic-bezier მოხსნის (easing) მრუდი CSS-ისთვის?

გადაათრიეთ ორი საკონტროლო წერტილის სახელური გრაფიკზე, ჩაწერეთ ზუსტი x1, y1, x2, y2 მნიშვნელობები, ან აირჩიეთ პრესეტი. შემდეგ აირჩიეთ CSS „გამოსავალი ფორმატი“-ში და დააწკაპუნეთ „კოპირება“, რომ მიიღოთ cubic-bezier() მნიშვნელობა transition-timing-function-ისთვის.

როგორ გავაკეთო ხტუნვის ან გადაჭარბების ეფექტი 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-ის მიღმა) — ეს ქმნის გადაჭარბების ეფექტს, როგორიცაა back-out და anticipate. X რჩება 0-1 ფარგლებში (დრო ვერ უკუბრუნდება).

გავრცელებული გამოყენება

CSS saidgaris ganabregle masireშექმენით ბუნებრივი ეისინგი hover ეფექტების, მენიუებისა და UI გადასვლებისთვის.
gadugeba da overshoot animebiშექმენით თამაშისებური ზამბარისებრი/ხტუნვის მოძრაობა საკონტროლო წერტილების ყუთის გარეთ გაწევით.
ganabregle @keyframes animebisaTvisაირჩიეთ სწორი animation-timing-function CSS keyframe ანიმაციებისთვის.
ganabregle mniSvneloba JS animacia bibliotekebisaTvisმიიღეთ cubic-bezier მნიშვნელობები GSAP-ის, Framer Motion-ის, anime.js-ისა და სხვებისთვის.
gaige, rogor muSaobs ganabregleნახეთ კავშირი ბეზიეს მრუდსა და მისგან მიღებულ მოძრაობას შორის.

როგორ მუშაობს

რედაქტორი მთლიანად ბრაუზერშია აშენებული, React-ის მდგომარეობისა და SVG-ის გამოყენებით — მრუდის მათემატიკას ბიბლიოთეკა არ ატარებს. ორი გადასათრევი საკონტროლო წერტილი განსაზღვრავს SVG კუბურ ბეზიეს ბილიკს, და ბრაუზერის საკუთარი CSS ანიმაციის ძრავი ატარებს მოძრაობის გადახედვას, მიღებული cubic-bezier() მნიშვნელობის პირდაპირ @keyframes წესში ჩასმით.

1
გადაათრიეთ ან აკრიფეთ საკონტროლო წერტილები
ორი სახელური (P1 ცისფერში, P2 ვარდისფერში) დგას SVG კანვასზე. გადათრევა Pointer Events API-ს იყენებს setPointerCapture-ით, ასე რომ სახელური თვალყურს ადევნებს თქვენს თითს ან კურსორს, SVG-ის საზღვრებს გარეთაც კი. სახელურების მოძრაობა ისრის ღილაკებითაც შეგიძლიათ, ან ზუსტი მნიშვნელობების x1/y1/x2/y2 რიცხვით შეყვანებში აკრეფით.
2
SVG მრუდს რეალურ დროში ხატავს
მრუდი ერთი SVG <path> ელემენტია, რომლის C (კუბური ბეზიე) ბრძანება ხელახლა ითვლება ოთხივე საკონტროლო-წერტილის კოორდინატიდან, ყოველ მდგომარეობის განახლებაზე. Canvas-ის, გარე ბიბლიოთეკის გარეშე — ბრაუზერის SVG რენდერერი ბილიკს პირდაპირ ხატავს.
3
ბრაუზერის CSS ძრავი აჩვენებს გამარტივების გადახედვას
სამი ცოცხალი ანიმაცია (მოძრავი წერტილი, სიგანის გადასვლა და მასშტაბი) უშვებს CSS @keyframes-ს, ჩასმული cubic-bezier() მნიშვნელობით. ბრაუზერის საკუთარი ანიმაციის ძრავი განმარტავს მრუდს, ასე რომ ის, რასაც ხედავთ, ზუსტად ის არის, რასაც თქვენი პროდაქშენ CSS გამოსცემს.
4
დააკოპირეთ ფრაგმენტი თქვენი ფრეიმვორკის სინტაქსით
ჩანართები აფორმატებენ იმავე ოთხ რიცხვს, როგორც CSS transition-timing-function, Tailwind თვითნებური-მნიშვნელობის კლასს, Framer Motion ease მასივს ან anime.js გლუვი-სტრიქონს. ფრაგმენტი ეწერება ბუფერში navigator.clipboard-ის მეშვეობით. მრუდი ასევე იკოდირება URL hash-ში (#b=x1,y1,x2,y2), ასე რომ შეგიძლიათ გაუზიაროთ ან ჩანიშნოთ ის.