एंड्रॉइड सेटिस्फीबिलिटी के दौरान साधारण एनिमेशन जोड़ते हैं (देखें। कोई भी)

Question

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

मेरा XML

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:longClickable="false"
    android:orientation="vertical"
    android:weightSum="16" >

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#00DDA0"
    android:layout_weight="3" >
</LinearLayout>
 <TextView
        android:id="@+id/Information1"
        android:layout_width="match_parent"
        android:layout_height="1dp" 
        android:text="Child Information" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>

 <LinearLayout
     android:id="@+id/layout1"
     android:layout_width="fill_parent"
     android:layout_height="0dp"
     android:layout_weight="8.5"
     android:background="#BBBBBB"
     android:orientation="vertical" >

     <TextView
         android:id="@+id/textView1"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" />
 </LinearLayout>

  <TextView
        android:id="@+id/Information2"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:text="Parent Information" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>
  <LinearLayout 
          android:id="@+id/layout2"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#BBBBBB"
    android:layout_weight="8.5" >
     <TextView
         android:id="@+id/textView2"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" />
      </LinearLayout>
   <TextView
        android:id="@+id/Information3"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:text="Siblings" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>
   <LinearLayout 
          android:id="@+id/layout3"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#BBBBBB"
    android:layout_weight="8.5" >
     <TextView
         android:id="@+id/textView3"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" />
      </LinearLayout>
    <TextView
        android:id="@+id/Information4"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:text="Teacher Information" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>
    <LinearLayout 
          android:id="@+id/layout4"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#BBBBBB"
    android:layout_weight="8.5" >
     <TextView
         android:id="@+id/textView4"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" />
      </LinearLayout>
     <TextView
        android:id="@+id/Information5"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:text="Grade Information" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>
     <LinearLayout 
          android:id="@+id/layout5"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#BBBBBB"
    android:layout_weight="8.5" >
     <TextView
         android:id="@+id/textView5"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" />
      </LinearLayout>
      <TextView
        android:id="@+id/Information6"
        android:layout_width="match_parent"
        android:layout_height="0dp" 
        android:text="Health Information" 
        android:background="#0390BE"
        android:layout_weight="0.75"
        android:textColor="#FFFFFF"
        android:layout_gravity="center|fill_horizontal"/>
      <LinearLayout 
          android:id="@+id/layout6"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    android:background="#BBBBBB"
    android:layout_weight="8.5" >
    <TextView
         android:id="@+id/textView5"
         android:layout_width="match_parent"
         android:layout_height="match_parent"        
         android:text="TextView" 
         android:layout_weight="8.5" />
      </LinearLayout>

</LinearLayout>

मेरे जावा

public class Certify_Info extends Activity {

    private static TextView tv2,tv3,tv5,tv6,tv4,tv1;
    private static LinearLayout l1,l2,l3,l4,l5,l6;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_certify__info);

        tv1=(TextView) findViewById(R.id.Information1);
        tv2=(TextView) findViewById(R.id.Information2);
        tv3=(TextView) findViewById(R.id.Information3);
        tv4=(TextView) findViewById(R.id.Information4);
        tv5=(TextView) findViewById(R.id.Information5);
        tv6=(TextView) findViewById(R.id.Information6); 

        l1=(LinearLayout) findViewById(R.id.layout1);
        l2=(LinearLayout) findViewById(R.id.layout2);
        l3=(LinearLayout) findViewById(R.id.layout3);
        l4=(LinearLayout) findViewById(R.id.layout4);
        l5=(LinearLayout) findViewById(R.id.layout5);
        l6=(LinearLayout) findViewById(R.id.layout6); 

        l2.setVisibility(View.GONE);
        l3.setVisibility(View.GONE); 
        l4.setVisibility(View.GONE); 
        l5.setVisibility(View.GONE);
        l6.setVisibility(View.GONE);

        tv1.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l1.setVisibility(View.VISIBLE);
            }
        });
        tv2.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l2.setVisibility(View.VISIBLE);
            }
        });
        tv3.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l3.setVisibility(View.VISIBLE);

            }
        });
        tv4.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.GONE);
                l4.setVisibility(View.VISIBLE); 
            }
        });
        tv5.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l6.setVisibility(View.GONE);
                l5.setVisibility(View.VISIBLE); 
            }
        });
        tv6.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                l1.setVisibility(View.GONE);
                l2.setVisibility(View.GONE);
                l3.setVisibility(View.GONE); 
                l4.setVisibility(View.GONE); 
                l5.setVisibility(View.GONE);
                l6.setVisibility(View.VISIBLE);
            }
        });

    }
}

Answer 1

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

android:animateLayoutChanges="true"

अपने लेआउट में रूट नोड पर।

आपका दूसरा विकल्प मैन्युअल रूप से एनिमेशन जोड़ना होगा। इसके लिए मेरा सुझाव है कि आप एंड्रॉइड 3.0 (हनीकॉम्ब) में पेश किए गए नए एनीमेशन एपीआई का उपयोग करें। मैं आपको कुछ उदाहरण दे सकता हूं:

यह फीका पड़ता है View:

view.animate().alpha(0.0f);

यह इसे वापस fades:

view.animate().alpha(1.0f);

यह Viewअपनी ऊँचाई से नीचे जाता है:

view.animate().translationY(view.getHeight());

Viewकहीं और स्थानांतरित होने के बाद यह अपनी प्रारंभिक स्थिति में लौटता है:

view.animate().translationY(0);

आप setDuration()एनीमेशन की अवधि निर्धारित करने के लिए भी उपयोग कर सकते हैं । उदाहरण के लिए, यह View2 सेकंड की अवधि में समाप्त होता है:

view.animate().alpha(0.0f).setDuration(2000);

और आप जितने चाहें उतने एनिमेशन जोड़ सकते हैं, उदाहरण के लिए यह एक fades Viewऔर एक ही समय में 0.3 सेकंड की अवधि में नीचे ले जाता है:

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300);

और आप एनीमेशन के लिए एक श्रोता को भी असाइन कर सकते हैं और सभी प्रकार की घटनाओं पर प्रतिक्रिया कर सकते हैं। जैसे कि एनीमेशन कब शुरू होता है, कब खत्म होता है या दोहराता है आदि। अमूर्त वर्ग का उपयोग करके AnimatorListenerAdapterआपको AnimatorListenerएक ही बार में सभी कॉलबैक को लागू करने की आवश्यकता नहीं है , लेकिन केवल उन लोगों की आवश्यकता है जिन्हें आप की जरूरत है। यह कोड को अधिक पठनीय बनाता है। उदाहरण के लिए निम्न कोड View0.3 सेकंड (300 मिलीसेकंड) की अवधि में इसकी ऊँचाई से नीचे की ओर बढ़ता है और जब एनीमेशन किया जाता है तो इसकी दृश्यता सेट हो जाती है View.GONE।

view.animate()
        .translationY(view.getHeight())
        .alpha(0.0f)
        .setDuration(300)
        .setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                view.setVisibility(View.GONE);
            }
        });

Comments

@ नेटिक्स मैं उस सुपर कॉल को बेमानी नहीं कहूंगा। वहाँ कुछ भी गलत नहीं है सतही संपादन मत करो।

— Xaver कपेलर

क्या अच्छा है लेकिन उलटा सही तरीके से काम नहीं करता है क्यों? view.setVisibility (View.VISIBLE); अल्फा (1.0f) के साथ, 100 गद्दी शीर्ष के साथ दिखाई देते हैं ...

— delive

दृश्यता सेट करने से पहले स्पष्ट एनीमेशन होना चाहिए view.clearAnimation(); view.setVisibility(View.GONE);अन्यथा लेआउट अदृश्य रहेगा और चला नहीं जाएगा।

— एफटेकरी जुले

@Eftekhari वे सभी संसाधन गहन नहीं हैं। और अगर आपके पास Android संस्करण अद्यतित है, लेकिन फिर भी आप की तुलना में अंतराल का अनुभव करते हैं, तो शायद आपके पास कम मेमोरी या खराब ग्राफिक्स चिप वाला एक पुराना फोन है। और मैं एक नए पुस्तकालय के बारे में बात नहीं कर रहा हूं। एनीमेटर मूल निवासी हैं। वे एंड्रॉइड फ्रेमवर्क का हिस्सा हैं। वे 5 साल पहले जारी किए गए थे और आज 97.9% सभी डिवाइस उनका समर्थन करते हैं। एनिमेटरों का उपयोग न करने का कोई कारण नहीं है या कम से कम ViewCompat.animate()जो समर्थन पुस्तकालय का हिस्सा है और नए संस्करणों पर एनिमेटरों का उपयोग करता है और एंड्रॉइड 3.0 और नीचे के एनिमेशन देखें।

— Xaver कपेलर

लेकिन जब 97.9% सभी डिवाइस एंड्रॉइड 4.0 हैं और ऊपर कोई usecase नहीं बचा है ViewCompat.animate()।

— Xaver कपेलर

Answer 2

Visibilityपरिवर्तन को चेतन करने का सबसे आसान तरीका Transition APIसमर्थन (androidx) पैकेज में उपलब्ध है। बस कॉल करनाTransitionManager.beginDelayedTransition विधि फिर दृश्य की दृश्यता बदलें। वहाँ की तरह कई डिफ़ॉल्ट बदलाव कर रहे हैं Fade, Slide।

import androidx.transition.TransitionManager;
import androidx.transition.Transition;
import androidx.transition.Fade;

private void toggle() {
    Transition transition = new Fade();
    transition.setDuration(600);
    transition.addTarget(R.id.image);

    TransitionManager.beginDelayedTransition(parent, transition);
    image.setVisibility(show ? View.VISIBLE : View.GONE);
}

कहाँ पे parentViewGroup एनिमेटेड दृश्य के जनक है। परिणाम:

यहाँ Slideसंक्रमण के साथ परिणाम है :

import androidx.transition.Slide;

Transition transition = new Slide(Gravity.BOTTOM);

अगर आपको कुछ अलग चाहिए तो कस्टम ट्रांज़िशन लिखना आसान है। यहाँ उदाहरण है CircularRevealTransitionजिसके साथ मैंने एक अन्य उत्तर में लिखा था । यह CircularReveal एनीमेशन के साथ दृश्य दिखाता और छिपाता है।

Transition transition = new CircularRevealTransition();

android:animateLayoutChanges="true"विकल्प एक ही बात करता है, यह सिर्फ संक्रमण के रूप में AutoTransition का उपयोग करता है ।

Comments

@ThhidulIslam सं। यह कक्षाएं Androidx पैकेज में उपलब्ध हैं। सब कुछ पिछड़ा हुआ संगत है

— आशारोविच

एक दृश्य समूह के विस्तार / पतन के बारे में क्या?

— TheRealChx101

क्या आप कई beginDelayedTransitionएस कर सकते हैं ?

— ११:३३ पर Jeongbebs

Answer 3

कृपया इस लिंक को देखें। जो L2R, R2L, T2B, B2T एनिमेशन जैसे एनिमेशन की अनुमति देगा।

यह कोड बाएं से दाएं एनीमेशन दिखाता है

TranslateAnimation animate = new TranslateAnimation(0,view.getWidth(),0,0);
animate.setDuration(500);
animate.setFillAfter(true);
view.startAnimation(animate);
view.setVisibility(View.GONE);

यदि आप इसे R2L से करना चाहते हैं तो उपयोग करें

TranslateAnimation animate = new TranslateAnimation(0,-view.getWidth(),0,0);

ऊपर से नीचे तक

TranslateAnimation animate = new TranslateAnimation(0,0,0,view.getHeight());

और इसके विपरीत ..

Comments

यह दृश्य को उसकी मूल स्थिति से विस्थापित करता है।

— रेलम

Answer 4

इस लाइन को xml पैरेंट लेआउट में जोड़ने का प्रयास करें

 android:animateLayoutChanges="true"

आपका लेआउट इस तरह दिखाई देगा

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:animateLayoutChanges="true"
    android:longClickable="false"
    android:orientation="vertical"
    android:weightSum="16">

    .......other code here

    </LinearLayout>

Comments

यह मेरे लिए काम किया। मेरा सेटअप रूट दृश्य के रूप में एक बाधा लेआउट का उपयोग करता है। जब दृश्य View.VISIBLE पर सेट होता है, तो एनीमेशन दिखाया जाता है

— EdgeDev

बहुत ही सरल और सुरुचिपूर्ण समाधान

— नावेद अहमद

Answer 5

@Xaver कपेलर के उत्तर के आधार पर मैंने स्क्रैच एनीमेशन बनाने का एक तरीका निकाला, जब स्क्रीन पर नए दृश्य दिखाई देते हैं (और उन्हें छिपाने के लिए एनीमेशन भी)।

यह इस राज्य से जाता है:

• बटन
• अंतिम बटन

सेवा

• बटन
• बटन 1
• बटन २
• बटन ३
• बटन ४
• अंतिम बटन

और इसके विपरीत।

इसलिए, जब उपयोगकर्ता पहले बटन पर क्लिक करता है, तो तत्व "बटन 1", "बटन 2", "बटन 3" और "बटन 4" फीका एनीमेशन का उपयोग करते हुए दिखाई देंगे और तत्व "अंतिम बटन" अंत तक नीचे आ जाएगा। स्क्रॉल दृश्य का उपयोग करने की अनुमति देने के साथ ही लेआउट की ऊंचाई भी बदल जाएगी।

यह एनीमेशन के साथ तत्वों को दिखाने के लिए कोड है:

private void showElements() {
    // Precondition
    if (areElementsVisible()) {
        Log.w(TAG, "The view is already visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    // the alpha as 0.0. Otherwise the animation won't be shown
    mHiddenLinearLayout.setVisibility(View.VISIBLE);
    mHiddenLinearLayout.setAlpha(0.0f);
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(1.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    updateShowElementsButton();
                    mHiddenLinearLayout.animate().setListener(null);
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(mHiddenLinearLayoutHeight);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight() + mHiddenLinearLayoutHeight;
}

और यह एनीमेशन के तत्वों को छिपाने के लिए कोड है:

private void hideElements() {
    // Precondition
    if (!areElementsVisible()) {
        Log.w(TAG, "The view is already non-visible. Nothing to do here");
        return;
    }

    // Animate the hidden linear layout as visible and set
    mHiddenLinearLayout
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .alpha(0.0f)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    Log.v(TAG, "Animation ended. Set the view as gone");
                    super.onAnimationEnd(animation);
                    mHiddenLinearLayout.setVisibility(View.GONE);
                    // Hack: Remove the listener. So it won't be executed when
                    // any other animation on this view is executed
                    mHiddenLinearLayout.animate().setListener(null);
                    updateShowElementsButton();
                }
            })
    ;

    mLastButton
            .animate()
            .setDuration(ANIMATION_TRANSITION_TIME)
            .translationY(0);

    // Update the high of all the elements relativeLayout
    LayoutParams layoutParams = mAllElementsRelativeLayout.getLayoutParams();

    // TODO: Add vertical margins
    layoutParams.height = mLastButton.getHeight();
}

नोट एनीमेशन को छिपाने के लिए विधि पर एक सरल हैक है। एनीमेशन श्रोता mHiddenLinearLayout पर, मुझे उपयोग करके श्रोता को स्वयं निकालना था:

mHiddenLinearLayout.animate().setListener(null);

ऐसा इसलिए है क्योंकि एक बार जब कोई एनीमेशन श्रोता किसी दृश्य से जुड़ा होता है, तो अगली बार जब इस दृश्य में कोई एनीमेशन निष्पादित होता है, तो श्रोता को भी निष्पादित किया जाएगा। यह एनीमेशन श्रोता में बग हो सकता है।

परियोजना का स्रोत कोड GitHub पर है: https://github.com/jiahaoliuliu/ViewsAnimated

हैप्पी कोडिंग!

अद्यतन : विचारों से जुड़े किसी भी श्रोता के लिए, एनीमेशन समाप्त होने के बाद इसे हटा दिया जाना चाहिए। यह प्रयोग करके किया जाता है

view.animate().setListener(null);

Comments

यह एक सबसे अच्छा जवाब है

— नवीन कुमार M

view.animate().setListener(null);बयान मेरा दिन बचा लिया। यह निश्चित रूप से एक बग लगता है।

— मिशाल वियनस

@ मिचेलियन ग्लैड यह किया!

— जियाओ

Answer 6

मैं इस तरह से एक मेनू दिखाने / छिपाने में सक्षम था:

MenuView.java (फ्रेमलैट का विस्तार)

private final int ANIMATION_DURATION = 500;

public void showMenu()
{
    setVisibility(View.VISIBLE);
    animate()
            .alpha(1f)
            .setDuration(ANIMATION_DURATION)
            .setListener(null);
}

private void hideMenu()
{
    animate()
            .alpha(0f)
            .setDuration(ANIMATION_DURATION)
            .setListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    setVisibility(View.GONE);
                }
            });
}

स्रोत