2014-12-15 20 views
8

Chcę zaimplementować animację z warstwą ślizgową do przejścia działań zgodnie z opisem w wytycznych dotyczących projektowania materiałów.Animacja aktywności warstwy ślizgowej Android

Material Transition

Jednak wszystko, co mogłem zrobić, teraz jest prostą kombinacją slide_in i zatrzymać animację, która nie daje mi ułożone rodzaju warstwy skutku. Jak mogę to osiągnąć?

Moja obecna implementacja:

na działalności Start:

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

na aktywność zamknij

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" /> 
+1

Gdzie jest problem z tą implementacją? – TheRedFox

+1

@gauravsapiens czy znalazłeś odpowiedź na to pytanie? –

Odpowiedz

6

I w końcu znaleźć rozwiązanie tej kwestii. Działa bez zarzutu.

Istotne składniki stosowane w tej odpowiedzi:

  • BackActivity aktywność = tło
  • FrontActivity = aktywność, która przesuwa się w przód
  • BackgroundView = ViewGroup baza w FrontActivity

rozwiązaniem jest animacja układu FrontActivity przed zamknięciem FrontActivity. Jest to możliwe tylko wtedy, gdy pasek narzędzi zawiera pasek narzędzi zintegrowany z twoim układem!

Będę skopiować mój kod tutaj. Moja animacja to działanie, które przesuwa się z przodu od dołu i znika ponownie, przesuwając się na dół przed poprzednim działaniem. Możesz łatwo uzyskać ten efekt w dowolnym kierunku, po prostu zmieniając animacje.


1) Przesuń FrontActivity w ciągu BackActivity
Wystarczy zadzwonić overridePendingTransition podczas uruchamiania FrontActivity z 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) Po powrocie z FrontActivity do BackActivity, animowanie układ z FrontActivity się przed zamknięciem FrontActivity!

Zrobiłem to poprzez wywołanie następujące metody w moim onOptionsSelected() i mój onBackPressed() w 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) Teraz musimy upewnij się, że BackActivity jest widoczny za FrontActivity, kiedy to animuje się.
Potrzebujemy do tego pracy z przejrzystymi motywami.

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) Zastosuj przejrzysty motyw do FrontActivity w swoim manifeście:

AndroidManifest.xml

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

5) Ponieważ twoja aktywność jest teraz przezroczysta, będziesz musiał dodać tło do BackgroundView. Standardowe tła są:

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> 

To wszystko. Animacja powinna teraz działać.


EDIT

znalazłem rozwiązanie, które nie migotać. Animacja wygląda bezbłędnie.

Zamykając FrontActivity, zadzwoń pod numer finish zamiast NavUtils.navigateUpFromSameTask(activity). Zmieniłem to w mojej odpowiedzi.

+0

Niesamowite !! Działa dobrze .. Nie zapomnij ** usunąć 'super.onBackPress();' ** ze zdarzenia z kluczem wstecznym. Blokowało mi animację. – Mangesh

+1

jakikolwiek pomysł na temat tworzenia cienia dla "FrontActivity"? – Mangesh

4

Opisane zachowanie można uzyskać, zastępując jedynie przejście między czynnościami. ja także zaniku kurczyć wpływ na tylnym działalności w celu poprawy jego wyglądu:

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

W klasie macierzystej wspólnej dla swoich działań można dołączyć swój kod wielokrotnego użytku:

/* 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); 
} 

Następnie na aktywny start:

startActivity(intent); 
slideInTransition(); 

Do cofania:

@Override 
public void onBackPressed() { 
    super.onBackPressed(); 
    slideOutTransition(); 
} 
Powiązane problemy