CSS Cubic-Bezier გენერატორი

რა არის ეს ხელსაწყო?

cubic-bezier() არის CSS-ის დროის ფუნქცია, რომელიც აკონტროლებს, თუ როგორ აჩქარდება და ანელებს ანიმირებული ან გარდამავალი მნიშვნელობა დროთა განმავლობაში, ერთგვაროვნად მოძრაობის ნაცვლად. ის განისაზღვრება ორი საკონტროლო წერტილით — (x1, y1) და (x2, y2) — რომლებიც ღუნავენ მრუდს ფიქსირებულ საწყის წერტილს (0,0) და ბოლო წერტილს (1,1) შორის. x-ის მნიშვნელობები უნდა დარჩეს 0-სა და 1-ს შორის, მაგრამ y-ის მნიშვნელობებს შეუძლიათ გასცდნენ ამ დიაპაზონს, რათა შექმნან გადაჭარბების ან ხტუნვის ეფექტები.

ხელით დაწერისას, ოთხი ათწილადი რიცხვის დარეგულირება ისეთი შეგრძნების მისაღწევად, რომელიც არც ზედმეტად მკვეთრია და არც ზედმეტად რბილი, დიდ ცდა-შეცდომას მოითხოვს. ეს ინსტრუმენტი ცვლის ამ გამოცნობას პირდაპირი მანიპულაციით: გადაათრიეთ სლაიდერი, დააკვირდით, როგორ იღუნება მრუდი და როგორ მოძრაობს გადახედვის ბურთულა შესაბამისად, და დააკოპირეთ კოდი, როცა მოძრაობა სწორად იგრძნობა.

წყარო: CSS Easing Functions Level 1, W3C — სპეციფიკაცია, რომელიც განსაზღვრავს cubic-bezier()-ს და ხუთ დასახელებულ საკვანძო სიტყვას, რომელთა საფუძველზეც არის აგებული ამ ინსტრუმენტის მზა პარამეტრები.

რატომ გამოვიყენო ის?

• ცოცხალი SVG გრაფიკი ზუსტად აჩვენებს, როგორ იღუნება თქვენი მრუდი ფიქსირებულ საწყის და ბოლო წერტილებს შორის, სადაც სიცხადისთვის დახატულია ორივე საკონტროლო წერტილი და მათი სახელურები.
• დაკვრის ღილაკი ანიმირებს გადახედვის ელემენტს ბილიკზე თქვენი ზუსტი მრუდის გამოყენებით, რათა იგრძნოთ მოძრაობა და არა უბრალოდ ნახოთ სტატიკური გრაფიკი.
• ერთი დაწკაპუნებით მზა პარამეტრები ხუთი სტანდარტული, დასახელებული გამრუდების ფუნქციისთვის — ease, ease-in, ease-out, ease-in-out და linear — როგორც დოკუმენტირებულია CSS Easing Functions სპეციფიკაციაში.
• Y-მნიშვნელობებს შეუძლიათ ჩავიდნენ 0-ზე დაბლა ან ავიდნენ 1-ზე მაღლა, რაც საშუალებას გაძლევთ შექმნათ გადაჭარბება/ხტუნვის სტილის გამრუდებები, რომელთა შექმნაც დასახელებულ საკვანძო სიტყვებს არ შეუძლიათ.
• გამოსცემს ჩასასმელად მზა transition-timing-function CSS-ს — იგივე მნიშვნელობა მუშაობს animation-timing-function-ისთვისაც.
• მთლიანად თქვენს ბრაუზერში მუშაობს — არაფერი, რასაც აკონფიგურირებთ, არსად აიტვირთება. უფასოა, რეგისტრაციის გარეშე.

როგორ გამოვიყენო

1. გადაათრიეთ x1/y1 სლაიდერები პირველი საკონტროლო წერტილის დასაყენებლად, რომელიც განსაზღვრავს ანიმაციის დაწყების ფორმას.
2. გადაათრიეთ x2/y2 სლაიდერები მეორე საკონტროლო წერტილის დასაყენებლად, რომელიც განსაზღვრავს ანიმაციის დასრულების ფორმას.
3. დააკვირდით შავ მრუდს გრაფიკზე — მრუდი, რომელიც ადრეულ ეტაპზე დიაგონალის ზემოთ იბერება, ნიშნავს, რომ მოძრაობა სწრაფად იწყება, ხოლო ის, რაც მის ქვემოთ რჩება, ნიშნავს, რომ მოძრაობა ნელა იწყება.
4. დააჭირეთ დაკვრას, რომ ნახოთ, როგორ მოძრაობს გადახედვის ელემენტი ბილიკზე თქვენი მრუდის, როგორც transition-timing-function-ის, გამოყენებით.
5. სცადეთ მზა პარამეტრი (ease, ease-in, ease-out, ease-in-out, linear) საწყის წერტილად, შემდეგ იქიდან დაარეგულირეთ სლაიდერები.
6. დააკოპირეთ გენერირებული CSS კოდი და ჩასვით transition ან animation წესში.

მაგალითი

შეყვანა

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

შედეგი

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

ეს არის სტანდარტული CSS-ის ease საკვანძო სიტყვა, ჩაწერილი როგორც ცხადი საკონტროლო წერტილები — სწრაფი დაწყება, მკვეთრი აჩქარება, შემდეგ თანდათანობითი შენელება ბოლოსკენ.

რატომ შეუძლია y-მნიშვნელობებს გადააჭარბონ 0–1-ს

განსხვავებით x-ღერძისგან, რომელიც წარმოადგენს დროს და უნდა მიდიოდეს 0-დან 1-მდე, y-ღერძი წარმოადგენს ანიმირებული მნიშვნელობის პროგრესს და მსგავსი შეზღუდვა არ გააჩნია. y1-ის 0-ზე დაბლა ან y2-ის 1-ზე მაღლა დაყენება იწვევს იმას, რომ მრუდი ჩავარდება საწყისი მნიშვნელობის ქვემოთ ან გადავა ბოლო მნიშვნელობაზე დასტაბილურებამდე — ეს არის გადაჭარბებისა და მოლოდინის ეფექტების საფუძველი, რომლებიც გამოიყენება ღილაკზე დაჭერისას, მოდალური ფანჯრების გამოჩენისას და თამაშისებრ UI მიკროურთიერთქმედებებში. არცერთ ხუთ დასახელებულ საკვანძო სიტყვას (ease, ease-in, ease-out, ease-in-out, linear) არ შეუძლია ამის გამომუშავება; ამისთვის საჭიროა მორგებული cubic-bezier().

transition-timing-function vs. animation-timing-function

cubic-bezier() მნიშვნელობა, რომელსაც ეს ინსტრუმენტი აგენერირებს, ორივე თვისებაში იდენტურად მუშაობს. გამოიყენეთ transition-timing-function, როცა მოძრაობა გამოწვეულია მდგომარეობის ცვლილებით (მაგალითად, hover ან კლასის გადართვა), ხოლო animation-timing-function — @keyframes-ზე დაფუძნებული ანიმაციის წესის შიგნით, როცა გჭირდებათ იგივე გამრუდების შეგრძნება ავტომატურად ან ციკლში გამოყენებული.

გამრუდების გავრცელებული ნიმუშები

• სწრაფი UI უკუკავშირი (ღილაკები, გადამრთველები): შეინარჩუნეთ საკონტროლო წერტილები დიაგონალთან ახლოს, მცირე ease-out მიდრეკილებით, მაგ. cubic-bezier(0.4, 0, 0.2, 1).
• Material Design-ის სტანდარტული მრუდი: cubic-bezier(0.4, 0, 0.2, 1) — სწრაფი დაწყება, რბილი დასრულება, ფართოდ გამოიყენება პანელებისა და ბარათების გადასვლებისთვის.
• ხტუნვა/გადაჭარბება: აწიეთ y2 1-ზე მაღლა, მაგ. cubic-bezier(0.34, 1.56, 0.64, 1), თამაშისებრი გამოჩენის შეგრძნებისთვის.
• მოლოდინი მოძრაობამდე: დასწიეთ y1 0-ზე დაბლა, რათა ელემენტმა ოდნავ უკან დაიწიოს წინსვლამდე.
• გლუვი ease-in-out ციკლური ანიმაციებისთვის: შეინარჩუნეთ მრუდი ცენტრის მიმართ თითქმის სიმეტრიული.

სხვა CSS ინსტრუმენტებთან შეხამება

გამრუდების მრუდი იშვიათად დგას მარტო — ჩვეულებრივ ის ეხმარება ელემენტს, რომელსაც ასევე სჭირდება ჩრდილები, მომრგვალებული კუთხეები ან გრადიენტები. შექმენით ვიზუალური სტილი ქვემოთ მოცემული სხვა CSS ინსტრუმენტებით, შემდეგ დაამატეთ ამ ინსტრუმენტის დროის ფუნქცია იმავე წესს ან transition/animation დეკლარაციას.

→ Box Shadow Generator · Border Radius Generator

ხშირად დასმული კითხვები