CSS Cubic Bezier-ի գեներատոր
Քաշե՛ք երկու բռնակները՝ անիմացիայի կորը ձևավորելու համար, հետևե՛ք շարժմանը և պատճենե՛ք cubic-bezier() արժեքը:
cubic-bezier(0.25, 0.1, 0.25, 1)Կորը գծվում է անմիջապես Ձեր բրաուզերում: Ձեր սահմանած տվյալներից ոչինչ չի վերբեռնվում BroBroGo:
ՀՏՀ
Ի՞նչ են նշանակում երկու բռնակները և չորս թվերը:
Կորն անցնում է ներքևի ձախից (սկիզբ) դեպի վերևի աջ (ավարտ), որտեղ ժամանակը գնում է ձախից աջ, իսկ առաջընթացը՝ ներքևից վերև: Երկու բռնակները կառավարման կետերն են, որոնք ծռում են այն. յուրաքանչյուրն ունի 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) կամ առաձգական (elastic) էֆեկտները մի քանի անգամ փոխում են ուղղությունը, ինչը մեկ cubic-bezier-ով հնարավոր չէ արտահայտել. դրանց համար անհրաժեշտ են CSS keyframes կամ linear() ֆունկցիան բազմաթիվ կետերով: