0

बाउंस-शैली सीएसएस ईज़िंग कर्व

दो नियंत्रण बिंदुओं को खींचकर एक कस्टम सीएसएस क्यूबिक-बेज़ियर () टाइमिंग फ़ंक्शन डिज़ाइन करें, इसे एक रैखिक संदर्भ के विरुद्ध लाइव पूर्वावलोकन करें, फिर तैयार मान की प्रतिलिपि बनाएँ।

वक्र को नया आकार देने के लिए नारंगी हैंडल (P1) और लाल हैंडल (P2) को खींचें - तीर कुंजियाँ भी काम करती हैं। CSS की आवश्यकता के अनुसार X 0 और 1 के बीच में रहता है; ओवरशूट और बाउंस प्रभावों के लिए वाई को उस सीमा से आगे भेजने के लिए बॉक्स के ऊपर या नीचे एक हैंडल खींचें।

आपका वक्र

रैखिक (तुलना के लिए)

प्रसंस्करण... 0%

नतीजा

यह पृष्ठ जेनरेटर को x1=0.68, y1=-0.55, x2=0.265, y2=1.55 के साथ खोलता है जो पहले से ही लोड है - एक ओवरशूट वक्र कुछ ईजिंग लाइब्रेरीज़ लेबल easyOutBack। नकारात्मक y1 और 1 से ऊपर y2 बिल्कुल यही कारण है कि नीचे दिया गया एनीमेशन पूर्वावलोकन अपनी शुरुआत से पहले और व्यवस्थित होने से पहले अपने अंत से पीछे खींचता है; प्रभाव को मजबूत या सौम्य बनाने के लिए या तो हैंडल को खींचें या संख्याओं को संपादित करें।

यह क्या है इसके बारे में ईमानदार रहें: एक क्यूबिक-बेज़ियर() वक्र में केवल दो नियंत्रण बिंदु होते हैं, इसलिए यह एक ओवरशूट-एंड-सेटल गति का अनुमान लगा सकता है, न कि कई घटते हॉप्स के साथ वास्तविक मल्टी-बाउंस भौतिक उछाल। शाब्दिक बॉल-बाउंस प्रभाव के लिए आपको एक साथ श्रृंखलाबद्ध कई कीफ़्रेम या चरण() खंडों की आवश्यकता होगी - यह वक्र एक पंक्ति में एक सादे संक्रमण-समय-फ़ंक्शन के सबसे करीब हो सकता है।

वह सिंगल ओवरशूट अभी भी वही है जो सबसे अधिक उछालभरी यूआई चाहता है: एक बटन जो अपने आराम आकार से थोड़ा आगे निकल जाता है, एक मोडल जो व्यवस्थित होने से पहले ओवरशूट हो जाता है, एक कार्ड जो जगह में स्प्रिंग हो जाता है। उस त्वरित अनुभव के लिए मान को वैसे ही कॉपी करें, या ओवरशूट को वापस डायल करने के लिए y1 को 0 की ओर और y2 को 1 की ओर नरम करें।