CSS கியூபிக் பெஜியர் ஜெனரேட்டர்

கனசதுர பெஜியர் ஆவணப்படுத்தல்

கனசதுர பெஜியர் வளைவு என்றால் என்ன?

A cubic Bezier curve is defined by four points: P0, P1, P2, and P3. In CSS transitions, P0 and P3 are fixed at (0, 0) and (1, 1) respectively, representing the start and end of the transition. The curve is determined by the coordinates of the two control points, P1 and P2.

CSS தொடரியல்

transition-timing-function: cubic-bezier(x1, y1, x2, y2);

பொதுவான பயன்பாட்டு வழக்குகள்

அனிமேஷன் மாற்றங்கள்:கூறுகளை மாற்றும் பண்புகளுக்கு மென்மையான அனிமேஷன்களை உருவாக்கவும்.
உருள் விளைவுகள்:உருள் அனிமேஷன்களின் வேகத்தைக் கட்டுப்படுத்தவும்.
ஊடாடும் கூறுகள்:வட்டமிடுதல் அல்லது கிளிக் செய்தல் போன்ற பயனர் தொடர்புகளுக்கு கூறுகள் எவ்வாறு பதிலளிக்கின்றன என்பதை வரையறுக்கவும்.
மோஷன் டிசைன்:UI கூறுகளுக்கான சிக்கலான இயக்க வரிசைகளை உருவாக்கவும்.

பிரபலமான தளர்த்தல் செயல்பாடுகள்

Ease (default)

மெதுவாகத் தொடங்கி, விரைவாக வேகமெடுத்து, மீண்டும் வேகத்தைக் குறைக்கும்.

cubic-bezier(0.25, 0.1, 0.25, 1)

Linear

தொடக்கம் முதல் இறுதி வரை நிலையான வேகம்.

cubic-bezier(0, 0, 1, 1)

Ease-in

மெதுவாகத் தொடங்குகிறது, பின்னர் வேகமெடுக்கிறது.

cubic-bezier(0.42, 0, 1, 1)

Ease-out

வேகமாகத் தொடங்குகிறது, பின்னர் வேகத்தைக் குறைக்கிறது.

cubic-bezier(0, 0, 0.58, 1)

தனிப்பயன் வளைவுகளை உருவாக்குவதற்கான உதவிக்குறிப்புகள்

x மதிப்புகளை 0 மற்றும் 1 க்குள் வைத்திருங்கள்:இந்த வரம்பிற்கு வெளியே உள்ள மதிப்புகள் எதிர்பாராத நடத்தையை ஏற்படுத்தலாம்.
வளைவைக் காட்சிப்படுத்துங்கள்:மாற்றங்கள் அனிமேஷனை எவ்வாறு பாதிக்கின்றன என்பதைப் புரிந்துகொள்ள ஊடாடும் வரைபடத்தைப் பயன்படுத்தவும்.
உண்மையான கூறுகளுடன் சோதனை:உங்கள் வளைவை எப்போதும் உண்மையான UI கூறுகளுடன் முன்னோட்டமிடுங்கள், அது சரியாக இருப்பதை உறுதிசெய்யவும்.
முன்னமைவுகளைச் சேமிக்கவும்:எதிர்கால திட்டங்களுக்கு பயனுள்ள வளைவுகளை புக்மார்க் செய்யவும்.