टच-वेब: स्वाइप करें

इस पोस्ट के साथ, हम स्पर्श उपकरणों के लिए वेब इंटरफेस के विकास पर लेखों की एक श्रृंखला जारी रखते हैं।

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

आज हम स्वाइप के बारे में बात करेंगे, आम लोगों में - एक पत्रक। स्वाइप आपको एक उंगली की सामान्य गति के साथ "पेज" के माध्यम से फ्लिप करने की अनुमति देता है। मैं आपको बताता हूं कि Mail.Ru पोर्टल के मुख्य पृष्ठ पर समाचार ब्लॉक के उदाहरण का उपयोग करके सही तरीके से स्वाइप कैसे लागू किया जाए।





आइए उन प्रमुख बिंदुओं से शुरू करें जिन्हें आपको एक पत्रक विकसित करते समय ध्यान देने की आवश्यकता है:

• सबसे पहले, आपको यह निर्धारित करने की आवश्यकता है कि उपयोगकर्ता क्या चाहता है - ब्लॉक पृष्ठ पर स्क्रॉल करें या स्क्रॉल करें
• दूसरे, आपको पृष्ठ को स्थानांतरित करने की आवश्यकता है जब आप इसके बाद अपनी उंगली को स्थानांतरित करते हैं
• तीसरा, यदि कहीं भी फ़्लिप नहीं करना है, तो आपको उपयोगकर्ता को यह समझने देना होगा
• चौथा, केवल पहली उंगली से स्पर्श करें
• और अंत में, पेज को सही दिशा में फ्लिप करें जब उपयोगकर्ता ने अपनी उंगली जारी की

घटनाओं को स्पर्श करें

विशेष रूप से स्पर्श इनपुट उपकरणों के साथ काम करने के लिए, निम्नलिखित घटनाओं को ब्राउज़रों में लागू किया जाता है:

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

लेकिन स्पर्श उपकरणों पर कुछ ब्राउज़र - उदाहरण के लिए, WP IE - इन घटनाओं का समर्थन नहीं करते हैं।

सामान्य तौर पर, ऐसा लगता है कि कुछ भी माउस घटनाओं के माध्यम से समान व्यवहार का अनुकरण करने से रोकता है - जैसा कि, उदाहरण के लिए, डेस्कटॉप drag'n'drop में:

• टचस्टार्ट - मूसडाउन
• टचमोव - मूसमोव
• टचेंड, टचस्केल - माउसअप

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

क्योंकि स्वाइप को केवल टच-इवेंट्स पर ही लागू किया जाता है।

स्पर्श घटना में स्पर्श के बारे में उपयोगी जानकारी आती है:

• छूता है - सभी वर्तमान स्पर्शों का एक संग्रह
• चेंजटच - छूता है जिसके लिए परिवर्तन होते हैं, अर्थात सीधे उन है कि घटना को चालू कर दिया
• targetTouches लक्ष्य ईवेंट से जुड़े स्पर्श हैं। तत्व के अंदर होने वाले नल जो कि वर्तमान श्रोता पर लटकाए जाते हैं

प्रत्येक स्पर्श को एक विशिष्ट पहचानकर्ता सौंपा गया है। विभिन्न ब्राउज़रों में इसके अलग-अलग अर्थ हो सकते हैं, कुछ में यह लगातार बढ़ जाता है, अन्य में यह तब रीसेट होता है जब अधिक स्पर्श नहीं होते हैं।

इसके अलावा, टच ऑब्जेक्ट में व्यूपोर्ट, स्क्रीन और पेज के बारे में निर्देशांक के बारे में जानकारी होती है।

तर्क बहुत आसान है:

Touchstart

/*   started (     swipe)  - touches.  swipe    toches  , ,    ,      . */ if (e.touches.length != 1 || started){ return; } /*   detecting = true, ,    touchmove  ,      —     ,       */ detecting = true; //       touch = e.changedTouches[0]; x = touch.pageX; y = touch.pageY; 

touchmove

 /*   :     started,  detecting,   .    */ if (!started && !detecting){ return; } /*            */ if (detecting){ detect(); } if (started){ draw(); } /*  */ function detect(){ /*      changedTouches.     , ,      .       */ if (e.changedTouches.indexOf(touch) == -1){ return; } /*     ,     ,      .      ,   , ,  . */ if (abs(x - newX) >= abs(y - newY)){ /*      ,   touchmove     (,  Android).    swipe         –   */ e.preventDefault(); // ,    started = true; } //     , ..      detecting = false; } //      function draw(){ /*    ,      touchmove     */ e.preventDefault(); /*      changedTouches.     , ,      .       */ if (e.changedTouches.indexOf(touch) == -1){ return; } /*       .      ,   «»   */ delta = x – newX; /*   ,          « » .  ,   ,     */ if (delta > 0 && !leftPage || delta < 0 && !rightPage){ delta = delta / 5; } //  ,     moveTo(delta); } 

स्पर्शक / स्पर्शक

 //   ,    if (e.changedTouches.indexOf(touch) == -1 || !started){ return; } /*    . ,      ,      ,    . */ e.preventDefault(); /* ,       */ swipeTo = delta < 0 ? 'left' : 'right'; //  ,     swipe(swipeTo); 

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

प्रतिपादन

एक पत्रक बनाने के लिए, आपको पृष्ठों को एक पंक्ति में व्यवस्थित करने की आवश्यकता है।



उनमें से प्रत्येक माता-पिता से कोई व्यापक और कोई छोटा नहीं होना चाहिए।



केंद्रीय एक हमेशा दिखाई देता है, बाएं लोगों को बाईं ओर 100% स्थानांतरित किया जाता है, और दाएं वाले 100% दाईं ओर होते हैं।



बहुत से लोग एक तालिका का उपयोग करना चाहते हैं, लेकिन यह कई कारणों से उपयुक्त नहीं है।
माता-पिता की 100% पृष्ठ की चौड़ाई प्राप्त करने के लिए, आपको किसी भी तरह से पूरी तालिका की चौड़ाई <पृष्ठ के>> 100%, और पृष्ठों को स्वयं को 100% / <पृष्ठों की संख्या> में सेट करना होगा। अतिरिक्त जेएस-जोड़तोड़ के बिना, यह असंभव है और त्रुटियों और अनियमितताओं के साथ-साथ अतिरिक्त गणनाओं से भी खतरा है।

पृष्ठों को तैरता बनाना एक विकल्प के रूप में भी नहीं है यह कई मामलों में पहले से ही एक धीमी ब्राउज़र को एक अतिरिक्त भार देगा, भले ही आप स्ट्रीम को साफ करें।

हमने एक और विकल्प चुना:

 .swipe { position: relative; overflow: hidden; height: 300px; } 

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



पेज 3 तार्किक समूहों में विभाजित थे:

1. बाईं ओर पृष्ठ
2. केंद्रीय पृष्ठ हमेशा एक होता है
3. और दाईं ओर पृष्ठ

 .swipe__page { overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 

रेंडरिंग को गति देने के लिए, आपको पृष्ठों को एक दूसरे से अलग करने की आवश्यकता है, इसलिए, प्रत्येक पृष्ठ के लिए, स्थिति: निरपेक्ष; और इसी निर्देशांक और आकार।

 .swipe__page_animating { transition: transform 200ms linear; } 

अगला, सवाल दाएं और बाएं के पन्नों को बदलने का है।
पृष्ठ सीएसएस संक्रमण का उपयोग करते हुए एनिमेटेड हैं।
यदि आप बाईं ओर चेतन करते हैं, तो यह बहुत धीरे-धीरे निकलता है। अनुवाद बहुत तेज़ी से काम करता है, और CSS ट्रांसफ़ॉर्म से Translate3d और भी तेज़ी से काम करता है।

 .swipe__page_left { transform: translate(-100%, 0); transform: translate3d(-100%, 0, 0); } .swipe__page_center { transform: translate(0, 0); transform: translate3d(0, 0, 0); } .swipe__page_right { transform: translate(100%, 0); transform: translate3d(100%, 0, 0); } 

इसलिए, सभी पृष्ठों को बाएं के साथ इंगित किया गया है: 0 और दोनों अनुवाद विकल्प - यदि ब्राउज़र 3 डी परिवर्तनों का समर्थन नहीं करता है, तो क्रमशः बाएं, केंद्र और दाएं पृष्ठों के लिए 100%, 0 और 100% के क्षैतिज ऑफसेट मूल्यों के साथ।



इस प्रकार, हमारे पास निम्नलिखित हैं: दृश्यमान केंद्रीय पृष्ठ, और ब्लॉक के दृश्य भाग के बाहर, बाईं ओर पृष्ठों का एक ढेर और दाईं ओर पृष्ठों का एक ढेर।



सभी पृष्ठों में से तीन का चयन किया जाता है:

1. केंद्रीय, दृश्यमान
2. अगले पृष्ठ को बाईं ओर
3. अगले पृष्ठ पर दाईं ओर

 transform: translate(delta, 0); 

प्रारंभ में, swipe__page_animating वर्ग (CSS संक्रमण जोड़ता है) सेट नहीं है। टचमोव इवेंट द्वारा, उंगली के ऑफसेट के बराबर क्षैतिज ऑफसेट (या "ड्रैग गुणांक" द्वारा विभाजित ऑफसेट के साथ) पृष्ठ के लिए संबंधित अनुवाद सेट किया जाता है। यानी पृष्ठ केवल आपकी उंगली से चलता है।



वास्तव में, सब कुछ कुछ अधिक जटिल है। एक ही समय में तीन पृष्ठ चलते हैं: वर्तमान एक दिखाई देता है, और पृष्ठ बाएं और दाएं होता है, जो एक निरंतर टेप का प्रभाव बनाता है। तदनुसार, दाएं और बाएं पन्नों के लिए, ऑफसेट इसकी चौड़ाई के बराबर स्थिति चिह्न (दाएं के लिए - प्लस, बाएं - माइनस के लिए) प्लस उंगली की ऑफसेट के बराबर है।



टचेंड या टचस्केल घटना के द्वारा, पृष्ठ swipe__page_animating वर्ग पर सेट होते हैं, जिसमें CSS एनिमेशन शामिल होते हैं, और अंतिम स्थिति के अनुरूप ऑफसेट मानों को या तो चालू किया जाता है या प्रारंभिक मान सेट किया जाता है।



संक्रमण घटना के द्वारा, अर्थात एनीमेशन के अंत में:

• वर्ग swipe__page_animating हटा दिया गया है
• "अगले" पृष्ठ फिर से चुने गए हैं, कक्षाएं _left, _center, _right नई स्थिति के अनुसार स्विच की जाती हैं। उदाहरण के लिए, यदि उपयोगकर्ता बाईं ओर मुड़ता है, तो केंद्र पृष्ठ दाईं ओर, बाएं पृष्ठ केंद्रीय हो जाता है, दाईं ओर बस दाईं ओर के स्टैक में रखा जाता है, और बाएं स्टैक से एक नया "अगला" चुना जाता है
• स्क्रिप्ट द्वारा सेट किए गए ऑफ़सेट को रीसेट कर दिया जाता है ताकि पूरे पृष्ठ की चौड़ाई बदलते समय - उदाहरण के लिए, डिवाइस का ओरिएंटेशन बदलते समय - ब्लॉक पेज स्वचालित रूप से ब्राउज़र द्वारा नई स्थितियों के अनुकूल हो जाएं
• शुरू की तरह झंडे साफ कर रहे हैं

इस प्रकार, ब्लॉक प्रारंभिक स्थिति में है और उपयोगकर्ता के साथ बातचीत के लिए तैयार है।

यह कैसे स्पष्ट किया जाए कि एक ब्लॉक को फ़्लिप किया जा सकता है जो इंटरफ़ेस डिज़ाइनर द्वारा एक अलग रिपोर्ट का विषय है। मैं केवल यह कह सकता हूं कि किसी प्रकार का दृश्य सुराग या स्विच करने का कोई अन्य तरीका होना चाहिए।



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

यह विधि उन ब्राउज़रों के साथ संगतता के लिए भी अच्छी है जो स्पर्श घटनाओं का समर्थन नहीं करते हैं। उदाहरण के लिए, WP IE में, एक उपयोगकर्ता समाचार ब्लॉक के साथ-साथ अन्य उपकरणों पर भी उपयोग कर सकता है।

आज के लिए बस इतना ही। प्रश्न और चर्चा का स्वागत है।

Egor Dydykin,
Mail.Ru मुखपृष्ठ विकास टीम और क्रॉस-पोर्टल परियोजनाओं के नेता