Android Material Play/Пауза для векторной анимации

Как я могу реализовать анимацию воспроизведения/паузы, например, многих музыкальных плееров в Android-приложении? Я пробовал много решений, но никто не работал.

Это то, что я сделал до сих пор: 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>

Ответ 1

Вы должны определить значок воспроизведения и паузы как векторное изображение вместо png, а затем использовать анимациюVectorDrawable для перехода между ними.

Дополнительную информацию см. в примере tickCross курса udacity: https://www.udacity.com/course/viewer#!/c-ud862/l-4969789009/m-4908328939 для объяснения и https://github.com/udacity/ud862-samples/tree/master/TickCross/app/src/main для кода

Вам просто нужно заменить тик и перекрестный путь на (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>

Ответ 2

Один из вариантов вместо того, чтобы изменять выталкиваемый, состоит в том, чтобы поместить две кнопки в одну позицию и только одну видимую за раз.

Когда вы нажимаете кнопку воспроизведения, вы скрываете кнопку воспроизведения и делаете кнопку паузы видимой Когда вы нажимаете кнопку паузы, вы скрываете кнопку паузы и делаете кнопку воспроизведения видимой.

Вы можете добавить альфа-анимации, чтобы они затухали друг с другом

Для анимации затухания вам понадобятся два XML файла:

<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>

и при каждом нажатии кнопки вы начинаете затухание в или из анимаций и устанавливаете видимость соответственно.