2012-04-17 23 views
22

हाल के रुझानों में मैंने एनिमेटेड जीआईएफ का उपयोग करने के बजाय जावास्क्रिप्ट का उपयोग करके सीएसएस स्प्राइट्स एनिमेट करने वाले लोगों को देखा है?एनिमेटेड सीएसएस sprites के बजाय एनिमेटेड जीआईएफ क्यों नहीं?

पूर्व:

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

+1

यहाँ की कैसे Apple iPhone 5 पृष्ठ पर यह किया एक अच्छा टूटने है - https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI –

उत्तर

34
  • नियंत्रण

    आप ऐनिमेटेड GIF पर कोई नियंत्रण नहीं। आप उन्हें शुरू नहीं कर सकते हैं, आप उन्हें रोक नहीं सकते हैं। जैसे ही वे लोड होते हैं, वे सिर्फ एनिमेट करते हैं।

    sprites के साथ, आप एनीमेशन को नियंत्रित कर सकते हैं। आप एनीमेशन के माध्यम से पैन, ब्राउज़र घटनाओं को शुरू, बंद और प्रतिक्रिया कर सकते हैं। उदाहरण के लिए, जब आप उन पर क्लिक करते हैं तो Google डूडल आमतौर पर सक्रिय होते हैं।

    9 गीगा में एक निफ्टी जीआईएफ नियंत्रण प्रणाली पाई जा सकती है। आप उन्हें डीओएम में जोड़कर शुरू कर सकते हैं, और उन्हें हटाकर उन्हें पूर्व-जेनरेट किए गए "प्रथम-फ्रेम दृश्य" के साथ स्वैप कर सकते हैं। लेकिन जहां तक ​​जीआईएफ जाते हैं।

  • स्वतंत्र उदाहरण

    जब आप एक ही GIF के कई उदाहरण लोड करते हैं, इन सभी उदाहरणों एक ही समय में पेज और कदम भर में एक ही छवि का उपयोग करें। यदि आपके पास यूनिकॉर्न्स जीआईएफ नृत्य करने की एक पंक्ति है, तो वे एक ही समय में नृत्य करेंगे। सिंक्रनाइज़ नृत्य!

    लेकिन स्प्राइट्स के साथ, भले ही आप एक ही छवियों का उपयोग कर रहे हों, एनीमेशन अंतर्निहित स्क्रिप्ट पर निर्भर करता है। तो यदि एक स्प्राइट एक स्क्रिप्ट द्वारा एनिमेटेड है और दूसरा एक और स्क्रिप्ट द्वारा एनिमेटेड है, तो दोनों एनिमेशन स्वतंत्र रूप से चल सकते हैं, और अलग-अलग एक दूसरे से।

    यह आपको एक और जीआईएफ बनाने से बचाता है और यह संशोधित करना आसान है क्योंकि आप केवल स्क्रिप्ट बदल रहे हैं।

  • सुनिश्चित चिकनी एनीमेशन

    एनिमेटेड GIF सिर्फ लोड करते समय चेतन, और जब इंटरनेट धीमी है, एनिमेशन फ्रीज जब तक चित्र के और अधिक लोड हो जाता है।

    इसके विपरीत, sprites का लाभ यह है कि आप उन्हें पहले से लोड कर सकते हैं, सुनिश्चित करें कि सभी छवियां पहले से लोड हों। यह सुनिश्चित करता है कि एनीमेशन के लिए उपयोग किए जाने वाले संसाधन पहले से ही एनीमेशन से पहले लोड हो जाएं ताकि यह सुनिश्चित हो सके कि यह जितना संभव हो सके उतना आसान हो।

    हालांकि, जीआईएफ अभी भी छवियां हैं। आप उन्हें डोम से गतिशील रूप से लोड कर सकते हैं और उन्हें डीओएम में जोड़ने से पहले लोड ईवेंट सुन सकते हैं।

  • आंशिक प्रतिपादन

    पीएनजी स्प्राइट के साथ, आप एनीमेशन में "आंशिक" कर सकते हैं, भागों के लिए एक एनीमेशन दृश्य को तोड़ दिया। उदाहरण के लिए, जब एक चरित्र अभी भी खड़ा होता है, लेकिन हथियार लहरा रहे हैं। आपको पूरे चरित्र, या पूरे दृश्य को एनिमेट करने की आवश्यकता नहीं है। आप चरित्र के शरीर के स्प्राइट को "फ्रीज" स्थिति में चित्रित करने वाले तत्व को रख सकते हैं जबकि हथियार एनिमेटिंग एक अलग तत्व हैं। यह स्प्राइट शीट की जगह और आकार को संरक्षित करता है। इसके लिए एक अच्छा उदाहरण 2012 द्वारा मदर डे डूडल था।

    इसके विपरीत, अधिकांश समय, जीआईएफ एनीमेशन में प्रत्येक फ्रेम पूरी छवि है, और एनिमेट करता है कि इसमें कुछ भी चलता है या नहीं। अधिक फ्रेम, जीआईएफ का आकार बड़ा है।

  • GIFs सिर्फ पैमाने पर नहीं है

    GIFs माउस के लिए बने थे। फ़ाइल आकार से छवि आकार का अनुपात पीएनजी और जेपीजी की तुलना में जीआईएफ में अच्छी तरह से स्केल नहीं करता है।

+2

आप क्या कहा एक GIF में के बारे में हर फ्रेम एक छवि 'isn किया जा रहा है टी 100% सच है। जीआईएफ प्रारूप विभिन्न पृष्ठभूमि-समाशोधन विकल्पों का उपयोग करके आंशिक फ्रेम अपडेट के लिए अनुमति देता है। –

3

यूसुफ सपने देखने का जवाब के शीर्ष पर ...

जहां तक ​​मुझे पता है, या कम से कम यह है कि हुआ करता था, GIF फ़ाइलों सच रंग, एक और कारण एक JPGs/PNG का उपयोग करने के लिए नहीं हैं एक सीएसएस स्प्राइट के रूप में।

 संबंधित मुद्दे

  • कोई संबंधित समस्या नहीं^_^