Animation de la couche coulissante animation Android

Je souhaite implémenter une animation à couche coulissante pour la transition d'activité comme décrit dans les directives de conception de matériaux.

Transition matérielle

Cependant, tout ce que je pourrais faire maintenant est une combinaison simple de slide_in et de rester une animation qui ne me donne pas un type d'effet de couche empilée. Comment puis-je l'atteindre?

Ma mise en œuvre actuelle:

En cours de début d'activité:

activity.overridePendingTransition(R.anim.slide_in_right, R.anim.stay); 

Sur Activité Fermer:

 activity.overridePendingTransition(R.anim.stay, R.anim.slide_out_right); 

Slide_in_right.xml:

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="100%p" android:toXDelta="0" android:duration="@android:integer/config_shortAnimTime" /> </set> 

Slide_out_right.xml:

 <set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator"> <translate android:fromXDelta="0" android:toXDelta="100%p" android:duration="@android:integer/config_shortAnimTime" /> </set> 

Stay.xml:

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

2 Solutions collect form web for “Animation de la couche coulissante animation Android”

J'ai finalement trouvé une solution pour cette question. Cela fonctionne parfaitement.

Les composants importants utilisés dans cette réponse:

  • BackActivity = activité de fond
  • FrontActivity = activité qui glisse devant
  • BackgroundView = le ViewGroup de base dans votre FrontActivity

La solution consiste à animer la mise en page de FrontActivity avant de fermer FrontActivity. Ceci n'est possible que si vous utilisez une barre d'outils intégrée dans votre mise en page en tant que votre barre d'action!

Je copierai mon code ici. Mon animation est une activité qui glisse en face du bas, et disparaît de nouveau en glissant vers le bas en avant de l'activité précédente. Vous pouvez facilement obtenir cet effet dans n'importe quelle direction en modifiant simplement les animations.


1) Diapositive FrontActivity in Over BackActivity
Appelez simplement overridePendingTransition lorsque vous démarrez FrontActivity depuis BackActivity.

 Intent intent = new Intent(activity, FrontActivity.class); startActivity(intent); overridePendingTransition(R.anim.slide_in_bottom, 0); 

Slide_in_bottom.xml

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

2) Lorsque vous revenez de FrontActivity à BackActivity, animez la mise en page de FrontActivity avant de fermer FrontActivity!

Je l'ai fait en appelant la méthode suivante dans mon onOptionsSelected() et mon onBackPressed() dans FrontActivity

 private void animateOut() { Animation slideAnim = AnimationUtils.loadAnimation(this,R.anim.slide_out_bottom); slideAnim.setFillAfter(true);; slideAnim.setAnimationListener(new AnimationListener() { public void onAnimationStart(Animation paramAnimation) { } public void onAnimationRepeat(Animation paramAnimation) { } public void onAnimationEnd(Animation paramAnimation) { finish(); // if you call NavUtils.navigateUpFromSameTask(activity); instead, // the screen will flicker once after the animation. Since FrontActivity is // in front of BackActivity, calling finish() should give the same result. overridePendingTransition(0, 0); } }); BackgroundView.startAnimation(slideAnim); } 

Slide_out_bottom.xml

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

3) Maintenant, nous devons nous assurer que BackActivity est visible derrière FrontActivity lorsqu'il est animé.
Nous devons travailler avec des thèmes transparents pour cela.

Styles.xml

 <resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- your theme --> </style> <style name="Theme.Transparent" parent="AppTheme"> <item name="android:windowIsTranslucent">true</item> <item name="android:windowBackground">@android:color/transparent</item> </style> </resources> 

4) Appliquer le thème transparent à FrontActivity dans votre manifeste:

AndroidManifest.xml

 <activity android:name=".FrontActivity" android:theme="@style/Theme.Transparent" android:parentActivityName=".BackActivity" /> 

5) Parce que votre activité est maintenant transparente, vous devrez ajouter un arrière-plan à BackgroundView. Les arrière-plans standard sont:

 android:background="@android:color/background_light" android:background="@android:color/background_dark" 

Front_activity.xml

 <?xml version="1.0" encoding="utf-8"?> <!-- This is BackgroundView and can be any ViewGroup --> <FrameLayout 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_height="match_parent" android:layout_width="match_parent" android:background="@android:color/background_light" > <android.support.v7.widget.Toolbar android:layout_height="@dimen/height_toolbar" android:layout_width="match_parent" android:minHeight="?attr/actionBarSize" android:background="?attr/colorPrimary" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" /> <!-- rest of layout --> </FrameLayout> 

C'est tout. L'animation devrait fonctionner maintenant.


MODIFIER

J'ai trouvé une solution qui ne scintille pas. L'animation semble impeccable.

Lorsque vous fermez FrontActivity, appelez finish au lieu de NavUtils.navigateUpFromSameTask(activity) . J'ai changé cela dans ma réponse.

Vous pouvez obtenir le comportement décrit en évitant tout simplement la transition entre les activités. J'incline également un effet de fade-shrink sur l'activité arrière pour améliorer son apparence:

Slide_in_right.xml

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

Slide_out_right.xml

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

Fade_back.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="@android:integer/config_shortAnimTime" android:pivotX="50.0%" android:pivotY="50.0%" android:fromXScale="1.0" android:toXScale="0.9" android:fromYScale="1.0" android:toYScale="0.9"/> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="1.0" android:toAlpha="0.7"/> </set> 

Fade_forward.xml

 <?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="@android:integer/config_shortAnimTime" android:pivotX="50.0%" android:pivotY="50.0%" android:fromXScale="0.9" android:toXScale="1.0" android:fromYScale="0.9" android:toYScale="1.0"/> <alpha android:duration="@android:integer/config_shortAnimTime" android:fromAlpha="0.7" android:toAlpha="1.0"/> </set> 

ParentActivity.java

Dans une classe parent commune pour vos activités, vous pouvez inclure votre code réutilisable:

 /* Activity transitions */ protected void slideInTransition() { overridePendingTransition(R.anim.slide_in_right, R.anim.fade_back); } protected void slideOutTransition() { overridePendingTransition(R.anim.fade_forward, R.anim.slide_out_right); } 

Ensuite, en début d'activité:

 startActivity(intent); slideInTransition(); 

Pour la transition vers l'arrière:

 @Override public void onBackPressed() { super.onBackPressed(); slideOutTransition(); } 
coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.