एक बार, बोरियत से बाहर, मैं 8-बिट पारदर्शिता के साथ एक सुंदर पूर्ण-रंग एनीमेशन बनाना चाहता था। यह स्पष्ट है कि जीआईएफ इस उद्देश्य के लिए उपयुक्त नहीं था और मैंने विकल्पों की तलाश शुरू कर दी। फ्लैश को उस गुणवत्ता में भी नहीं माना गया था - प्रोसेसर बहुत भारी है, यह पृष्ठ के अन्य तत्वों के शीर्ष पर अच्छी तरह से फिट नहीं है, और हर किसी के पास नहीं है।
सबसे पहले, मेरी नज़र PNG के एक रिश्तेदार MNG पर पड़ी। "प्रारूप विनिर्देश 2001 में वापस जारी किया गया था, इसलिए इसे संभवतः सभी आधुनिक ब्राउज़रों में लागू किया गया है!" और फिर पहली निराशा ने मेरा इंतजार किया। इस प्रारूप को लागू करने के लिए बहुत जटिल हो गया - मोज़िला कार्यान्वयन, उन्होंने कहा, कोड की कई पंक्तियों को अन्य सभी स्वरूपों के रूप में समाहित किया गया था, जिसके लिए इसे उनके उत्पादों से हटा दिया गया था। अन्य ब्राउज़र निर्माताओं ने भी इस प्रारूप को लागू करने की कोशिश नहीं की है। बेशक, ब्राउज़र के लिए एक प्लगइन है जो नेटस्केप प्लगइन्स का समर्थन करता है, लेकिन यह फ्लैश से बेहतर नहीं है। मैं केवल यह नोट करता हूं कि शायद प्रारूप अपने समय से बहुत आगे है। फीचर्स के विवरण को देखते हुए, यह एक ऐसा रैस्टर SVG है।
आगे की खोजों ने मुझे APNG प्रारूप में ले लिया। प्रारूप सरल है, दो रूबल की तरह: फ़ाइल में पिछले एक से फ्रेम में कुछ मामूली बारीकियों के साथ परिवर्तन होते हैं। लेकिन सबसे महत्वपूर्ण बात, इस प्रारूप का समर्थन नहीं करने वाले ब्राउज़र एक स्थिर छवि प्रदर्शित करेंगे। सामान्य तौर पर, प्रारूप की क्षमताएं GIF के समान होती हैं। यह मोज़िला द्वारा राक्षसी MNG के प्रतिस्थापन के रूप में प्रस्तावित किया गया था। फ़ायरफ़ॉक्स में जाँच - सब कुछ ठीक काम करता है। ओपेरा भी। मैं इसे क्रोम में खोलता हूं और ... एक स्थिर चित्र प्राप्त करता हूं। क्या हुआ: PNG विनिर्देश में APNG सहित मोज़िला प्रस्तावित। वोट देकर, इस विचार को खारिज कर दिया गया था। और अब कुछ ब्राउज़र इस प्रारूप का समर्थन करते हैं, और कुछ नहीं करते हैं।
तस्वीर मेरे सामने स्पष्ट रूप से दिखाई दी:
मोज़िला: आपका प्रारूप ख़राब है, आप एनिमेटेड PNGs में कुछ भी नहीं समझते हैं! हमने बिना शतरंज और कवियों के अपना बनाया। इसे विनिर्देश में शामिल करें!
पीएनजी विकास समूह: यहाँ आप जाओ!
जैसा कि अक्सर होता है, मानव दंभ के कारण हम दस साल से लंबे समय से पुराने जीआईएफ का आनंद ले रहे हैं।
और फिर एक विचार मेरे पास आया: ऐसा लगता है जैसे आप एसवीजी में बिटमैप चित्र डाल सकते हैं!
अगर पहाड़ मोहम्मद के पास नहीं जाता
प्रयोगों के लिए, मैंने मोज़िला से एक तस्वीर ली:
हम अलग-अलग फ्रेम में तस्वीर को तोड़ते हैं:
और इसी तरह। यह 25 तख्ते निकला।
एसवीजी के आकार को सबसे बड़े फ्रेम के आकार के बराबर निर्दिष्ट करें, और छवि डालें। आदेश, वैसे, महत्वपूर्ण नहीं है।
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png" /> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png" /> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png" /> </svg>
इसके अलावा, मैंने केवल एक-दूसरे पर क्रमिक रूप से फ़्रेमों को सुपरमिशन करने की कोशिश की, लेकिन पारदर्शिता को ध्यान में नहीं रखा और लोमड़ी के कान से सूरज मिला (उसी प्रभाव को IE9 में देखा जा सकता है):
प्रभाव का उपयोग एपीएनजी मोड में से एक को लागू करने के लिए किया जा सकता है: पिछले एक पर अगले फ्रेम को चित्रित करना।अब अपारदर्शिता गुण को चेतन करें। आप चेतनता और समन्वय कर सकते हैं और फ्रेम को दृष्टि से बाहर कर सकते हैं।
यहां समस्या स्वयं में प्रकट हो सकती है कि पारदर्शिता सुचारू रूप से बदल जाएगी और एक लूप या झिलमिलाहट दिखाई देगी। इसके लिए, हम कैलक्मोड को "असतत" के रूप में निर्दिष्ट करते हैं।
संदर्भ मूल्यों की सूची: मान = "1; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0 ; 0; 0; 0 "। जैसा कि आप देख सकते हैं, यह पहला फ्रेम है। पहला मान 1 है - छवि पारदर्शी नहीं है। अन्य सभी फ़्रेमों पर - पूरी तरह से पारदर्शी।
एनीमेशन (अवधि) की अवधि को चुना जाता है ताकि फ्रेम की संख्या से विभाजित होने पर, हमें एक फ्रेम का समय मिले। यदि स्क्रीन पर कुछ फ्रेम दोगुना होना चाहिए, तो संदर्भ मानों की सूची को दोगुना करना होगा, या एक मान की अवधि को बदलना होगा, जो कुछ अधिक जटिल है।
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="148" height="148"> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_001.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_002.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_003.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0" calcMode="discrete" repeatCount="indefinite" /> </image> … <image x="0" y="0" width="148" height="148" xlink:href="spinfox_024.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;0" calcMode="discrete" repeatCount="indefinite" /> </image> <image x="0" y="0" width="148" height="148" xlink:href="spinfox_025.png"> <animate attributeType="CSS" attributeName="opacity" dur="1.25s" values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1" calcMode="discrete" repeatCount="indefinite" /> </image> </svg>
अब हमारे पास केवल एक असुविधा है - एनीमेशन में कई फाइलें शामिल हैं। हम डेटा का उपयोग करके इस समस्या को हल करेंगे: सीधे एसवीजी में छवियों को एम्बेड करके URL।
अंतिम परिणाममूल APNG
का आकार: 613321 बाइट्स;
एसवीजी आकार: 799692 बाइट्स;
एसवीजी संपीड़ित गेज
का आकार: 601409 बाइट्स। मूल से भी कम!
PNG फ्रेम को pngout का उपयोग करके अनुकूलित किया गया था।एक चौकस पाठक ने देखा होगा कि यह "गुप्त तकनीक" IE में काम नहीं करता है। मैं आपको केवल GIF या फ्लैश के साथ एक और कोड देने की सलाह दे सकता हूं, IE10 की प्रतीक्षा करें और फावड़ा तैयार करें।