क्यूबिक बेज़ियर जेनरेटर

क्यूबिक-बेज़ियर (X1, y1, x2, y2) को हाथ से टाइप करना और फील की जांच करने के लिए पेज को फिर से लोड करना एनीमेशन को ट्यून करने का एक धीमा तरीका है। यह जनरेटर उस लूप को बंद कर देता है: या तो नियंत्रण-बिंदु हैंडल को वक्र पर खींचें, या सटीक संख्याओं को x1/y1/x2/y2 फ़ील्ड में टाइप करें, और वक्र, कॉपी करने योग्य सीएसएस स्ट्रिंग और लाइव एनीमेशन पूर्वावलोकन प्रत्येक परिवर्तन पर सभी अपडेट करें - कोई बिल्ड चरण नहीं, कोई पुनः लोड नहीं।

दोनों अक्ष उद्देश्य पर भिन्न-भिन्न प्रकार से कार्य करते हैं। X1 और x2 0 और 1 के बीच बंधे रहते हैं, क्योंकि CSS विनिर्देश को वास्तव में एक क्यूबिक-बेज़ियर () टाइमिंग फ़ंक्शन की आवश्यकता होती है - उस सीमा के बाहर का मान बिल्कुल अमान्य है। y1 और y2 में ऐसी कोई सीमा नहीं है: एक हैंडल को बॉक्स के शीर्ष से ऊपर या नीचे खींचें, और वक्र अपनी शुरुआत या उसके अंत से आगे निकल जाता है, जो बिल्कुल इसी तरह से स्प्रिंग और बाउंस-शैली प्रभाव एक एकल सहजता वक्र से निर्मित होते हैं।

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

आपके ब्राउज़र में सब कुछ स्थानीय रूप से चलता है: कोई अपलोड नहीं, कोई खाता नहीं, कोई सर्वर राउंड-ट्रिप नहीं, और पेज लोड होने के बाद जनरेटर ऑफ़लाइन काम करता रहता है।