एनिमेशन के साथ क्रॉस-ब्राउज़र 2D रूपांतरण

बीमार मत बनो। मैंने एक दिलचस्प प्लगइन की समीक्षा करने का फैसला किया और उसी समय उपयोग के लिए सिफारिशें दीं।

सबसे अधीर के लिए - यह हमारे लिए इस तरह से बाहर हो जाएगा।

प्लगइन jQuery 2 डी परिवर्तन प्लगइन कहा जाता है। यह आपको 2D ट्रांसफ़ॉर्म गुण के CSS एनीमेशन का उपयोग करने की अनुमति देता है।

गुणों के विवरण के साथ अवलोकन - विषय के अंत में।

अब वापस प्लगइन में ही। इसे जोड़ने के बाद, हम ऐसी बातें लिख सकते हैं:

$('.example').click(function() { $(this).animate({rotate: '+=45deg'}, 'slow'); }); 

इस प्रकार, तत्व पर क्लिक करके, यह 45 ° घूमेगा। उदाहरण के लिए, आप कई गुण सेट कर सकते हैं:

 $('.example').click(function() { $(this).animate({ rotate: '+=45deg', // scale: [1.5, 1.5] //      1.5  }, 'slow'); }); 

एनिमेशन चेन

एनिमेटेड परिवर्तनों के जंजीरों ने हमें बिना फ्लैश के शांत चीजें करने के महान अवसर खोले। लेकिन दो नुकसान हैं जिन्हें हम दूर करेंगे, और एक तीसरा छोटा कंकड़ जिसे केवल ताबूत ही सही करेगा।

सबसे पहले, डिफ़ॉल्ट रूप से, जैकवर में दो प्रकार की सहजता उपलब्ध है: रैखिक और वृद्धिशील। ज्यादातर मामलों में, एनिमेशन की एक सुंदर श्रृंखला बनाने के लिए, हमें रैखिक एनिमेशन की आवश्यकता होगी, लेकिन यदि आप इसे निर्दिष्ट नहीं करते हैं, तो jquery वृद्धिशील का उपयोग करेगा। ऐसा करने के लिए, हम "रैखिक" पैरामीटर को जोड़कर अपने कोड को थोड़ा संशोधित करते हैं:

 $('.example').click(function() { $(this).animate({ rotate: '+=45deg', // scale: [1.5, 1.5] // // X ()  Y(). }, 'slow', 'linear'); }); 

निश्चित रूप से बहुत से लोग जानते हैं कि एनीमेशन की एक श्रृंखला कैसे बनाई जाए, लेकिन सिर्फ मैं आपको बताऊंगा। एनीमेशन श्रृंखला बनाने के लिए, हम वर्तमान एनीमेशन के गुणों का वर्णन करने के बाद बस एक नया फ़ंक्शन कहते हैं:

 $('.example').click(function() { var exemple = $(this); //     $; exemple.animate({ rotate: '+=45deg', scale: [1.5, 1.5] }, 'slow', 'linear', function(){ exemple.animate({ rotate: '+=45deg', //,    +=     ,      . scale: [1.5, 1.5] }); }); }); 

दूसरा नुकसान यह है कि अगर हम ट्रांसलेशन, ट्रांसलेशन या ट्रांसलेशन का उपयोग एनिमेशन चेन्स में करते हैं तो ब्राउजर (ओपेरा को छोड़कर) हमारी ट्रांसफॉर्मेबल ऑब्जेक्ट की रेंडरिंग को भयावह रूप से धीमा कर रहे हैं। हर कोई सामान्य रूप से पहला कदम खींचता है, लेकिन दूसरे और बाद वाले पूरी तरह से अप्रत्याशित हैं, एनीमेशन में लिंक लंघन तक।
ऐसा ही होता है (क्रोम या एफएफ में देखो)।

आप इस दुर्भाग्य को दूर कर सकते हैं - आपको अनुवाद के बजाय शीर्ष, बाएं, नीचे या दाएं का उपयोग करने की आवश्यकता है:

 $('.example').click(function() { $(this).animate({ rotate: '+=45deg', // scale: [1.5, 1.5] // // X ()  Y(). left: '+= 20px', top: '+=30px' }, 'slow', 'linear'); }); 

अंतिम परिणाम और एक अन्य उदाहरण, पाठ के साथ एक फ्लाइंग ब्लॉक के साथ ।

तीसरा पानी के नीचे का कंकड़ यह है कि IE 6-8, जब png छवियों को पारदर्शिता के साथ बदलते हैं, तो पारदर्शिता सीमाओं पर एक काली रूपरेखा तैयार होती है:


वे कहते हैं कि फोंट के साथ एक ही कचरा, और वे यह भी कहते हैं कि ज़ूम: 1 फोंट व्यवहार करता है।

हालाँकि, यह मेरे लिए बहुत परेशान करने वाला नहीं है, IE9 में सब कुछ ठीक है और पुराने IEs में ब्लैक आउटलाइन भी थोड़ी स्टाइलिश है;)
फिर भी, अगर किसी को पता है कि क्या यह तय किया जा सकता है, लिखो!

शांत सामान, भाई!

शुरुआत के लिए, CSS3 की एक सूची गुणों को बदल देती है, साथ ही साथ बोनस जो प्लगइन में हैं:

मैट्रिक्स : [१, ०, ०, १, ०, ०] - छह मूल्यों के परिवर्तन मैट्रिक्स के रूप में २ डी परिवर्तन करता है। धूम्रपान करना काफी कठिन है
प्रतिबिंबित : सच - बोनस संपत्ति, 180 ° तत्व घूमता है
रिफ्लेक्सएक्स : सच - बोनस, उल्टा दर्शाता है
reflectXY : सच्चा - बोनस। रिफ्लेक्सएक्स + रोटेट (-90 डिग्री) के समान
प्रतिबिंबित : सच - बोनस, बस नीचे दर्शाती है
घुमाएँ: '45deg' एक मोड़ है, यह अफ्रीका में भी एक मोड़ है:

skewX : '10deg, skewY :' 10deg ', skew : [' 10deg ',' 10deg '] - डिग्रियों में विकृति। यह कैसा दिखता है नीचे दिखाया गया है।


स्केल : [१.५, १.५], स्केलएक्स : १.५, स्केल: १.५ - स्केलिंग:


अनुवाद : ['20px', '20px'], TranslateX : 20px ', अनुवाद :' 20px '- आंदोलन। मैं उपयोग करने की सलाह नहीं देता, बेहतर बाएं , दाएं , ऊपर , नीचे । दोनों मामलों में यह इस प्रकार है:


उत्पत्ति : ['20% ', '20%'] - एक तत्व में परिवर्तन लागू करने के लिए एक संदर्भ बिंदु को परिभाषित करते समय प्रयुक्त। उदाहरण के लिए, जब आप डिफ़ॉल्ट रूप से घूमते हैं, तो प्रारंभिक बिंदु तत्व का केंद्र होगा। और मान मूल के साथ: 0 0, संदर्भ बिंदु ऊपरी बाएं कोने होगा:


किसी कारण से, प्लगइन फ़ाइल में टिप्पणियों में यह कहता है:
- ट्रांसफॉर्मरिन सुलभ नहीं है।
लेकिन यह काम करना चाहिए। शायद उन्होंने तुरंत इसका एहसास नहीं किया और टिप्पणी को हटाना भूल गए।

आप इनमें से कुछ गुणों को कार्रवाई में देख सकते हैं, साथ ही यहां एक क्रॉस-ब्राउज़र कोड (IE 6-8 के लिए भी) प्राप्त कर सकते हैं (किसी कारण से, ओपेरा में साइट अच्छी तरह से काम नहीं करती है)। बस यह ध्यान रखें कि साइट IE9 की क्षमताओं का उपयोग नहीं करती है, जिसमें ये गुण -ms- उपसर्ग के साथ उपलब्ध हैं, लेकिन इसे -ms-फ़िल्टर-मैट्रिक्स खिलाता है।