Faire glisser une mise en page du bas de l'écran

Question

J'ai une mise en page cachée de la vue. Sur un clic de bouton, je veux le faire glisser à partir du bas en poussant tout le contenu de l'écran vers le haut, très similaire à la façon dont WhatsApp affiche le panneau d'émoticônes dans l'écran de discussion. 

J'ai vu SlidingDrawer, ça ne marche pas pour moi. Cela nécessite une image en tant que poignée qui est affichée au centre de l'écran, je ne le veux pas. Il glisse également sur le contenu de l'écran existant, je cherche un moyen de déplacer le contenu existant vers le haut.

Mise à jour 1:

J'ai essayé d'utiliser les animations proposées par Sanket Kachhela. Mais la mise en page cachée n'est jamais montrée. Voici le code.

Mise en page (activity_main.xml):

<RelativeLayout
    Android:id="@+id/main_screen"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/hello_world" 
        Android:layout_alignParentTop="true"/>

     <TextView
       Android:layout_width="wrap_content"
       Android:layout_height="wrap_content"
       Android:text="@string/hello_world" 
       Android:layout_centerInParent="true"/>

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Slide up / down"
        Android:layout_alignParentBottom="true" 
        Android:onClick="slideUpDown"/>

</RelativeLayout>

<RelativeLayout
    Android:id="@+id/hidden_panel"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content" 
    Android:layout_below="@id/main_screen">

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/app_name" />

</RelativeLayout>

Activité (MainActivity.Java):

package com.example.slideuplayout;

import Android.app.Activity;
import Android.os.Bundle;
import Android.view.Menu;
import Android.view.View;
import Android.view.ViewGroup;
import Android.view.animation.Animation;
import Android.view.animation.AnimationUtils;

public class MainActivity extends Activity {

private ViewGroup hiddenPanel;
private boolean isPanelShown;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel);
    hiddenPanel.setVisibility(View.INVISIBLE);
    isPanelShown = false;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

public void slideUpDown(final View view) {
    if(!isPanelShown) {
        // Show the panel
        Animation bottomUp = AnimationUtils.loadAnimation(this,
                R.anim.bottom_up);

        hiddenPanel.startAnimation(bottomUp);
        hiddenPanel.setVisibility(View.VISIBLE);
        isPanelShown = true;
    }
    else {
        // Hide the Panel
        Animation bottomDown = AnimationUtils.loadAnimation(this,
                R.anim.bottom_down);

        hiddenPanel.startAnimation(bottomDown);
        hiddenPanel.setVisibility(View.INVISIBLE);
        isPanelShown = false;
    }
}

}

Animations:

bottom_up.xml:

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <translate 
       Android:fromYDelta="75%p"
       Android:toYDelta="0%p"
       Android:fillAfter="true"
       Android:duration="500" />
</set>

bottom_down.xml:

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:Android="http://schemas.Android.com/apk/res/Android">
<translate 
    Android:fromYDelta="0%p" 
    Android:toYDelta="100%p" 
    Android:fillAfter="true"
    Android:interpolator="@Android:anim/linear_interpolator"
    Android:duration="500" />
</set>

Des idées comment cela peut être fait?

Merci.

Answer 1

Utilisez ces animations:

bottom_up.xml

<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:Android="http://schemas.Android.com/apk/res/Android">
   <translate Android:fromYDelta="75%p" Android:toYDelta="0%p" 
    Android:fillAfter="true"
 Android:duration="500"/>
</set>

bottom_down.xml

 <?xml version="1.0" encoding="utf-8"?>
 <set xmlns:Android="http://schemas.Android.com/apk/res/Android">

<translate Android:fromYDelta="0%p" Android:toYDelta="100%p" Android:fillAfter="true"
            Android:interpolator="@Android:anim/linear_interpolator"
    Android:duration="500" />

</set>

Utilisez ce code dans votre activité pour masquer/animer votre vue:

Animation bottomUp = AnimationUtils.loadAnimation(getContext(),
            R.anim.bottom_up);
ViewGroup hiddenPanel = (ViewGroup)findViewById(R.id.hidden_panel);
hiddenPanel.startAnimation(bottomUp);
hiddenPanel.setVisibility(View.VISIBLE);

Answer 2

Tu étais proche. La clé est que la disposition masquée se gonfle à match_parent en taille et en poids. Commencez simplement par View.GONE. De cette façon, l’utilisation du pourcentage dans les animateurs fonctionne correctement.

Mise en page (activity_main.xml):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/main_screen"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:text="@string/hello_world" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerInParent="true"
        Android:text="@string/hello_world" />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:onClick="slideUpDown"
        Android:text="Slide up / down" />

    <RelativeLayout
        Android:id="@+id/hidden_panel"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:background="@Android:color/white"
        Android:visibility="gone" >

        <Button
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:text="@string/app_name"
            Android:layout_centerInParent="true"
            Android:onClick="slideUpDown" />
    </RelativeLayout>

</RelativeLayout>

Activité (MainActivity.Java):

import Android.app.Activity;
import Android.os.Bundle;
import Android.view.View;
import Android.view.ViewGroup;
import Android.view.animation.Animation;
import Android.view.animation.AnimationUtils;

public class OffscreenActivity extends Activity {
    private View hiddenPanel;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        hiddenPanel = findViewById(R.id.hidden_panel);
    }

    public void slideUpDown(final View view) {
        if (!isPanelShown()) {
            // Show the panel
            Animation bottomUp = AnimationUtils.loadAnimation(this,
                    R.anim.bottom_up);

            hiddenPanel.startAnimation(bottomUp);
            hiddenPanel.setVisibility(View.VISIBLE);
        }
        else {
            // Hide the Panel
            Animation bottomDown = AnimationUtils.loadAnimation(this,
                    R.anim.bottom_down);

            hiddenPanel.startAnimation(bottomDown);
            hiddenPanel.setVisibility(View.GONE);
        }
    }

    private boolean isPanelShown() {
        return hiddenPanel.getVisibility() == View.VISIBLE;
    }

}

La seule autre chose que j'ai changée était dans bottom_up.xml. Au lieu de

Android:fromYDelta="75%p"

J'ai utilisé:

Android:fromYDelta="100%p"

Mais c'est une question de préférence, je suppose.

Answer 3

Il vous suffit d'ajouter une ligne dans votre application, veuillez la trouver à partir du lien ci-dessous:

Afficher et masquer une vue avec une animation de diapositive haut/bas

Ajoutez simplement une animation à votre mise en page comme ceci:

mLayoutTab.animate()
  .translationYBy(120)
  .translationY(0)
  .setDuration(getResources().getInteger(Android.R.integer.config_mediumAnimTime));

Answer 4

Voici ce qui a finalement fonctionné pour moi.

Layouts:

activity_main.xml

<RelativeLayout
    Android:id="@+id/main_screen"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" 
    Android:layout_alignParentTop="true"
    Android:layout_alignParentBottom="true">

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/hello_world" 
        Android:layout_alignParentTop="true"/>

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/hello_world"
        Android:layout_centerInParent="true" />

    <Button
        Android:id="@+id/slideButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Slide up / down"
        Android:layout_alignParentBottom="true" 
        Android:onClick="slideUpDown"/>

</RelativeLayout>

hidden_panel.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/hidden_panel"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical" >
    <Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="Test" />
</LinearLayout>

Java: package com.example.slideuplayout;

import Android.app.Activity;
import Android.os.Bundle;
import Android.view.Menu;
import Android.view.View;
import Android.view.ViewGroup;
import Android.view.ViewTreeObserver;
import Android.view.ViewTreeObserver.OnGlobalLayoutListener;
import Android.view.animation.Animation;
import Android.view.animation.Animation.AnimationListener;
import Android.view.animation.AnimationUtils;

public class MainActivity extends Activity {

private ViewGroup hiddenPanel;
private ViewGroup mainScreen;
private boolean isPanelShown;
private ViewGroup root;

int screenHeight = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mainScreen = (ViewGroup)findViewById(R.id.main_screen);
    ViewTreeObserver vto = mainScreen.getViewTreeObserver(); 
    vto.addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
        @Override 
        public void onGlobalLayout() { 
            screenHeight = mainScreen.getHeight();
            mainScreen.getViewTreeObserver().removeGlobalOnLayoutListener(this); 
        } 
    }); 

    root = (ViewGroup)findViewById(R.id.root);

    hiddenPanel = (ViewGroup)getLayoutInflater().inflate(R.layout.hidden_panel, root, false);
    hiddenPanel.setVisibility(View.INVISIBLE);

    root.addView(hiddenPanel);

    isPanelShown = false;
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

public void slideUpDown(final View view) {
    if(!isPanelShown) {
        // Show the panel
        mainScreen.layout(mainScreen.getLeft(),
                          mainScreen.getTop() - (screenHeight * 25/100), 
                          mainScreen.getRight(),
                          mainScreen.getBottom() - (screenHeight * 25/100));



        hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight);
        hiddenPanel.setVisibility(View.VISIBLE);

        Animation bottomUp = AnimationUtils.loadAnimation(this,
                R.anim.bottom_up);

        hiddenPanel.startAnimation(bottomUp);

        isPanelShown = true;
    }
    else {
        isPanelShown = false;

        // Hide the Panel
        Animation bottomDown = AnimationUtils.loadAnimation(this,
                R.anim.bottom_down);
        bottomDown.setAnimationListener(new AnimationListener() {

            @Override
            public void onAnimationStart(Animation arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationRepeat(Animation arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onAnimationEnd(Animation arg0) {
                isPanelShown = false;

                mainScreen.layout(mainScreen.getLeft(),
                          mainScreen.getTop() + (screenHeight * 25/100), 
                          mainScreen.getRight(),
                          mainScreen.getBottom() + (screenHeight * 25/100));

                hiddenPanel.layout(mainScreen.getLeft(), mainScreen.getBottom(), mainScreen.getRight(), screenHeight);
            }
        });
        hiddenPanel.startAnimation(bottomDown);
    }
}
}

Answer 5

Utilisez cette mise en page. Si vous souhaitez animer le rétrécissement de la vue principale, vous devez ajouter une animation à la hauteur de la barre masquée. Il peut être suffisant d'utiliser l'animation de traduction sur la barre et de faire en sorte que la hauteur de la vue principale soit sautée au lieu d'être animée.

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical" >

<RelativeLayout
    Android:id="@+id/main_screen"
    Android:layout_width="match_parent"
    Android:layout_height="0dp"
    Android:layout_weight="1" >

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true"
        Android:text="@string/hello_world" />

    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_centerInParent="true"
        Android:text="@string/hello_world" />

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true"
        Android:onClick="slideUpDown"
        Android:text="Slide up / down" />
</RelativeLayout>

<RelativeLayout
    Android:id="@+id/hidden_panel"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:background="#fcc"
    Android:visibility="visible" >

    <Button
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="@string/app_name" />
</RelativeLayout>

</LinearLayout>

Answer 6

Ok, il y a deux approches possibles. Le plus simple - consiste à utiliser un menu coulissant bibliothèque. Il permet de créer un menu coulissant inférieur, il peut animer le conteneur supérieur pour rendre le bas visible, il permet de le faire glisser avec votre doigt ou de l’animer par programme via le bouton (StaticDrawer).

Plus difficile - si vous voulez utiliser des animations, comme cela a déjà été suggéré. Avec les animations, vous devez d'abord modifier vos mises en page. Alors essayez d’abord de faire passer votre mise en page à l’état final sans aucune animation. Comme il est très probable que vous ne présentez pas correctement vos vues dans RelativeLayout, même si vous affichez votre vue de dessous, celle-ci reste masquée par celle du dessus. Une fois les modifications apportées à la présentation, il vous suffit de mémoriser les traductions avant la présentation et d'appliquer l'animation de traduction APRÈS la présentation.

Answer 7

Essayez ce code ci-dessous, son très court et simple. 

transalate_anim.xml

<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) 2013 The Android Open Source Project

     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at

          http://www.Apache.org/licenses/LICENSE-2.0

     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
     See the License for the specific language governing permissions and
     limitations under the License.
-->
<set xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <translate
        Android:duration="4000"
        Android:fromXDelta="0"
        Android:fromYDelta="0"
        Android:repeatCount="infinite"
        Android:toXDelta="0"
        Android:toYDelta="-90%p" />

    <alpha xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:duration="4000"
        Android:fromAlpha="0.0"
        Android:repeatCount="infinite"
        Android:toAlpha="1.0" />
</set>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.naveen.congratulations.MainActivity">


    <ImageView
        Android:id="@+id/image_1"
        Android:layout_width="50dp"
        Android:layout_height="50dp"
        Android:layout_marginBottom="8dp"
        Android:layout_marginStart="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:srcCompat="@drawable/balloons" />
</Android.support.constraint.ConstraintLayout>

MainActivity.Java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ImageView imageView1 = (ImageView) findViewById(R.id.image_1);
        imageView1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startBottomToTopAnimation(imageView1);
            }
        });

    }

    private void startBottomToTopAnimation(View view) {
        view.startAnimation(AnimationUtils.loadAnimation(this, R.anim.translate_anim));
    }
}

 

Answer 8

Mon code pour faire de l'animation glisser vers le haut, glisser vers le bas sans XML

private static ObjectAnimator createBottomUpAnimation(View view,
        AnimatorListenerAdapter listener, float distance) {
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", -distance);
//        animator.setDuration(???)
    animator.removeAllListeners();
    if (listener != null) {
        animator.addListener(listener);
    }
    return animator;
}

public static ObjectAnimator createTopDownAnimation(View view, AnimatorListenerAdapter listener,
        float distance) {
    view.setTranslationY(-distance);
    ObjectAnimator animator = ObjectAnimator.ofFloat(view, "translationY", 0);
    animator.removeAllListeners();
    if (listener != null) {
        animator.addListener(listener);
    }
    return animator;
}

Utilisation de Pour glisser vers le bas

createTopDownAnimation(myYellowView, null, myYellowView.getHeight()).start();

Pour glisser 

createBottomUpAnimation(myYellowView, null, myYellowView.getHeight()).start();

 

Answer 9

Voici une solution en tant qu’extension de [ https://stackoverflow.com/a/46644736/10249774]

Le panneau inférieur est pousse le contenu principal vers le haut 

https://imgur.com/a/6nxewE0

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
    Android:id="@+id/my_button"
    Android:layout_marginTop="10dp"
    Android:onClick="onSlideViewButtonClick"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"/>
<LinearLayout
Android:id="@+id/main_view"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:orientation="vertical"
Android:gravity="center_horizontal">
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main "
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main"
    Android:textSize="70dp"/>
<TextView
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="main"
    Android:textSize="70dp"/>
</LinearLayout>
<LinearLayout
    Android:id="@+id/footer_view"
    Android:background="#a6e1aa"
    Android:orientation="vertical"
    Android:gravity="center_horizontal"
    Android:layout_alignParentBottom="true"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content">
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="footer content"
        Android:textSize="40dp" />
    <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="footer content"
        Android:textSize="40dp" />
  </LinearLayout>
</RelativeLayout>

Activité principale:

import Android.support.v7.app.AppCompatActivity;
import Android.os.Bundle;
import Android.view.View;
import Android.view.animation.TranslateAnimation;
import Android.widget.Button;

public class MainActivity extends AppCompatActivity {
private Button myButton;
private View footerView;
private View mainView;
private boolean isUp;
private int anim_duration = 700;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    footerView = findViewById(R.id.footer_view);
    mainView = findViewById(R.id.main_view);
    myButton = findViewById(R.id.my_button);

    // initialize as invisible (could also do in xml)
    footerView.setVisibility(View.INVISIBLE);
    myButton.setText("Slide up");
    isUp = false;
}
public void slideUp(View mainView , View footer_view){
    footer_view.setVisibility(View.VISIBLE);
    TranslateAnimation animate_footer = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            footer_view.getHeight(),  // fromYDelta
            0);                // toYDelta
    animate_footer.setDuration(anim_duration);
    animate_footer.setFillAfter(true);
    footer_view.startAnimation(animate_footer);

    mainView.setVisibility(View.VISIBLE);
    TranslateAnimation animate_main = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            0,  // fromYDelta
            (0-footer_view.getHeight()));                // toYDelta
    animate_main.setDuration(anim_duration);
    animate_main.setFillAfter(true);
    mainView.startAnimation(animate_main);
}
public void slideDown(View mainView , View footer_view){
    TranslateAnimation animate_footer = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            0,                 // fromYDelta
            footer_view.getHeight()); // toYDelta
    animate_footer.setDuration(anim_duration);
    animate_footer.setFillAfter(true);
    footer_view.startAnimation(animate_footer);


    TranslateAnimation animate_main = new TranslateAnimation(
            0,                 // fromXDelta
            0,                 // toXDelta
            (0-footer_view.getHeight()),  // fromYDelta
            0);                // toYDelta
    animate_main.setDuration(anim_duration);
    animate_main.setFillAfter(true);
    mainView.startAnimation(animate_main);
}

public void onSlideViewButtonClick(View view) {
    if (isUp) {
        slideDown(mainView , footerView);
        myButton.setText("Slide up");
    } else {
        slideUp(mainView , footerView);
        myButton.setText("Slide down");
    }
    isUp = !isUp;
}
}

Answer 10

Vous pouvez définir l'écran principal et l'autre écran que vous souhaitez faire défiler vers le haut en tant que fragments. Lorsque le bouton de l'écran principal est enfoncé, le fragment envoie un message à l'activité, qui remplace alors l'écran principal par celui que vous souhaitez faire défiler et animer le remplacement.