steps() एक sprite sheet को कैसे एनिमेट करता है?

steps(n) एनिमेशन को n बराबर हिस्सों में बाँटता है और interpolate करने के बजाय उनके बीच कूदता है, इसलिए background-position एक frame से अगले पर snap करता है। steps() को अपने frame count के बराबर रखने का मतलब है कि हर frame एक step के लिए बिना किसी धुंधली बीच-की स्थिति के दिखता है।

क्या मुझे अपनी image अपलोड करने की ज़रूरत है?

नहीं। एक sprite sheet अपलोड करने से आपको एक लाइव प्रीव्यू मिलता है, पर आप केवल frame की चौड़ाई, ऊँचाई और गिनती से सही CSS बना सकते हैं। image के बिना प्रीव्यू एक प्लेसहोल्डर grid दिखाता है जबकि गणित और आउटपुट सटीक बने रहते हैं।

single-row और grid मोड में क्या अंतर है?

Single-row मोड मानता है कि सभी frames एक क्षैतिज strip पर बैठते हैं और एक कॉम्पैक्ट from/to keyframe बनाता है। Grid मोड बहु-पंक्ति sheets को प्रति frame एक background-position स्टॉप बनाकर संभालता है, पहले columns फिर rows में चलते हुए, और background-size जोड़ता है ताकि पूरी sheet सही ढंग से स्केल हो।

क्या मुझे FPS सेट करना चाहिए या एक कुल अवधि?

FPS का उपयोग तब करें जब आप जानते हैं कि हर सेकंड कितने frames चलने चाहिए; टूल frame count को FPS से भाग देकर इसे एक अवधि में बदल देता है। कुल अवधि का उपयोग तब करें जब आप चाहते हैं कि पूरा loop frame count की परवाह किए बिना एक विशिष्ट संख्या में milliseconds ले।

मैं एनिमेशन को हमेशा के लिए या केवल कुछ बार कैसे loop करूँ?

एक नॉन-स्टॉप loop के लिए Infinite चुनें, जो animation-iteration-count: infinite से मैप होता है। अनुक्रम को एक निश्चित बार चलाने के लिए Count चुनें और एक संख्या दर्ज करें, और reverse या alternate playback के लिए direction विकल्प का उपयोग करें।

क्या मेरी sprite sheet कहीं अपलोड होती है?

नहीं। image आपके ब्राउज़र के FileReader से स्थानीय रूप से पढ़ी जाती है ताकि प्रीव्यू बनाया जा सके और यह कभी आपके डिवाइस से बाहर नहीं जाती; बना हुआ CSS पूरी तरह आपकी मशीन पर गणना किया जाता है।

sprite sheet CSS एनिमेशन जनरेटर

एक sprite sheet को एक कॉपी-पेस्ट CSS steps() एनिमेशन में बदलें, लाइव प्रीव्यू के साथ, सीधे अपने ब्राउज़र में।

आपकी sprite sheet आपके ब्राउज़र में स्थानीय रूप से पढ़ी जाती है ताकि प्रीव्यू बनाया जा सके और CSS उत्पन्न किया जा सके; image कभी अपलोड नहीं होती और आपके डिवाइस पर रहती है।

आउटपुट को व्यवस्थित कर रहे हैं? CSS Formatter आज़माएँ।

sprite sheet CSS एनिमेशन के बारे में

यह sprite sheet CSS एनिमेशन जनरेटर एक frame strip या grid को @keyframes और steps() timing function पर बने एक तैयार-से-पेस्ट CSS एनिमेशन में बदल देता है। एक लाइव प्रीव्यू के लिए एक sprite sheet image डालें, या बस frame की चौड़ाई, ऊँचाई और गिनती टाइप करें और टूल को आपके लिए background-position की गणना करने दें। यह एक अकेली क्षैतिज पंक्ति और एक पूरे grid दोनों को संभालता है, frames को row-major तरीके से पहले columns फिर rows में चलाता है, और keyframes को background-size के साथ जोड़ता है ताकि हर cell ठीक-ठीक बैठे। गति को FPS या कुल अवधि से सेट करें, एनिमेशन का नाम रखें, infinite या एक निश्चित iteration count चुनें, और एक direction चुनें। आपको पूरा CSS मिलता है — element sizing, @keyframes ब्लॉक और animation shorthand — जिसे आप कॉपी या एक .css फ़ाइल के रूप में डाउनलोड कर सकते हैं। सब कुछ आपके डिवाइस पर चलता है, इसलिए एक अपलोड की गई sheet स्थानीय रूप से पढ़ी जाती है और कभी आपके ब्राउज़र से बाहर नहीं जाती।

विशेषताएँ

एक तत्काल लाइव प्रीव्यू के लिए drag-and-drop या file picker से एक sprite sheet अपलोड करें, या केवल dimensions से काम करें
Single-row मोड एक कॉम्पैक्ट दो-स्टॉप from/to keyframe बनाता है जो strip पर background-position को step करता है
Grid मोड प्रति frame एक स्पष्ट background-position स्टॉप बनाता है, row-major तरीके से पहले columns फिर rows
Grid मोड में background-size जोड़ता है ताकि हर cell आपके सटीक frame dimensions के अनुसार स्केल हो
timing को frames-per-second या milliseconds में कुल अवधि से सेट करें
infinite looping या एक निश्चित iteration count चुनें, साथ ही normal, reverse या alternate direction
एनिमेशन नाम को स्वचालित रूप से एक वैध CSS पहचानकर्ता में सैनिटाइज़ करता है
पूरे CSS को एक क्लिक में कॉपी करें या एक .css फ़ाइल के रूप में डाउनलोड करें

sprite sheet CSS एनिमेशन का उपयोग कैसे करें

एक sprite sheet अपलोड करें, या अपलोड छोड़ें और बस अपने frame dimensions दर्ज करें।
single row या grid चुनें, फिर frame की चौड़ाई, ऊँचाई और गिनती सेट करें (grid के लिए columns और rows भी)।
गति को FPS या एक कुल अवधि से सेट करें, फिर एनिमेशन का नाम रखें और iteration और direction चुनें।
framing सही है यह पुष्टि करने के लिए element को लाइव प्रीव्यू में एनिमेट होते देखें।
बना हुआ CSS कॉपी करें या इसे एक .css फ़ाइल के रूप में डाउनलोड करें और अपने प्रोजेक्ट में डालें।

उदाहरण

इनपुट

8 frames, 64×64 each, single row, 12 fps, infinite

आउटपुट

.sprite {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  animation: sprite 0.667s steps(8) infinite normal;
}

@keyframes sprite {
  from { background-position: 0 0; }
  to { background-position: -512px 0; }
}

एक single-row sheet को सभी frames चलाने के लिए केवल steps(8) और एक दो-स्टॉप keyframe की ज़रूरत होती है।

सामान्य त्रुटियाँ और समस्या निवारण

एनिमेशन अटकता है या अगले frame की एक झलक दिखाता है। — सुनिश्चित करें कि frame की चौड़ाई और ऊँचाई sheet से ठीक-ठीक मेल खाती है। यदि cells असमान हैं, तो sheet को trim करें ताकि हर frame समान आकार का हो।
केवल पहला frame दिखता है और कुछ नहीं हिलता। — जाँचें कि frame count कम-से-कम 2 है और background-repeat, no-repeat बना रहता है ताकि sheet tile न हो।
एक grid sheet गलत frames चलाती है या तिरछे खिसकती है। — पुष्टि करें कि columns और rows sheet के layout से मेल खाते हैं; टूल frames को बाएँ-से-दाएँ फिर ऊपर-से-नीचे चलाता है, इसलिए गिनतियाँ सही होनी चाहिए।
एनिमेशन बहुत तेज़ या बहुत धीमा चलता है। — timing मोड को FPS और कुल अवधि के बीच बदलें। कुल अवधि को frame count से भाग देने पर प्रति-frame समय मिलता है।

अक्सर पूछे जाने वाले प्रश्न

steps() एक sprite sheet को कैसे एनिमेट करता है?: steps(n) एनिमेशन को n बराबर हिस्सों में बाँटता है और interpolate करने के बजाय उनके बीच कूदता है, इसलिए background-position एक frame से अगले पर snap करता है। steps() को अपने frame count के बराबर रखने का मतलब है कि हर frame एक step के लिए बिना किसी धुंधली बीच-की स्थिति के दिखता है।
क्या मुझे अपनी image अपलोड करने की ज़रूरत है?: नहीं। एक sprite sheet अपलोड करने से आपको एक लाइव प्रीव्यू मिलता है, पर आप केवल frame की चौड़ाई, ऊँचाई और गिनती से सही CSS बना सकते हैं। image के बिना प्रीव्यू एक प्लेसहोल्डर grid दिखाता है जबकि गणित और आउटपुट सटीक बने रहते हैं।
single-row और grid मोड में क्या अंतर है?: Single-row मोड मानता है कि सभी frames एक क्षैतिज strip पर बैठते हैं और एक कॉम्पैक्ट from/to keyframe बनाता है। Grid मोड बहु-पंक्ति sheets को प्रति frame एक background-position स्टॉप बनाकर संभालता है, पहले columns फिर rows में चलते हुए, और background-size जोड़ता है ताकि पूरी sheet सही ढंग से स्केल हो।
क्या मुझे FPS सेट करना चाहिए या एक कुल अवधि?: FPS का उपयोग तब करें जब आप जानते हैं कि हर सेकंड कितने frames चलने चाहिए; टूल frame count को FPS से भाग देकर इसे एक अवधि में बदल देता है। कुल अवधि का उपयोग तब करें जब आप चाहते हैं कि पूरा loop frame count की परवाह किए बिना एक विशिष्ट संख्या में milliseconds ले।
मैं एनिमेशन को हमेशा के लिए या केवल कुछ बार कैसे loop करूँ?: एक नॉन-स्टॉप loop के लिए Infinite चुनें, जो animation-iteration-count: infinite से मैप होता है। अनुक्रम को एक निश्चित बार चलाने के लिए Count चुनें और एक संख्या दर्ज करें, और reverse या alternate playback के लिए direction विकल्प का उपयोग करें।
क्या मेरी sprite sheet कहीं अपलोड होती है?: नहीं। image आपके ब्राउज़र के FileReader से स्थानीय रूप से पढ़ी जाती है ताकि प्रीव्यू बनाया जा सके और यह कभी आपके डिवाइस से बाहर नहीं जाती; बना हुआ CSS पूरी तरह आपकी मशीन पर गणना किया जाता है।