💇🏻 🤰🏽 🤚🏼 जेपीजी, पारदर्शिता, कैनवास, एनीमेशन 👼🏽 🤾🏼 🍙

नमस्कार दोस्तों!

मैं आपको HTML5 रूपरेखा पर अल्फा चैनल के साथ एनीमेशन स्प्राइट्स पर एक छोटा सा पाठ प्रदान करता हूं।

प्रस्तावना।

पहले, चलो कुछ आकर्षित करते हैं

क्यों गोल और पीले? क्योंकि डगलस एडम्स इन हिचहाइकर गाइड टू द गैलेक्सी में एक ऐसा स्लेर्टिबर्टफास्ट है - एक बहुत ही चलने वाला चाचा जो पृथ्वी के निर्माण के दौरान तटरेखाओं के लिए एक पुरस्कार है। इसलिए, केवल मामले में, हम एक पीले तारे को चेतन करेंगे।

अगला, हम 256x256 पिक्सेल के फ्रेम आकार के साथ 256 फ्रेम के अनुक्रम में स्टार को चेतन करते हैं।
उन 256, इन 256 और उन 256 को केवल उदाहरण के लिए लिया जाता है। एनीमेशन छोटा और छोटा हो सकता है, हालांकि, साथ ही साथ लंबा और बड़ा - यह सब आपके लक्ष्यों पर निर्भर करता है। मुझे लगता है कि आज 256x256 पिक्सल स्प्राइट के लिए इतना सामान्य आकार है: बहुत बड़ा नहीं है और बहुत छोटा नहीं है। बेशक, पहले, जब घास हरियाली थी, और स्प्राइट्स 16x16 या 32x32 की तुलना में अधिक मामूली थे, लेकिन हमें विकास पर प्रयोग करना चाहिए।
256 फ़्रेम भी इतना नहीं है, लेकिन इतना कम नहीं है: फ्रेम दर के आधार पर, आप 10-20-30 सेकंड का अनुक्रम प्राप्त कर सकते हैं।

अब तक, सभी आश्चर्य के बिना, जब तक आप फ्रेम, अवधि और गहराई के पक्षों के आयामों को गुणा नहीं करते हैं:

256 x 256 x 256 x 4 = 64 एमबी

हालांकि! बिना संपीड़न के 64 मेगाबाइट स्प्राइट के लिए थोड़ा चिकना है। यदि हम सभी 256 फ्रेम की गणना 16x16 फ्रेम मैट्रिक्स में करते हैं और इस मछली को एक अल्फा चैनल (सब कुछ एडोब आफ्टर इफेक्ट्स में होता है) के साथ पीएनजी में सेव करते हैं, तो हमें आउटपुट पर 18.6 एमबी मिलता है, जो कि 64 नहीं है, फिर भी बहुत कुछ है। जो लोग इस पीएनजी को देखने के इच्छुक हैं, उनके लिए यहां एक लिंक है ।

निचोड़!

क्या PNG कम्प्रेशन के बारे में प्रभाव इतना लापरवाह है? परिणामी ग्रिड को एक आकार में लाने के लिए, मैंने OptiPNG और PNGOut उपयोगिताओं का उपयोग करके प्रदान किए गए PNG को अनुकूलित करने का प्रयास किया। दोनों उपयोगिताओं को अत्यधिक लोगों तक विभिन्न विकल्पों के साथ लॉन्च किया गया था, लेकिन परिणामस्वरूप, सबसे अच्छे मामले में, संपीड़न को 1.5 प्रतिशत करामाती के लिए अनुकूलित किया गया था, जो स्पष्ट रूप से अपेक्षाओं को पूरा नहीं करता है। इसलिए, इस एनीमेशन को गुणवत्ता के नुकसान (एक ही PNG) के बिना फ़ाइलों के एक जोड़े में परिवर्तित किया गया था, लेकिन अलग से RGB और Alpha और फिर Image Optimizer का उपयोग करके उन्हें JPEG के जोड़े में परिवर्तित कर दिया गया। जेपीजी कंप्रेसर के काम को सुविधाजनक बनाने के लिए (क्या यह सही शब्द है?), उस अनुक्रम पर पृष्ठभूमि जिसमें आरजीबी परतें हैं, को प्रतिपादन से पहले लौकिक काले के बजाय ब्रह्मांडीय पीले से भरा होने के लिए मजबूर किया जाता है।

संपीड़न अनुपात के आधार पर, हमें जेपीईजी के विभिन्न वजन जोड़े मिलते हैं:

दबाव	10%	15%	25%	50%	75%	85%	90%
आरजीबी	139kb	198KB	250kb	425KB	691KB	992KB	1337KB
अल्फा	363KB	459KB	524KB	689KB	856KB	1067KB	1273KB

ये आकार आप चाहते हैं के करीब हैं। यह मेरे लिए एक पूर्ण आश्चर्य की बात है कि पारदर्शिता के साथ एक फाइल सभी मामलों में रंगों के साथ एक फ़ाइल की तुलना में भारी है, शायद पूरे बिंदु इसके विपरीत है। नेत्रहीन, जो सब 50% से अधिक संकुचित होता है वह ईंटों के समान होता है और कोसोम्स के लिए नहीं। दोस्तों, अगर आपके बीच में कोई है जो एक अच्छी तरह से संपीड़ित बना सकता है और एक ही समय में स्पष्ट रूप से जेपीईजी को अलग कर सकता है - तो कृपया अपना अनुभव साझा करें, मैं ख़ुशी से लेख को अपडेट करूंगा। इस बीच, हम 75% तक संकुचित फ़ाइलों की एक जोड़ी के साथ और प्रयोग करेंगे, जो कुल 1547KB है, जो PNG के लिए 18.6MB की तुलना में काफी बेहतर (हल्का) है और यहां तक कि असम्पीडित प्रारूप के लिए 64MB भी अधिक है।

आगे!

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

मार्कअप सबसे खाली होगा:

अंकन

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Canvas Example: Using canvas</title> <link rel="stylesheet" href="css/main.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ loadRGBA("jpeg_16x16/render_16_16_rgb_75.jpg", "jpeg_16x16/render_16_16_aplha_75.jpg"); }); </script> </head> <body> <div id="star1" class="base64"></div> <div id="star2" class="base64"></div> </body> </html>

साथ ही शैलियों:

शैलियों

 * { margin: 0; padding: 0; } html { background: #888 url(../backs/back64dark.png); font-size: 14px; font-family: 'Helvetica', Helvetica, sans-serif; } h1 { font-size: 1.5em; text-align: center; margin: 1em 0; color: #ddd; } #base64{ background: transparent; color: #bbb; width: 256px; height: 265px; margin: 0 auto; }

स्क्रिप्ट ब्लॉक में, दस्तावेज़ के गठन के अंत में, हम छवि लोडिंग फ़ंक्शन को कहते हैं।
यह बहुत सरल है (js / main.js फ़ाइल में निहित है):

समारोह loadRGBA ()

 function loadRGBA(url_rgb, url_alpha){ var img_rgb = new Image(); var img_alpha = new Image(); var img_count = 0; var img_rgba = ''; img_rgb.src = url_rgb; img_alpha.src = url_alpha; img_rgb.onload = function(){ ++img_count; if(2 == img_count){ img_rgba = compileRGBA(img_rgb, img_alpha); } } img_alpha.onload = function(){ ++img_count; if(2 == img_count){ img_rgba = compileRGBA(img_rgb, img_alpha); } } }

संक्षेप में: दो छवि वस्तुओं की घोषणा करें और उन्हें लोड करने के लिए प्रतीक्षा करें (अर्थात जब संख्या img_count 2 है)। मेरी स्क्रिप्ट में, इस क्षण को एक जगह के माध्यम से कुछ हद तक बनाया गया था - किसी भी फाइल को लोड करने के बाद, यह जांचा जाता है कि क्या अन्य ALREADY लोड किया गया है और यदि ऐसा है, तो दो छवियों को एक में इकट्ठा करने का कार्य कहा जाता है। मैं जावास्क्रिप्ट में इतना अच्छा नहीं हूं, मुझे लगता है कि कुछ गलत है, लेकिन मेरी भावनाओं के बावजूद यह काम करता है। और चूंकि यह हमेशा (उदाहरण में) बिल्कुल 2 छवियों की उम्मीद है, हम लोड फ़ंक्शन को अकेले छोड़ देंगे और विधानसभा फ़ंक्शन लिखेंगे।

इकट्ठा करने के लिए!

compileRGBA ()

 function compileRGBA(raw_rgb, raw_alpha){ if (!raw_rgb.width || !raw_rgb.height || !raw_alpha.width || !raw_alpha.height){ return; } if (raw_rgb.width !== raw_alpha.width || raw_rgb.height !== raw_alpha.height){ alert(' RGB    ') return; } var canvas_rgb = document.createElement("canvas"); var canvas_alpha = document.createElement("canvas"); var canvas_frame = document.createElement("canvas"); if (!canvas_rgb || !canvas_rgb.getContext('2d') || !canvas_alpha || !canvas_alpha.getContext('2d') || !canvas_frame || !canvas_frame.getContext('2d')){ alert('----, ... ---, , '); return; } canvas_rgb.width = raw_rgb.width; canvas_rgb.height = raw_rgb.height; canvas_alpha.width = raw_alpha.width; canvas_alpha.height = raw_alpha.height; canvas_frame.width = 256; canvas_frame.height = 256; var context_rgb = canvas_rgb.getContext('2d'); var context_alpha = canvas_alpha.getContext('2d'); var context_frame = canvas_frame.getContext('2d'); context_rgb.drawImage(raw_rgb, 0, 0); context_alpha.drawImage(raw_alpha, 0, 0); var pix_rgb = context_rgb.getImageData(0, 0, raw_rgb.width, raw_rgb.height); var pix_alpha = context_alpha.getImageData(0, 0, raw_alpha.width, raw_alpha.height); for (var i = 0, n = pix_rgb.width * pix_rgb.height * 4; i < n; i += 4){ pix_rgb.data[i+3] = pix_alpha.data[i]; } context_rgb.putImageData(pix_rgb, 0, 0); var img_arr = []; var frames = []; for(var i=0; i<=15; i++){ for(var j=0; j<=15; j++){ frames[j*16 + i] = context_rgb.getImageData(i*256, j*256, 256, 256); } } var frame = 0; $("#base64").append(canvas_frame); var intFPS = setInterval(function(){ ++frame; if (frame > 255){ frame = 0; } context_frame.putImageData(frames[frame], 0, 0) }, 1000 / 16); }

यहां भी, कुछ भी जटिल नहीं है - पहली स्थिति में, आयामों की उपस्थिति की जांच की जाती है, और दूसरे में वे अनुरूप होते हैं। फिर हम तीन कैनवस घोषित करते हैं: रंग के लिए, पारदर्शिता के लिए और एनीमेशन के लिए। जैसा कि अपेक्षित था, हम ब्राउज़र में कैनवास तंत्र के लिए समर्थन की उपस्थिति की जांच करते हैं (मैंने मोज़िला फ़ायरफ़ॉक्स और Google क्रोम में परीक्षण किया, सब कुछ ठीक है और IE8 में एक टेंट्रम था और मैंने इसे अकेला छोड़ दिया। जैसा कि dasm32 सुझाव देता है: "यह ओपेरा पर काम करता है" , साथ ही साथ। sashagil "IE 10 में (जो अब तक केवल Win8 में है), यह सामान्य रूप से दिखाता है" , लेकिन Krovosos के लिए "Safari ने iPad पर काम नहीं किया, यहां तक कि पृष्ठभूमि भी दिखाई नहीं देती" ) और हम उनके लिए संदर्भ उत्पन्न करते हैं। और फिर जादू शुरू होता है:

  var pix_rgb = context_rgb.getImageData(0, 0, raw_rgb.width, raw_rgb.height); var pix_alpha = context_alpha.getImageData(0, 0, raw_alpha.width, raw_alpha.height);

इन दो पंक्तियों के साथ हम रंगीन फ़ाइल और पारदर्शिता फ़ाइल के संदर्भों से RGBA परतें खींचते हैं, जिनमें से प्रत्येक 64-मेगाबाइट सरणी में विस्तारित है, इस तथ्य के बावजूद कि रंग फ़ाइल के मामले में कोई पारदर्शिता घटक नहीं है और ग्रे-मोड पारदर्शिता फ़ाइल के मामले में, 8-10 बिट लेयर, लेकिन वह सेल्जवा - कैनवास हमेशा 4 बाइट गहरा होता है। तीन रंगों में से प्रत्येक के लिए एक बाइट और पारदर्शिता के लिए एक और। एक बार कैनवास पर, 32 बिट्स द्वारा मोनोक्रोम पारदर्शिता फ़ाइल "गहराई में तैनात की जाती है" ताकि आर = जी = बी और पारदर्शिता = 255 हो।

इन सरणियों के सभी पिक्सल के माध्यम से लूप और

 pix_rgb.data[i+3] = pix_alpha.data[i]

पारदर्शिता बाइट से पारदर्शिता बाइट (डेटा [i] - लाल, डेटा [i + 1] - हरा, डेटा [i + 2] - नीला, डेटा [i + 3] - अल्फ़ा) लाल बाइट के मान की प्रतिलिपि बनाएँ

इस क्षण से हमारे पास एक विशाल (4096x4096) फुटक्लॉथ है जिसमें 256 अलग-अलग फ्रेम हैं जिनमें से प्रत्येक का आकार 256x256 पिक्सेल है। फ़्रेम को 16x16 ग्रिड में ऊपर से नीचे और बाएं से दाएं तक रखा गया है। अब इस ग्रिड को कैनवास से दस्तावेज़ के लिए एक Base64 उदाहरण के रूप में निर्यात करना और इसे उचित आकार के DIV में पृष्ठभूमि-छवि संपत्ति में फ़ीड करना और फ्रेम के आकार से टाइमर में शुरुआती बिंदु को स्थानांतरित करना सबसे तर्कसंगत है। प्रयोग से पता चला कि यह प्रोसेसर लोड के मामले में एक भयानक विकल्प है, मेरा ड्यूलकोर 2.2GHz 5 एफपीएस से ऊपर नहीं दे सकता है। इसलिए, हमने इन 16x16 सूरज को तख्ते में काट दिया और उन्हें एक सरणी में डाल दिया।

  var frames = []; for(var i=0; i<=15; i++){ for(var j=0; j<=15; j++){ frames[j*16 + i] = context_rgb.getImageData(i*256, j*256, 256, 256); } }

तब हम प्रति सेकंड 16 बार टाइमर शुरू करते हैं (यह अधिक संभावना है और धीरे-धीरे दोनों संभव है) और हम एनीमेशन देखते हैं , या हम डाउनलोड करते हैं और हम स्थानीय रूप से देखते हैं।

चेतावनी! Chrome बदसूरती के कारणों के लिए स्थानीय रूप से "अपलोड" फाइलें नहीं करेगा, इसलिए एफएफ रहता है।
UPD SHVV : "... ताकि क्रोम लोकल फाइल्स को खोल सके, इसे --disable-web-security key के साथ शुरू किया जाना चाहिए । "

यदि आप ऑनलाइन देखते हैं, तो मुझे कहना होगा कि डाउनलोड (1.5MB) किसी का ध्यान नहीं है, लेकिन लगभग 5 सेकंड के लिए ग्लेज़िंग फ्रीज़ होता है, लेकिन फिर यह फ्रीज़ हो जाता है और एनीमेशन काम करता है। इसके अलावा, प्रोसेसर को 1% पर लोड किया गया है, जो इस तरह के सूरज की एक जोड़ी के साथ एक और प्रयोग करने का कारण देता है "यह देखें कि वे कैसे अंतर करते हैं।"

स्पेस 2.0

इसके लिए CSS को संशोधित करें

नई शैली

 .base64{ background: transparent; position: absolute; width: 256px; height: 265px; margin: 0; }

हम पूर्ण स्थिति बनाएंगे ताकि ब्लॉक उड़ सके।

और जावास्क्रिप्ट भी। सबसे पहले, हम दो स्टार बनाते हैं, क्रमशः दो DIV, और दो gluing फ़ंक्शन कहते हैं -

संशोधन loadRGBA ()

  img_rgb.onload = function(){ ++img_count; if(2 == img_count){ compileRGBA(img_rgb, img_alpha, "star1"); compileGGAA(img_rgb, img_alpha, "star2"); } } img_alpha.onload = function(){ ++img_count; if(2 == img_count){ compileRGBA(img_rgb, img_alpha, "star1"); compileGGAA(img_rgb, img_alpha, "star2"); } }

एक पहले (compileRGBA) के समान है और दूसरा संशोधित (compileGGAA) यह रंग-पारदर्शिता चैनलों के साथ पहले से थोड़े अधिक मुक्त तरीके से भिन्न है:

  pix_rgb.data[i] = pix_rgb.data[i+1]; pix_rgb.data[i+2] = pix_rgb.data[i+3] = pix_alpha.data[i];

जैसा कि आप यहां देख सकते हैं कि लूप में, लाल चैनल के मूल्य को हरे रंग के मूल्य से बदल दिया जाता है, और दूसरी फाइल की पारदर्शिता से नीले और पारदर्शिता को कॉपी किया जाता है। तारा नीला हो जाता है। और एनीमेशन टाइमर में भी शुरुआती फ्रेम का मूल्य सौ द्वारा स्थानांतरित किया गया है। यह सिंक्रनाइज़ तैराकी को रोकने के लिए है।

दूसरे, हम इन तारों को एक दीर्घवृत्त के साथ 180 डिग्री के चरण डेल्टा के साथ स्थानांतरित करने के लिए समय निर्धारित करते हैं:

टाइमर

  var intRotate = setInterval(function(){ phase += .01; if (phase >= 6.28319) { phase = .0; } $("#star1.base64").css('top', (doc_h + 50*Math.sin(phase)) + 'px' ); $("#star2.base64").css('top', (doc_h + 50*Math.sin(phase + 3.14159)) + 'px' ); $("#star1.base64").css('left', (doc_w + 100*Math.cos(phase)) + 'px' ); $("#star2.base64").css('left', (doc_w + 100*Math.cos(phase + 3.14159)) + 'px' ); $("#star1.base64").css('z-index', (phase < 3.14159) ? '1001':'1000' ); $("#star2.base64").css('z-index', (phase < 3.14159) ? '1000':'1001' ); }, 1000 / 24);

तीसरा, मध्यवर्ती संरचनाओं को हटा दें:

कचरा हटाओ

  delete pix_rgb; delete pix_alpha; delete context_rgb; delete canvas_rgb; delete context_alpha; delete canvas_alpha;

यह कहना मुश्किल है कि इन विलोपनों में कोई समझदारी है या नहीं, कम से कम टास्क मैनेजर ने डिलीट करने या डिलीट किए बिना कोई अंतर नहीं देखा।

इस प्रकार, दो वैकल्पिक रूप से ग्रहण करने वाले तारे प्राप्त होते हैं।

- क्या मैं सबको देख सकता हूँ?
"हाँ, बिल्कुल।" क्या आप डाउनलोड करेंगे ?

सारांश

यह प्रयोग / पाठ का अंत है। भावना दुगुनी है: एक तरफ, मूल रूप से सब कुछ काम करता है। दूसरी ओर, gluing के समय यह जंगली ब्रेक जीत की खुशी को खराब करता है। और इसके साथ क्या करना है अभी तक स्पष्ट नहीं है। यदि आपके पास कोई सुझाव है, तो मैं खुशी के साथ सुनूंगा और समायोजन करूंगा।

धन्यवाद, दोस्तों!

पी एस मैं कम बेरहम =) के लिए आप के लिए मुस्कुराया