Animazione: in Android come ridimensionare e sfumare una vista composta da più righe di testo da un punto centrale

Question

Desidero animare una vista composta da più righe di testo come mostrato nel collegamento https://dl.dropboxusercontent.com/u/8003415/animation.gif. Questa vista è composta da due TextView racchiuse in una vista genitore.

Questa vista genitore contiene due serie di animazioni.

1) il primo set di viste contiene più righe di testo che vengono ridimensionate dal normale al grande e quindi si attenuano.

2) il secondo set di visualizzazione contiene un altro set di testo multiplo che sfuma e scala dal piccolo al normale.

Si noti che il ridimensionamento e lo sbiadimento dovrebbero avvenire simultaneamente.

per il primo set ho progettato il set di animazione seguente. Questo set di animazione scala ((1,1) a (1,5,1,5))) e sfuma il blocco di testo dal centro.

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@anim/custom_decelerator" > 

    <scale 
     android:duration="50" 
     android:fromXScale="1.0" 
     android:fromYScale="1.0" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toXScale="1.5" 
     android:toYScale="1.5" /> 

    <alpha 
     android:duration="2000" 
     android:fromAlpha="2.0" 
     android:toAlpha="0.0" /> 

</set> 

e per il secondo set scala inoltre ((-1, -1) a (1,1))) e svanisce il blocco di testo da Centro

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@anim/custom_decelerator" > 

    <alpha 
     android:duration="50" 
     android:fromAlpha="0.0" 
     android:toAlpha="0.2" /> 

    <scale 
     android:duration="3000" 
     android:fromXScale="-1" 
     android:fromYScale="-1" 
     android:pivotX="50%" 
     android:pivotY="50%" 
     android:toXScale="1.0" 
     android:toYScale="1.0" /> 

</set> 

Il problema è che, la due serie di animazioni non corrispondono esattamente all'animazione specificata nel link precedente.

L'animazione non sembra provenire dal punto morto dei blocchi di testo.

Answer 1

Non ho davvero lavorato con le animazioni, quindi ho pensato di provarlo. Prova ed errore ha portato all'app del livello POC. Da qui il mucchio di codice.

Nota che ho utilizzato alcune viste statiche e ho ripetuto le animazioni su di esse. Può essere lucidato per l'output previsto menzionato.

Ci sono alcuni problemi minori nell'esempio di animazione, l'ho risolto. I frammenti di codice sono i seguenti.

anim/zoom_to_medium.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/decelerate_interpolator"> 
<scale 
    android:duration="1000" 
    android:fromXScale="0" 
    android:fromYScale="0" 
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:repeatMode="restart" 
    android:toXScale="1.0" 
    android:toYScale="1.0" /> 

<alpha 
    android:duration="50" 
    android:fromAlpha="0.0" 
    android:toAlpha="0.2" /> 
</set> 

anim \ zoom_to_full.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/decelerate_interpolator"> 
<scale 
    android:duration="1000" 
    android:fromXScale="1.0" 
    android:fromYScale="1.0" 
    android:pivotX="50%" 
    android:pivotY="50%" 
    android:repeatMode="restart" 
    android:toXScale="2" 
    android:toYScale="2" /> 

<alpha 
    android:duration="1000" 
    android:fromAlpha="2.0" 
    android:toAlpha="0.0" /> 
</set> 

activity_main.xml

<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" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity"> 

    <RelativeLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:background="@drawable/border_circle" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:id="@+id/llFish" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:orientation="vertical" 
      android:visibility="gone"> 


      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="36%" 
       android:textColor="@android:color/black" 
       android:textSize="42dp" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:includeFontPadding="false" 
       android:text="Cat \n owners" 
       android:textColor="@android:color/black" 
       android:textSize="42dp" /> 

     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/llDog" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerInParent="true" 
      android:gravity="center" 
      android:orientation="vertical" 
      android:visibility="gone"> 


      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="54%" 
       android:textColor="@android:color/black" 
       android:textSize="42dp" /> 

      <TextView 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:gravity="center" 
       android:includeFontPadding="false" 
       android:text="Fish \n owners" 
       android:textColor="@android:color/black" 
       android:textSize="42dp" /> 

     </LinearLayout> 

     </RelativeLayout> 

     <Button 
     android:id="@+id/btnToggle" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:text="Click Me" /> 
    </RelativeLayout> 

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener { 

    private LinearLayout llDog; 
    private LinearLayout llFish; 
    private Animation zoomToMed, zoomToFull; 
    private Button btnToggle; 
    private boolean isRunning; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     llDog = (LinearLayout) findViewById(R.id.llDog); 
     llFish = (LinearLayout) findViewById(R.id.llFish); 

     zoomToMed = AnimationUtils.loadAnimation(this, R.anim.zoom_to_medium); 
     zoomToFull = AnimationUtils.loadAnimation(this, R.anim.zoom_to_full); 

     zoomToFull.setAnimationListener(new Animation.AnimationListener() { 
      @Override 
      public void onAnimationStart(Animation animation) { 

      } 

      @Override 
      public void onAnimationEnd(Animation animation) { 
       hideViews(); 
       new Handler().postDelayed(new Runnable() { 
        @Override 
        public void run() { 
         startAnimations(); 
        } 
       }, 1000); 
      } 

      @Override 
      public void onAnimationRepeat(Animation animation) { 

      } 
     }); 


     btnToggle = (Button) findViewById(R.id.btnToggle); 
     btnToggle.setOnClickListener(this); 
    } 

    private void hideViews() { 
     llDog.setVisibility(View.GONE); 
     llDog.setVisibility(View.GONE); 
    } 

    private void startAnimations() { 
     llDog.setVisibility(View.VISIBLE); 
     llFish.setVisibility(View.VISIBLE); 
     llDog.startAnimation(zoomToMed); 
     llFish.startAnimation(zoomToFull); 
    } 


    @Override 
    public void onClick(View view) { 
     isRunning = !isRunning; 
     if (isRunning) { 
      startAnimations(); 
     } else { 
      hideViews(); 

     } 
    } 
} 

e il bonus forma drawable per il cerchio rosso.

border_circle.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="oval"> 
    <stroke 
     android:width="2dp" 
     android:color="@android:color/holo_red_dark"></stroke> 
    <size android:width="250dp" android:height="250dp" /> 
</shape> 

Answer 2

L'applicazione di questi gruppi di animazioni contemporaneamente su quella vista padre non determina l'animazione che si sta cercando. Se ti capisco che stai facendo correttamente:

parentView.startAnimation(animSet1); 
parentView.startAnimation(animSet2); 

Ho ragione? Se è così, stai sbagliando! si dovrebbe invece avere il seguente schema: (Questo non è un codice XML vero e proprio, si tratta di una pseudo codice XML)

<Parent> 
    <Frame1> 
     <TextViews> 
    </Frame1> 
    <Frame2> 
     <TextViews> 
    </Frame2> 
</Parent> 

Con questo progetto si dovrebbe considerare che Parent elemento come un FrameLayout e che Frame elementi possono essere qualunque layout che vuoi Ora è possibile raggiungere l'animazione desiderio da:

frame1.startAnimation(animSet1); 
frame2.startAnimation(animSet2); 

_{Se qualcosa non è chiaro, non esitate, me lo faccia sapere.}