Materiale Android Riproduzione/Pausa Animazione grafica vettoriale

Question

Come posso implementare l'animazione di riproduzione/pausa come molti lettori di musica nella mia app per Android? Ho provato molte soluzioni ma nessuna ha funzionato.

Questo è quello che ho fatto finora: MainActivity.java:

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

     imageButton = (ImageButton) findViewById(R.id.imageView); 
     imageButton.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View view) { 
       Animatable animatable = (Animatable) imageButton.getDrawable(); 
       animatable.start(); 
      } 
     }); 
    } 

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" 
    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="widefide.com.vectoranimation01.MainActivity"> 


    <ImageButton 
     android:layout_width="wrap_content" 
     style="@style/Widget.AppCompat.Button.Borderless" 
     android:layout_height="wrap_content" 
     android:layout_centerInParent="true" 
     android:id="@+id/imageView" 
     android:src="@drawable/play_pause" 
     android:layout_centerVertical="true" 
     android:layout_centerHorizontal="true" /> 
</RelativeLayout> 

play_pause.xml:

<?xml version="1.0" encoding="utf-8"?> 
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android" 
android:constantSize="true"> 
<item 
    android:drawable="@drawable/pause_ic" 
    android:state_checked="true" 
    android:id="@+id/pause_state" /> 
<item 
    android:drawable="@drawable/play_ic" 
    android:id="@+id/play_state" /> 
<transition android:fromId="@id/play_state" android:toId="@id/pause_state" android:reversible="true"> 
    <animated-vector android:drawable="@drawable/play_ic"> 
     <target android:name="d" android:animation="@anim/path_morph" /> 
    </animated-vector> 
</transition> 
</animated-selector> 

path_morph .xml

<?xml version="1.0" encoding="utf-8"?> 
<set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <objectAnimator 
     android:duration="4000" 
     android:propertyName="pathData" 
     android:valueFrom="@string/ic_play_string" 
     android:valueTo="@string/ic_pause_string" 
     android:valueType="pathType" /> 
</set> 

Answer 1

È necessario definire l'icona di riproduzione e di pausa come immagine vettoriale anziché png e quindi utilizzare AnimatedVectorDrawable per la transizione tra i due.

Vedere l'esempio tickCross del corso Udacity per maggiori informazioni: https://www.udacity.com/course/viewer#!/c-ud862/l-4969789009/m-4908328939 per la spiegazione e https://github.com/udacity/ud862-samples/tree/master/TickCross/app/src/main per il codice

Basta sostituire il segno di spunta e il percorso trasversale da (48DP):

<string name="path_play">M16,24L38,24L27.3,30.8L16,38ZM16,10L27.3,17.2L38,24L16,24Z</string> 
<string name="path_pause">M12,10L20,10L20,38L12,38ZM28,10L36,10L36,38L28,38Z</string> 

Answer 2

Un'opzione invece di cambiare drawable, è quello di mettere due pulsanti sulla stessa posizione e solo una visibile alla volta.

Quando si fa clic sul pulsante di riproduzione si nasconde il pulsante di riproduzione e si rende visibile il pulsante di pausa Quando si fa clic sul pulsante di pausa si nasconde il pulsante di pausa e si rende visibile il pulsante di riproduzione.

È possibile aggiungere Alpha animazioni così svaniscono le une nelle altre

Per l'animazione di dissolvenza avete bisogno di due file XML come questi:

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator"> 
    <alpha 
     android:fromAlpha="0.2" 
     android:toAlpha="1.0" 
     android:duration="500"/> 
</set> 

<set xmlns:android="http://schemas.android.com/apk/res/android" 
android:interpolator="@android:anim/linear_interpolator"> 
    <alpha 
     android:fromAlpha="1.0" 
     android:toAlpha="0.2" 
     android:duration="500"/> 
</set> 

e ad ogni scatto del tasto si avvia il fade in o le animazioni e imposta la visibilità di conseguenza.