अपने ऐप्लिकेशन में दो व्यू के बीच ऐनिमेट करने का तरीका जानें.
ऐप्लिकेशन में अक्सर आपको उपयोगकर्ताओं को एक से दूसरे व्यू पर ले जाना होता है. भले ही, वह सूची से पूरी जानकारी वाले व्यू में हो या साइडबार का नेविगेशन दिखाना हो. इन व्यू के बीच के ऐनिमेशन, उपयोगकर्ता की दिलचस्पी बनाए रखते हैं और आपके प्रोजेक्ट में ज़्यादा जान डाल देते हैं.
- एक व्यू से दूसरे व्यू पर जाने के लिए अनुवाद का इस्तेमाल करें.
left,topया लेआउट को ट्रिगर करने वाली किसी भी दूसरी प्रॉपर्टी का इस्तेमाल करने से बचें. - पक्का करें कि आपने जिन ऐनिमेशन का इस्तेमाल किया है वे तेज़ हों और उनकी अवधि कम हो.
- इस बात पर ध्यान दें कि स्क्रीन का साइज़ बढ़ने के साथ-साथ, आपके ऐनिमेशन और लेआउट कैसे बदलते हैं. छोटी स्क्रीन पर ऐसा करने के लिए, उसे डेस्कटॉप पर इस्तेमाल करने पर अजीब लग सकता है.
ये व्यू ट्रांज़िशन कैसे दिखेंगे और कैसे काम करेंगे, यह इस बात पर निर्भर करता है कि आपको किस तरह के व्यू दिख रहे हैं. उदाहरण के लिए, व्यू के ऊपर मोडल ओवरले को ऐनिमेट करना, लिस्ट और ज़्यादा जानकारी वाले व्यू के बीच ट्रांज़िशन करने से एक अलग अनुभव होना चाहिए.
एक व्यू से दूसरे व्यू पर जाने के लिए, अनुवाद का इस्तेमाल करना
ज़िंदगी को आसान बनाने के लिए, यह मान लीजिए कि इसके दो व्यू हैं: सूची व्यू और दूसरा ज़्यादा जानकारी वाला व्यू. जैसे ही उपयोगकर्ता, सूची वाले व्यू में किसी सूची आइटम पर टैप करता है, वैसे ही ब्यौरे को स्लाइड में देखा जा सकता है और सूची वाले आइटम को स्लाइड के तौर पर देखा जा सकता है.
यह इफ़ेक्ट पाने के लिए, आपको दोनों व्यू के लिए एक ऐसे कंटेनर की ज़रूरत होगी जिस पर overflow: hidden सेट हो. इस तरह, दोनों व्यू कोई भी हॉरिज़ॉन्टल स्क्रोलबार दिखाए बिना, कंटेनर के अंदर अगल-बगल मौजूद हो सकते हैं और हर व्यू ज़रूरत के मुताबिक कंटेनर के अंदर अगल-बगल स्लाइड कर सकता है.
कंटेनर का सीएसएस यह है:
.container {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
कंटेनर की जगह relative पर सेट है. इसका मतलब है कि इसके अंदर का हर व्यू, पूरी तरह से सबसे ऊपर बाएं कोने में रखा जा सकता है और फिर ट्रांसफ़ॉर्म के साथ इधर-उधर ले जाया जा सकता है. यह तरीका, left प्रॉपर्टी के इस्तेमाल की तुलना में परफ़ॉर्मेंस के लिए बेहतर है, क्योंकि इससे लेआउट और पेंट ट्रिगर होता है. साथ ही, आम तौर पर इसे ट्रैक करना आसान होता है.
.view {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
/* let the browser know we plan to animate
each view in and out */
will-change: transform;
}
transform प्रॉपर्टी पर transition जोड़ने से, स्लाइड का अच्छा इफ़ेक्ट मिलता है. इसे बेहतर बनाने के लिए, इसमें पसंद के मुताबिक cubic-bezier कर्व का इस्तेमाल किया गया है. इसके बारे में हमने कस्टम ईज़िंग गाइड में बताया था.
.view {
transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}
ऑफ़स्क्रीन व्यू का अनुवाद दाईं ओर किया जाना चाहिए. इसलिए, इस स्थिति में ज़्यादा जानकारी वाले व्यू को ट्रांसफ़र करना होगा:
.details-view {
transform: translateX(100%);
}
अब क्लास को मैनेज करने के लिए, JavaScript की ज़रूरत होती है. यह व्यू पर सही क्लास को टॉगल करता है.
var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');
/**
* Toggles the class on the container so that
* we choose the correct view.
*/
function onViewChange(evt) {
container.classList.toggle('view-change');
}
// When you click a list item, bring on the details view.
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', onViewChange, false);
}
// And switch it back again when you click the back button
backButton.addEventListener('click', onViewChange);
आखिर में, हम उन क्लास के लिए सीएसएस का एलान जोड़ते हैं.
.view-change .list-view {
transform: translateX(-100%);
}
.view-change .details-view {
transform: translateX(0);
}
इसे बड़ा करके कई व्यू को शामिल किया जा सकता है, लेकिन बुनियादी कॉन्सेप्ट पहले जैसा ही रहना चाहिए. न दिखने वाला हर व्यू ऑफ़स्क्रीन होना चाहिए और ज़रूरत के मुताबिक दिखाया जाना चाहिए. साथ ही, मौजूदा ऑनस्क्रीन व्यू को हटाया जाना चाहिए.
व्यू के बीच ट्रांज़िशन के साथ-साथ, इस तकनीक का इस्तेमाल दूसरे स्लाइड-इन एलिमेंट पर भी किया जा सकता है. जैसे, साइडबार नेविगेशन एलिमेंट. असली अंतर सिर्फ़ यह है कि आपको दूसरे व्यू की जगह बदलने की ज़रूरत नहीं पड़ती.
पक्का करें कि आपका ऐनिमेशन बड़ी स्क्रीन पर काम करता हो
बड़ी स्क्रीन के लिए, आपको सूची व्यू को हटाने के बजाय उसे हमेशा बनाए रखना चाहिए और जानकारी वाले व्यू पर दाईं ओर से स्लाइड करना चाहिए. यह काफ़ी हद तक नेविगेशन व्यू से जुड़े काम करने जैसा है.