फ्रैगमेंट ट्रांजेक्शन एनिमेशन: स्लाइड इन और स्लाइड आउट


104

मैंने टुकड़ों के बीच चेतन लेनदेन के लिए कुछ ट्यूटोरियल की जाँच की है। मैंने एनीमेशन के लिए इस विधि का उपयोग किया है और यह काम करता है:

fragmentTransaction.setCustomAnimations(android.R.anim.slide_in_left,
                android.R.anim.slide_out_right);

लेकिन मैं इस एनीमेशन को उल्टा करना चाहता हूं: बाईं ओर पुरानी खंड स्लाइड, और दाईं ओर नई खंड स्लाइड, लेकिन R.animफ़ाइल का कोई भी मूल्य मेरे दायरे के लिए उपयोगी नहीं लगता है।

मैं यह कैसे कर सकता हूं?


मेरी राय में आप override key_code==back_key_pressअपने दूसरे टुकड़े में कोशिश कर सकते हैं।
नितिन मिश्रा

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

1
यहां उत्तर दिया गया: stackoverflow.com/questions/10886669/…
कार्स्टन

जवाबों:


278

Android V19 के लिए अपडेट करें + इस लिंक को @Sandra के माध्यम से देखें

आप अपने खुद के एनिमेशन बना सकते हैं। में एनिमेशन XML फ़ाइलें रखेंres > anim

enter_from_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate 
      android:fromXDelta="-100%p" android:toXDelta="0%"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="@android:integer/config_mediumAnimTime"/>
</set>

enter_from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
     android:fromXDelta="100%p" android:toXDelta="0%"
     android:fromYDelta="0%" android:toYDelta="0%"
     android:duration="@android:integer/config_mediumAnimTime" />
</set>

exit_to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate 
      android:fromXDelta="0%" android:toXDelta="-100%p"
      android:fromYDelta="0%" android:toYDelta="0%"
      android:duration="@android:integer/config_mediumAnimTime"/>
</set>

exit_to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
     android:fromXDelta="0%" android:toXDelta="100%p"
     android:fromYDelta="0%" android:toYDelta="0%"
     android:duration="@android:integer/config_mediumAnimTime" />
</set>

आप अवधि को लघु एनीमेशन समय में बदल सकते हैं

android:duration="@android:integer/config_shortAnimTime"

या लंबे एनीमेशन समय

android:duration="@android:integer/config_longAnimTime" 

उपयोग (ध्यान दें कि जिस क्रम में आप लेन-देन के मामलों पर कॉल करते हैं, उससे पहले आप .replace, .commit) पर एनिमेशन जोड़ें।

FragmentTransaction transaction = supportFragmentManager.beginTransaction();
transaction.setCustomAnimations(R.anim.enter_from_right, R.anim.exit_to_left, R.anim.enter_from_left, R.anim.exit_to_right);
transaction.replace(R.id.content_frame, fragment);
transaction.addToBackStack(null);
transaction.commit();

29
टुकड़ों की जगह पर इन xml एनिमेशन का उपयोग करें, अर्थात: fragmentTransaction.setCustomAnimations (R.anim.enter_from_right, R.anim.exit_to_left, R.anim.enter_from_left, R.anim.exit_to_right); fragmentTransaction.replace (R.id.content_frame, fragDettRisersa); fragmentTransaction.addToBackStack (शून्य); fragmentTransaction.commit ();
मूंडॉइड

11
इसका नाम अज्ञात एनिमेटर नाम है: अनुवाद
हीरक छब्बर

9
यह काम नहीं करता ... "java.lang.RuntimeException: अज्ञात एनिमेटर नाम: अनुवाद" के कारण। इस समाधान ने मेरे लिए काम किया। trickyandroid.com/fragments-translate-animation
Ataru

27
700मेरी राय में, इस तरह के एनिमेशन के लिए अवधि थोड़ी अधिक है। एंड्रॉयड ढांचे समय के लिए 3 प्रीसेट है: android:duration="@android:integer/config_longAnimTime", android:duration="@android:integer/config_mediumAnimTime"और android:duration="@android:integer/config_shortAnimTime"है, जो 500, 400 और 200 से मेल खाती है मुझे लगता है कि इकाई मिलीसेकेंड है, लेकिन मुझे यकीन है कि नहीं हूँ।
Krøllebølle

6
समर्थन अंशों का उपयोग करते समय ही काम करता है (android.support.v4.app.Fragment)
अवीव बेन शाबट

37

टुकड़े में एनीमेशन को लेन-देन करने का तीन तरीका है।

संक्रमण

तो अंतर्निहित संक्रमणों में से एक का उपयोग करने की आवश्यकता है, सेटट्रेनशन () विधि का उपयोग करें:

getSupportFragmentManager()
        .beginTransaction()
        .setTransition( FragmentTransaction.TRANSIT_FRAGMENT_OPEN )
        .show( m_topFragment )
        .commit()

कस्टम एनिमेशन

आप setCustomAnimations () विधि का उपयोग करके एनीमेशन को भी अनुकूलित कर सकते हैं:

getSupportFragmentManager()
        .beginTransaction()
        .setCustomAnimations( R.anim.slide_up, 0, 0, R.anim.slide_down)
        .show( m_topFragment )
        .commit()

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:propertyName="translationY"
        android:valueType="floatType"
        android:valueFrom="1280"
        android:valueTo="0"
        android:duration="@android:integer/config_mediumAnimTime"/>

slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:propertyName="translationY"
        android:valueType="floatType"
        android:valueFrom="0"
        android:valueTo="1280"
        android:duration="@android:integer/config_mediumAnimTime"/>

एकाधिक एनिमेशन

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

getSupportFragmentManager()
        .beginTransaction()
        .setCustomAnimations( R.anim.abc_slide_in_top, R.anim.abc_slide_out_top ) // Top Fragment Animation
        .show( m_topFragment )
        .setCustomAnimations( R.anim.abc_slide_in_bottom, R.anim.abc_slide_out_bottom ) // Bottom Fragment Animation
        .show( m_bottomFragment )
        .commit()

अधिक विवरण के लिए आप URL पर जा सकते हैं

नोट: - आप अपनी आवश्यकता के अनुसार एनीमेशन की जांच कर सकते हैं क्योंकि ऊपर समस्या हो सकती है।


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

@ TheLibrarianCz यह सिर्फ उदाहरण है
duggu

1
यह है और यह नहीं है।
लाइब्रेरियन

यह निर्भर करता है कि कुछ लोग ऊपर के उदाहरण से चम्मच खिलाना चाहते हैं या सबक लेना चाहते हैं कि वे उदाहरण के साथ क्या हासिल कर सकते हैं।
डुग्गू

m_topFragment वैरिएबल में क्या है
प्रिंस

6

मेरे पास एक ही मुद्दा है, मैंने सरल समाधान का उपयोग किया है

1) एनीमेशन फ़ोल्डर में स्लाइडिंग_आउट_राइट.एक्सएमएल बनाएं

  <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate android:fromXDelta="0" android:toXDelta="-50%p"
            android:duration="@android:integer/config_mediumAnimTime"/>
        <alpha android:fromAlpha="1.0" android:toAlpha="0.0"
            android:duration="@android:integer/config_mediumAnimTime" />
    </set>

2) एनीमेशन फ़ोल्डर में रपट_इन_लेफ्ट.एक्सएमएल बनाएं

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="50%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
    <alpha android:fromAlpha="0.0" android:toAlpha="1.0"
        android:duration="@android:integer/config_mediumAnimTime" />
</set>

3) केवल दो कस्टम xml और एनीमेशन के लिए दो डिफ़ॉल्ट xml के साथ टुकड़ा लेनदेन setCustomeAnimations () का उपयोग कर रहे हैं: -

 fragmentTransaction.setCustomAnimations(R.anim.sliding_in_left, R.anim.sliding_out_right, android.R.anim.slide_in_left, android.R.anim.slide_out_right );

5

slide_in_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_longAnimTime"
        android:fromYDelta="0%p"
        android:toYDelta="100%p" />
</set>

slide_in_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_longAnimTime"
        android:fromYDelta="100%p"
        android:toYDelta="0%p" />
</set>

slide_out_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_longAnimTime"
        android:fromYDelta="-100%"
        android:toYDelta="0"
        />
</set>

slide_out_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="@android:integer/config_longAnimTime"
        android:fromYDelta="0%p"
        android:toYDelta="-100%p"
        />
</set>

दिशा = नीचे

            activity.getSupportFragmentManager()
                    .beginTransaction()
                    .setCustomAnimations(R.anim.slide_out_down, R.anim.slide_in_down)
                    .replace(R.id.container, new CardFrontFragment())
                    .commit();

दिशा = ऊपर

           activity.getSupportFragmentManager()
                    .beginTransaction()
                    .setCustomAnimations(R.anim.slide_in_up, R.anim.slide_out_up)
                    .replace(R.id.container, new CardFrontFragment())
                    .commit();

2

यह एक और उपाय है जो मैं उपयोग करता हूं:

public class CustomAnimator {
    private static final String TAG = "com.example.CustomAnimator";

    private static Stack<AnimationEntry> animation_stack    = new Stack<>();

    public static final int                 DIRECTION_LEFT  = 1;
    public static final int                 DIRECTION_RIGHT = -1;
    public static final int                 DIRECTION_UP    = 2;
    public static final int                 DIRECTION_DOWN  = -2;

    static class AnimationEntry {
        View in;
        View    out;
        int     direction;
        long    duration;
    }

    public static boolean hasHistory() {
        return !animation_stack.empty();
    }

    public static void reversePrevious() {
        if (!animation_stack.empty()) {
            AnimationEntry entry = animation_stack.pop();
            slide(entry.out, entry.in, -entry.direction, entry.duration, false);
        }
    }

    public static void clearHistory() {
        animation_stack.clear();
    }

    public static void slide(final View in, View out, final int direction, long duration) {
        slide(in, out, direction, duration, true);
    }

    private static void slide(final View in, final View out, final int direction, final long duration, final boolean save) {

        ViewGroup in_parent = (ViewGroup) in.getParent();
        ViewGroup out_parent = (ViewGroup) out.getParent();

        if (!in_parent.equals(out_parent)) {
            return;
        }

        int parent_width = in_parent.getWidth();
        int parent_height = in_parent.getHeight();

        ObjectAnimator slide_out;
        ObjectAnimator slide_in;

        switch (direction) {
            case DIRECTION_LEFT:
            default:
                slide_in = ObjectAnimator.ofFloat(in, "translationX", parent_width, 0);
                slide_out = ObjectAnimator.ofFloat(out, "translationX", 0, -out.getWidth());
                break;
            case DIRECTION_RIGHT:
                slide_in = ObjectAnimator.ofFloat(in, "translationX", -out.getWidth(), 0);
                slide_out = ObjectAnimator.ofFloat(out, "translationX", 0, parent_width);
                break;
            case DIRECTION_UP:
                slide_in = ObjectAnimator.ofFloat(in, "translationY", parent_height, 0);
                slide_out = ObjectAnimator.ofFloat(out, "translationY", 0, -out.getHeight());
                break;
            case DIRECTION_DOWN:
                slide_in = ObjectAnimator.ofFloat(in, "translationY", -out.getHeight(), 0);
                slide_out = ObjectAnimator.ofFloat(out, "translationY", 0, parent_height);
                break;
        }

        AnimatorSet animations = new AnimatorSet();
        animations.setDuration(duration);
        animations.playTogether(slide_in, slide_out);
        animations.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationCancel(Animator arg0) {
            }

            @Override
            public void onAnimationEnd(Animator arg0) {
                out.setVisibility(View.INVISIBLE);
                if (save) {
                    AnimationEntry ae = new AnimationEntry();
                    ae.in = in;
                    ae.out = out;
                    ae.direction = direction;
                    ae.duration = duration;
                    animation_stack.push(ae);
                }
            }

            @Override
            public void onAnimationRepeat(Animator arg0) {
            }

            @Override
            public void onAnimationStart(Animator arg0) {
                in.setVisibility(View.VISIBLE);
            }
        });
        animations.start();
    }
}

कक्षा का उपयोग। मान लें कि आपके पास नीचे दिखाए गए अनुसार दो टुकड़े (सूची और विवरण टुकड़े) हैं

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ui_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/list_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <FrameLayout
        android:id="@+id/details_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />
</FrameLayout>

प्रयोग

View details_container = findViewById(R.id.details_container);
View list_container = findViewById(R.id.list_container);
// You can select the direction left/right/up/down and the duration
CustomAnimator.slide(list_container, details_container,CustomAnimator.DIRECTION_LEFT, 400);

CustomAnimator.reversePrevious();उपयोगकर्ता द्वारा वापस दबाए जाने पर आप पिछले दृश्य को प्राप्त करने के लिए फ़ंक्शन का उपयोग कर सकते हैं ।


1
क्या आप वाकई Android के फ़्रैगमेंट का उपयोग कर रहे हैं? =) कस्टम टुकड़ा प्रबंधन दृश्य-आधारित प्रणाली का उपयोग कर की तरह लगता है)
चूमा
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.