CSS Cubic Bezier გენერატორის დანიშნულება და მუშაობის პრინციპი
ეს ინსტრუმენტი გაძლევთ საშუალებას ვიზუალურად შექმნათ CSS-ის აჩქარებისა და შენელების (easing) მრუდი ორი საკონტროლო წერტილის გადათრევით. მრუდის ფორმირებისას, მასზე მოძრაობს წერტილი, რომელიც თვალსაჩინოდ აჩვენებს ანიმაციის ეფექტს იმ მეორე წერტილის გვერდით, რომელიც თანაბარი, მუდმივი სიჩქარით გადაადგილდება. ამის შემდეგ, ხელსაწყო გთავაზობთ შესაბამის cubic-bezier() მნიშვნელობას, რომლის კოპირებაც შეგიძლიათ თქვენს CSS კოდში გამოსაყენებლად.
მრუდი იწყება ქვედა მარცხენა კუთხიდან (დასაწყისი) და მიემართება ზედა მარჯვენა კუთხისკენ (დასასრული). დრო მიედინება მარცხნიდან მარჯვნივ, ხოლო პროგრესი მიდის ქვემოდან ზემოთ.
ხელსაწყოს შემავალი პარამეტრები (Inputs)
მრუდის სასურველი ფორმის მისაღებად შეგიძლიათ გამოიყენოთ შემდეგი ინტერფეისის ელემენტები და პარამეტრები:
- ორი სახელურის გადათრევა: ეს სახელურები მართავენ აჩქარების მრუდის ფორმას.
- პირველი საკონტროლო წერტილი X: რიცხვითი მნიშვნელობა 0-დან 1-მდე.
- პირველი საკონტროლო წერტილი Y: რიცხვითი მნიშვნელობა -0.70-დან 1.70-მდე.
- მეორე საკონტროლო წერტილი X: რიცხვითი მნიშვნელობა 0-დან 1-მდე.
- მეორე საკონტროლო წერტილი Y: რიცხვითი მნიშვნელობა -0.70-დან 1.70-მდე.
- პრესეტების შერჩევა: შეგიძლიათ აირჩიოთ მზა ოფციებიდან ერთ-ერთი, როგორიცაა "ease", "ease-in", "ease-out", "ease-in-out", "Back In", "Back Out", ან "Back In-Out".
ხელსაწყოს გამომავალი მონაცემები (Outputs)
მუშაობის პროცესში გენერატორი აჩვენებს შემდეგ შედეგებს:
- თქვენი მრუდი: აჩქარების მრუდის ვიზუალური გამოსახულება.
- cubic-bezier(x1, y1, x2, y2): CSS
cubic-bezier()ფუნქციის მნიშვნელობა, რომელიც შეესაბამება თქვენ მიერ შექმნილ მრუდს. - Copied: სტატუსი, რომელიც ჩნდება
cubic-bezier()მნიშვნელობის წარმატებით კოპირების შემდეგ. კოპირების პროცესს აქვს მხოლოდ წარმატების სტატუსი და არ გააჩნია უარყოფის ან შეცდომის შეტყობინებები.
მუშაობის წესები და შეზღუდვები
ინსტრუმენტში მოქმედებს კონკრეტული წესები და მნიშვნელობების შეზღუდვები:
- საკონტროლო წერტილების X მნიშვნელობები მკაცრად უნდა დარჩეს 0-დან 1-მდე დიაპაზონში.
- საკონტროლო წერტილების Y მნიშვნელობები შეიძლება გასცდეს ზედა ზღვარს ან ჩამოვიდეს ქვედა ზღვარს ქვემოთ (დიაპაზონი -0.70-დან 1.70-მდე), რათა შეიქმნას გადაჭარბების (overshoot) ან უკან დახევის (pull-back) ეფექტები.
- თუ შეიყვანთ არასწორ მნიშვნელობას (მაგალითად,
9-ს ველში "პირველი საკონტროლო წერტილი X") და შემდეგ ფოკუსს მოაცილებთ ამ ველს, მნიშვნელობა ავტომატურად გახდება1. - თუ სრულად წაშლით რიცხვით მნიშვნელობას ველში და მოაცილებთ ფოკუსს, აღდგება წინა ვალიდური მნიშვნელობა.
- ცარიელი ან არარიცხვითი სიმბოლოების შეყვანისას, სისტემა დაელოდება სრულყოფილი მნიშვნელობის შეყვანას.
- კლავიატურის გამოყენებისას, თუ მონიშნავთ საკონტროლო წერტილის სახელურს და დააჭერთ მარცხენა ისრის ღილაკს, მისი მნიშვნელობა შეიცვლება (მაგალითად, გახდება
0.99). - "Back Out" პრესეტის არჩევისას,
cubic-bezier()მნიშვნელობა ავტომატურად განისაზღვრება როგორცcubic-bezier(0.34, 1.56, 0.64, 1). - ერთი
cubic-bezierფუნქციით შესაძლებელია მოძრაობის წინასწარ განსაზღვრა და გადაჭარბება, თუმცა მას შეუძლია მხოლოდ ერთი მიმართულებით იმოძრაოს და შემდეგ გაჩერდეს. შეუძლებელია ისეთი ეფექტების შექმნა, რომლებიც რამდენჯერმე ცვლიან მიმართულებას (მაგალითად, bounce ან ელასტიკური ეფექტები).
ვისთვის არის განკუთვნილი ეს ხელსაწყო
ეს გენერატორი სასარგებლოა მათთვის, ვისაც სურს:
- შექმნას ინდივიდუალური აჩქარების ეფექტები CSS ტრანზიციებისთვის (transitions) ან ანიმაციებისთვის (animations).
- გაიგოს ზუსტი
cubic-bezier()მნიშვნელობები, რომლებიც დგას სტანდარტული CSS დროის ფუნქციების საკვანძო სიტყვების უკან (როგორიცააease,ease-in,ease-outდაease-in-out). - განახორციელოს ისეთი ანიმაცია, რომელიც ითვალისწინებს მოძრაობის დაწყებამდე უკან დახევას ან საბოლოო მდგომარეობის გადაჭარბებას.
კონფიდენციალურობა და მონაცემთა დამუშავება
მრუდი იხატება პირდაპირ თქვენს ბრაუზერში. თქვენ მიერ მითითებული მონაცემები BroBroGo-ზე არ იტვირთება.
ხშირად დასმული კითხვები (FAQ)
რას ნიშნავს ორი სახელური და ოთხი რიცხვი?
მრუდი მიდის ქვედა მარცხენა კუთხიდან (დასაწყისი) ზედა მარჯვენა კუთხემდე (დასასრული), სადაც დრო მიედინება მარცხნიდან მარჯვნივ, ხოლო პროგრესი — ქვემოდან ზემოთ. ორი სახელური არის მართვის წერტილები, რომლებიც ღუნავს მას — თითოეულს აქვს X და Y კოორდინატი, ამიტომ ერთად ისინი ქმნიან cubic-bezier(x1, y1, x2, y2) მნიშვნელობას. X ყოველთვის რჩება 0-სა და 1-ს შორის, ხოლო Y შეიძლება გასცდეს ზედა ან ქვედა ზღვარს, რათა შექმნას გადაჭარბების ან უკან დახევის ეფექტი საბოლოო გაჩერებამდე.
როგორ გამოვიყენო მიღებული მნიშვნელობა ჩემს CSS-ში?
დააკოპირეთ cubic-bezier() და ჩასვით იქ, სადაც გამოიყენება ანიმაციის დროის ფუნქცია — transition-timing-function, animation-timing-function, ან შემოკლებულ ჩანაწერში, მაგ. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). საკვანძო სიტყვები ease, ease-in, ease-out და ease-in-out არის უბრალოდ ფიქსირებული cubic-bezier მრუდები, ამიტომ ამ პრესეტების არჩევისას დაინახავთ მათ უკან არსებულ ზუსტ მნიშვნელობებს.
შესაძლებელია თუ არა bounce ან ელასტიკური ეფექტის შექმნა?
მხოლოდ ერთი მრუდით — არა. ერთ cubic-bezier-ს შეუძლია მოძრაობის წინასწარ განსაზღვრა და გადაჭარბება (overshoot) — „back“ პრესეტები სწორედ ამისთვის სცილდება საზღვრებს — მაგრამ მას შეუძლია მხოლოდ ერთი მიმართულებით იმოძრაოს და შემდეგ გაჩერდეს. Bounce (ახტომა) და ელასტიკური ეფექტები რამდენჯერმე ცვლის მიმართულებას, რასაც ერთი cubic-bezier ვერ გამოხატავს; ამისთვის საჭიროა CSS keyframes ან linear() ფუნქცია მრავალი წერტილით.