IPhone और iPad पर चिकनी एनिमेशन

सभी जानते हैं कि मोबाइल ब्राउजिंग कितना लोकप्रिय हो गया है। आधुनिक उपकरणों पर, वेब डेस्कटॉप मूल से कम और कम अवर है। हालांकि, एक ठोकर है: गति। हालाँकि हमें आउटपुट के रूप में एक खूबसूरती से प्रदान किया गया वेब पेज मिलता है, लेकिन इसका प्रतिपादन और जावास्क्रिप्ट प्रदर्शन खराब है।







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



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



कोई सोचता है कि एक छोटा उपकरण अधिक निचोड़ नहीं सकता है, लेकिन ऐसा नहीं है। कुछ इंटरफेस, विशेष रूप से स्नेचा ढांचे और आईपैड पत्रिकाओं में, अभी भी ब्रेक के बिना काम करने के लिए प्रबंधन करते हैं। वे इसे कैसे करते हैं? बचाव के लिए हार्डवेयर त्वरण!



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



हमें जिस पैरामीटर की आवश्यकता होती है उसे Transl3d कहा जाता है। और ऐसा हुआ कि केवल वह वास्तव में कुछ को प्रभावित करता है: कम से कम फर्मवेयर 4.1 पर, सरल ट्रांसलेक्स का उपयोग करना सफल नहीं था। इसलिए, यदि सामान्य तरीकों से एनीमेशन के दौरान, हमने jQuery कनेक्ट किया और चेतन विधि को कॉल किया:



$('#slide').click(function() {

$(this).stop().animate({'margin-left': 650}, 1000);

});







अब आपको बस CSS में आवश्यक संपत्ति सेट करने की आवश्यकता है, समय और एनीमेशन का प्रकार निर्धारित करें:



$('#slide').click(function() {

$(this).css({

'-webkit-transform': 'translate3d(650px, 0px, 0px)',

'-webkit-transition': '-webkit-transform 1s linear',

});

});







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



#slide {

-webkit-transform: translate3d(0px, 0px, 0px);

-webkit-transition: -webkit-transform 1s linear;

}







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



डेमो पेज

एक डेमो के साथ पुरालेख



मैंने इस विधि का उपयोग करके दो प्लगइन्स लिखे: टच कंट्रोल और स्लाइड शो के साथ एक स्लाइडर। स्लाइडर लगभग तैयार है, आपको स्लाइड शो खत्म करने की आवश्यकता है, लेकिन आप इसका उपयोग कर सकते हैं। विवरण के साथ प्रलेखन और पृष्ठ अभी तक नहीं किया गया है। मुझे लगता है कि विकास के लिए कोई काम आएगा।



स्लाइडर और स्लाइड शो डेमो

उनके साथ पुरालेख



आप स्लाइडर को पैरामीटर मोबाइल के साथ कॉल कर सकते हैं: 'टचमैरिज' और देखें कि यह कैसा दिखेगा, मैं बाईं संपत्ति का उपयोग करता हूं।



इसके अलावा, हमें दिलचस्प jQuery के एन्हांस किए गए एनिमेट प्लगइन का उल्लेख करना चाहिए, जो आपको मक्खी पर कुछ गुणों के एनीमेशन को वेबकिट एनीमेशन में बदलने की अनुमति देता है। प्लगइन पूरी तरह से काम नहीं करता है, लेकिन यह ध्यान देने योग्य है।