एनीमेशन को ListView में जोड़ना

अभिवादन, साथियों,

आज मैं आपके लिए स्क्रॉल करते समय ListView में एनिमेशन जोड़ने के एक छोटे से लेख के साथ आया हूं। बहुत पहले नहीं, मैं अपनी सूची में एक एनीमेशन के समान जोड़ना चाहता था जिसे G + क्लाइंट में देखा जा सकता है, लेकिन थोड़ा अलग।

और मैं यह सुनिश्चित करना चाहता था कि नए तत्व न केवल नीचे दिखाई दें, बल्कि नीचे और थोड़ा दाईं ओर तैरें। सामान्य तौर पर, मैंने इसे किया था, लेकिन बाद में, मैंने Google IO 2013 पर रोमन गाइ और चेत हास की रिपोर्ट देखी और यथार्थवाद को जोड़ने के लिए एक ही समय में विरूपण को जोड़ने का विचार प्राप्त किया। इसके लिए दृष्टिकोण में थोड़े बदलाव की आवश्यकता थी, लेकिन, सामान्य तौर पर, अवधारणा समान थी।

चलो, अब, मैं इस बारे में बात करूंगा कि क्या हुआ, यह कैसे बदल गया, और वास्तव में, यह कैसे काम करता है।

यह स्पष्ट करने के लिए, सामान्य रूप से, मैं किस बारे में बात कर रहा हूं, नीचे अंतिम एनीमेशन के साथ वीडियो का लिंक है। ध्यान दें कि जब वे दिखाई देते हैं तो तत्व कैसे ख़राब होते हैं। चूंकि वीडियो को एमुलेटर से रिकॉर्ड किया गया था, इसलिए इसमें थोड़े बदलाव हैं, डिवाइस पर सब कुछ पूरी तरह से चिकनी है। इसके अलावा, स्पष्टता के लिए, मैंने एनीमेशन की अवधि बढ़ाकर 900ms कर दी है। आमतौर पर आप इसे 300 मि।

सरल आंदोलन

चूंकि हम चाहते हैं कि तत्व "पॉप अप" करें जब वे सूची के नीचे या ऊपर दिखाई देते हैं, तो सबसे तार्किक स्थान हमारे एडेप्टर के getView में कोड जोड़ना है।

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) { animatePostHc(position, v); } else { animatePreHc(position, v); } 

मैं तुरंत ध्यान दूंगा कि मेरा मुख्य ध्यान ICS + पर है, इसलिए मैं मुख्य रूप से इसके बारे में बात करना जारी रखूंगा।

आइए चेतनपोस्टहॉक विधि देखें;

 @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) private void animatePostHc(int position, View v) { if (prevPosition < position) { v.setTranslationX(animX); v.setTranslationY(animY); } else { v.setTranslationX(-animX); v.setTranslationY(-animY); } v.animate().translationY(0).translationX(0).setDuration(300) .setListener(new InnerAnimatorListener(v)).start(); } 

कदम। हम यह निर्धारित करते हैं कि हमारी सूची किस दिशा में आगे बढ़ रही है और उचित ऑफसेट बनाती है। अगला, नए एनीमेशन एपीआई का उपयोग करते हुए, हम कहते हैं कि हम 300 एमएस में (0, 0) पर जाना चाहते हैं।

हम एक हैंडलर भी लटकाते हैं जो निम्नलिखित कार्य करता है:

 static class InnerAnimatorListener implements AnimatorListener { private View v; private int layerType; public InnerAnimatorListener(View v) { this.v = v; } @Override public void onAnimationStart(Animator animation) { layerType = v.getLayerType(); v.setLayerType(View.LAYER_TYPE_HARDWARE, null); } @Override public void onAnimationRepeat(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { v.setLayerType(layerType, null); } @Override public void onAnimationCancel(Animator animation) { } } 

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

वास्तव में, जेली बीन के साथ शुरू करना, वास्तव में एक ही चीज को बहुत आसान किया जा सकता है, अर्थात्, एनिमेटर की विधि () विधि को कॉल करके:

 v.animate().withLayer().translationY(0).translationX(0).setDuration(300).setListener(new InnerAnimatorListener(v)).start(); 

लेकिन हम एक आदर्श दुनिया में नहीं रहते हैं।

चेक - हाँ, यह काम करता है। लेकिन ... विचार हमेशा एनिमेटेड होते हैं, तब भी जब आप केवल गतिविधि को खोलते हैं। आइए एनिमेशनों की उपस्थिति को केवल उस समय तक सीमित करें जब हम वास्तव में हमारे सूची दृश्य को स्क्रॉल करते हैं।

ऐसा करने के लिए, मैंने अपने एडेप्टर में बूलियन फ़ील्ड को जोड़ा। अब हमें बस ListView पर हैंडलर को लटका देना है और एनिमेशन को चालू / बंद करना है:

 listView.setOnScrollListener(new OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { adapter.setAnimate(scrollState == SCROLL_STATE_FLING || SCROLL_STATE_TOUCH_SCROLL == scrollState); } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { } }); 

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

विकृति

जैसा कि मैंने कहा, Google I / O 2013 के इस व्याख्यान ने मुझे इसे जोड़ने के लिए प्रेरित किया। सामान्य तौर पर, मेरा मानना ​​है कि रोमन गाइ से प्रत्येक सामग्री (वीडियो, ब्लॉग पोस्ट आदि) बिल्कुल अमूल्य है।

सूची आइटम में थोड़ी विकृति जोड़ने के लिए, हमें एक कस्टम लेआउट बनाने की आवश्यकता है। चिंता मत करो, मैं यह नहीं कह रहा हूं कि हमें इसे खरोंच से बनाने की आवश्यकता है, हमें बस मौजूदा एक का विस्तार करने की आवश्यकता है। मेरे उदाहरण में, सूची में प्रत्येक आइटम एक RelativeLayout है, इसलिए मैंने SkewingRelativeLayout वर्ग बनाकर इसका विस्तार किया:

 public class SkewingRelativeLayout extends RelativeLayout { private float skewX = 0; public SkewingRelativeLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public SkewingRelativeLayout(Context context, AttributeSet attrs) { super(context, attrs); } public SkewingRelativeLayout(Context context) { super(context); } @Override public void draw(Canvas canvas) { if (skewX != 0) { canvas.skew(skewX, 0); } super.draw(canvas); } public void setSkewX(float skewX) { this.skewX = skewX; ViewCompat.postInvalidateOnLayout(this); } } 

हमने तिरछा क्षेत्र जोड़ा - विकृति। अब, हमने अपनी ड्रा विधि को फिर से परिभाषित किया है, और इसमें, हमारे घटक को खींचने से पहले, हम कैनवास को विकृत करते हैं।

सूची आइटम को SkewingRelativeLayout से बदलें।

अब एनीमेशन के लिए ... हमारे तत्व के सिंक्रोनस विरूपण और आंदोलन को बनाने के लिए, मुझे इसके एनीमेशन के दृष्टिकोण को थोड़ा बदलना पड़ा:

 @TargetApi(Build.VERSION_CODES.ICE_CREAM_SANDWICH) private void animatePostHc(int position, View v) { float startSkewX = 0.15f; float translationX; float translationY; if (prevPosition < position) { translationX = animX; translationY = animY; } else { translationX = -animX; translationY = -animY; } ObjectAnimator skewAnimator = ObjectAnimator.ofFloat(v, "skewX", startSkewX, 0f); ObjectAnimator translationXAnimator = ObjectAnimator.ofFloat(v, View.TRANSLATION_X, translationX, 0.0f); ObjectAnimator translationYAnimator = ObjectAnimator.ofFloat(v, View.TRANSLATION_Y, translationY, 0.0f); AnimatorSet set = new AnimatorSet(); set.playTogether(skewAnimator, translationXAnimator, translationYAnimator); set.setDuration(300); set.setInterpolator(decelerator); set.addListener(new AnimatorWithLayerListener(v)); set.start(); } 

ViewPropertyAnimator के उपयोग को तीन अलग-अलग ObjectAimimators द्वारा प्रतिस्थापित किया गया है, जिनमें से प्रत्येक इसके मूल्य (विरूपण, एक्स ऑफसेट, वाई ऑफसेट) के लिए जिम्मेदार है। ताकि वे तुल्यकालिक रूप से काम करें और एक ही इंटरपोलर पर, हम क्लास एनिमेटरसेट का उपयोग करें।

यदि हम अब इसे चलाने की कोशिश करते हैं, तो हम देखेंगे कि हमारे तत्व कितने सुंदर रूप से विकृत हैं।

विकृति के साथ काम करते समय मुझे एक समस्या यह हुई कि मुझे हार्डवेयर परतों को छोड़ना पड़ा, क्योंकि विरूपण जोड़ते समय, विकृत घटक के किनारों पर डरावने ब्लैक होल दिखाई देते हैं। मैं इसे दूर नहीं कर सका और हार्डवेयर परतों को हटा दिया। लेकिन ऐसा लगता है कि उनके बिना, मेरा गैलेक्सी नेक्सस बहुत आसानी से काम करता है।

तेजी से स्क्रॉलिंग के दौरान एक दोष से छुटकारा पाएं

प्रयोगों की एक श्रृंखला के बाद, मैं इस निष्कर्ष पर पहुंचा कि अवांछित दोषों से छुटकारा पाने के लिए, मुझे दो बिंदुओं का प्रदर्शन करने की आवश्यकता है:

• जब स्क्रॉलिंग एक निश्चित गति सीमा से अधिक हो जाए तो एनीमेशन बंद करें
• इस मामले में सभी पहले से चल रहे एनिमेशन रद्द करें

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

गति की गणना करने के लिए, मैंने कोड को थोड़ा संशोधित किया:

 listView.setOnScrollListener(new OnScrollListener() { private int previousFirstVisibleItem = 0; private long previousEventTime = 0; private double speed = 0; private int scrollState; @Override public void onScrollStateChanged(AbsListView view, int scrollState) { this.scrollState = scrollState; adapter.setAnimate(scrollState == SCROLL_STATE_FLING || SCROLL_STATE_TOUCH_SCROLL == scrollState); } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { if (previousFirstVisibleItem != firstVisibleItem) { long currTime = System.currentTimeMillis(); long timeToScrollOneElement = currTime - previousEventTime; speed = ((double) 1 / timeToScrollOneElement) * 1000; previousFirstVisibleItem = firstVisibleItem; previousEventTime = currTime; if (scrollState == SCROLL_STATE_FLING && speed > 16) { adapter.setAnimate(false); adapter.cancelAnimations(); } else { adapter.setAnimate(true); } } } }); 

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

एडॉप्टर में, मैं एक विधि जोड़ता हूं:

  public void cancelAnimations() { for (int i = anims.size() - 1; i >= 0; i--) { anims.get(i).cancel(); } } 

और मैं श्रोता एनीमेशन को संशोधित करता हूं। अंतिम संस्करण में, यह इस तरह दिखता है:

 private class AnimatorWithLayerListener implements AnimatorListener { View view; public AnimatorWithLayerListener(View view) { this.view = view; } @Override public void onAnimationStart(Animator animation) { ViewCompat.setHasTransientState(view, true); } @Override public void onAnimationEnd(Animator animation) { ViewCompat.setHasTransientState(view, false); anims.remove(animation); } @Override public void onAnimationCancel(Animator animation) { view.setTranslationX(0); view.setTranslationY(0); ((SkewingRelativeLayout) view).setSkewX(0); } @Override public void onAnimationRepeat(Animator animation) { } } 

अब, जब आप एनीमेशन को रद्द करते हैं, तो हम तुरंत सभी ऑफसेट और विकृतियों को हटा देते हैं। यह तुरंत ध्यान दिया जाना चाहिए कि onAnimationEnd विधि को हमेशा कहा जाता है: रद्द करने के दौरान और सामान्य समाप्ति के दौरान दोनों। इसलिए, यह रद्द करने के लिए इसके पास क्या है इसका कोई मतलब नहीं है।

यह भी महत्वपूर्ण है कि हम अपने तत्व को ध्वज सेट करें ViewCompat.setHasTransientState (दृश्य, असत्य)। आईसीएस के साथ शुरू होने वाला यह ध्वज सूची में एक तत्व को परिवर्तनीय के रूप में चिह्नित करना संभव बनाता है, और आंतरिक रूप से दृश्य को देखने पर सूची दृश्य इसे ध्यान में रखेगा। ViewPropertyAnimator यह हमारे लिए करता है, लेकिन ObjectAnimator के मामले में हमें इसे हाथ से करने की आवश्यकता है।

पीछे संगतता

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

 private void animatePreHc(int position, View v) { if (prevPosition < position) { v.clearAnimation(); v.startAnimation(AnimationUtils.loadAnimation(context, R.anim.pop_from_bottom)); } else { v.clearAnimation(); v.startAnimation(AnimationUtils.loadAnimation(context, R.anim.pop_from_top)); } } 

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

निष्कर्ष

हमेशा की तरह, मैं जो भी वर्णन करता हूं, वह बिल्कुल सार्वभौमिक और परिपूर्ण होने का दिखावा नहीं करता है, लेकिन मेरे मामले में यह बहुत अच्छी तरह से काम करता है, और मैं इसे साझा करना चाहता हूं।
शायद यदि आपके पास बहुत लंबी सूची है (मेरे पास वहां अधिकतम 10 तत्व टाइप हैं), तो आपको अतिरिक्त लेना होगा। getView में ऑब्जेक्ट्स के निर्माण को कम करने के लिए क्रियाएं। चूंकि एनिमेटरसेट पुन: उपयोग करने योग्य हो सकता है, इसलिए यह मुझे लगता है कि आप किसी प्रकार के ऑब्जेक्ट्स के उचित पूल को व्यवस्थित कर सकते हैं, लेकिन यह सब परे है जो मैं आपको बताना चाहता था, प्रिय सहयोगियों, इसलिए मुझे इसके लिए झुकना चाहिए।

जेड। एस। अगर कोई और अधिक पूर्ण स्रोत चाहता है - टिप्पणियों में पूछें कि समय कैसा होगा, तो मैं इस टुकड़े को परियोजना से पीऊंगा और इसे गीथूब पर डालूंगा, हालांकि जो किया जाना चाहिए उसका 95% इस लेख में परिलक्षित होता है।