एनीमेशन का समर्थन करने वाले कौन से प्रारूप वेब के लिए उपयुक्त हैं?

13

एनीमेशन का समर्थन करने वाले कौन से प्रारूप वेब के लिए उपयुक्त हैं और प्रत्येक के पेशेवरों और विपक्ष क्या हैं।

image-format animation

— Alinium
स्रोत

यह भी देखें कि वेब के लिए एक दृष्टांत को एनिमेट करने का सबसे अच्छा तरीका क्या है? प्रत्येक प्रारूप के संबंध में अधिक जानकारी के लिए

— Zach Saucier

13

यह निर्भर करता है कि आपको किस प्रकार के एनीमेशन की आवश्यकता है।

.gif छवियां - फ़्रेम के साथ पूरी तरह से समर्थित, लेकिन सीमित उपयोग। .Png फ़ाइलों को एनीमेशन के लिए समर्थन माना जाता है, लेकिन आप इसे बहुत बार जंगली में नहीं देखते हैं, अगर बिल्कुल भी।
फ्लैश, सिल्वरलाइट, और अन्य प्लगइन्स - फ्लैश में सबसे सर्वव्यापीता है, लेकिन सभी प्लगइन्स को ब्राउज़र में स्थापित करने की आवश्यकता है और जरूरी नहीं कि उपयोगकर्ता के कंप्यूटर पर इंस्टॉल किया जा सके। मोबाइल प्लेटफॉर्म के लिए काम नहीं कर सकता।
CSS3 - सीमित रूपांतरण या एनिमेशन, सीमित ब्राउज़र समर्थन।
एचटीएमएल 5 वीडियो - भविष्य, लेकिन सीमित ब्राउज़र समर्थन।
जावास्क्रिप्ट - सक्षम करने की आवश्यकता है, लेकिन सार्वभौमिक ब्राउज़र-समर्थन के पास होना चाहिए। एनीमेशन के सीमित प्रकार। देखें राफेल.जेएस ।
कैनवास टैग - आधुनिक ब्राउज़र समर्थन, लेकिन समृद्ध एनिमेशन का समर्थन करता है।

— पुण्यसूसी मीडिया
स्रोत

मैं यहां नाइटपिक करने जा रहा हूं, लेकिन <canvas>एनीमेशन अनिवार्य रूप से जावास्क्रिप्ट है - यह सिर्फ एक अलग प्रारूप है जिस पर सामान खींचा जा सकता है। यदि आप सटीक होना चाहते हैं, तो आपको HTML तत्वों, एसवीजी (जो राफेल.जेएस का उपयोग करता है) और एचटीएमएल 5 के बीच अंतर करना चाहिए<canvas>

— यी जियांग

एसवीजी और कैनवास एनीमेशन के बीच का अंतर संक्षेप में - एसवीजी के साथ, हर पथ, एक तत्व आप एक div की तरह साथ क्लिक करें और के लिए माउसओवर और सहभागिता के डेटा और घटनाओं बाध्य कर सकते हैं, जबकि कैनवास में, यह ब्राउज़र अधिक तरह बातें बनाता है देता है उनका व्यवहार नियम तो उनके बारे में भूल जाता है। एसवीजी IE 9 से पहले IE में मौजूद नहीं है, यही वजह है कि राफेल भयानक है - यह एसवीजी को नियंत्रित करता है, या, IE6-8 में, यह IE के पुराने स्वयं के ब्रांड समकक्ष (जिसे वीएमएल कहा जाता है) का उपयोग करता है। केवल एक चीज जो मुझे पता है कि राफेल पुराने एंड्रॉइड स्टॉक ब्राउज़रों पर काम नहीं करता है (संस्करण 2 से पहले मुझे लगता है)।

— user56reinstatemonica8

2

यह Virtuosi मीडिया के महान जवाब के अलावा है:

Apple ने हाल ही में अपनी साइट पर एनीमेशन के लिए JPEG और PNG छवियों का उपयोग किया है। वे छवियों को स्विच करने के लिए जावास्क्रिप्ट का उपयोग करते हैं। यदि आपके पास बहुत अधिक फ्रेम नहीं हैं, तो आपको अल्फा ट्रांसपेरेंसी सपोर्ट की जरूरत है, यह एक बेहतरीन तकनीक है। आप चाहते हैं कि एनीमेशन पेज पर हो और यदि आप विस्तृत ब्राउजर सपोर्ट चाहते हैं। नकारात्मक पक्ष डाउनलोड आकार और प्रयास है।

यह इंटरेक्टिव भी हो सकता है। यदि आप Apple के iPad पृष्ठ के स्मार्ट कवर अनुभाग पर स्क्रॉल करते हैं, तो आप इसे कार्रवाई में देख सकते हैं: http://www.apple.com/ipad/features/

— मार्क एडवर्ड्स
स्रोत

1

जब छवियों को ओवरलेइंग किया जाता है, जिसमें छवि के नीचे की परतों पर एनिमेटेड छवियों के शीर्ष पर पारदर्शिता होती है। आप पाएंगे कि PNG24 एकमात्र छवि प्रारूप है जहाँ एंटी-अलियासिंग पृष्ठभूमि इमेजरी के साथ सही ढंग से मिश्रित होती है। जीआईएफ और पीएनजी 8 के साथ आप यह पता लगाने जा रहे हैं कि आपके किनारे सभी चंकी हैं। बहुत अच्छा नहीं लगता है, लेकिन वास्तव में याद करना आसान है।

— जॉन डेफरल
स्रोत