Android 材质播放/暂停矢量可绘制动画

Question

如何在我的 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>

Answer 1

您必须将播放和暂停图标定义为矢量图像而不是 png，然后使用 AnimatedVectorDrawable 在两者之间进行过渡。

有关更多信息，请参阅 udacity 课程的 tickCross 示例： 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>

Answer 2

一个选项而不是更改可绘制对象，是将两个按钮放在同一位置，并且一次只能看到一个。

当您单击播放按钮时，您会隐藏播放按钮并使暂停按钮可见 当您单击暂停按钮时，您会隐藏暂停按钮并使播放按钮可见。

您可以添加 Alpha 动画，使它们相互淡入

对于淡入淡出动画，您需要两个 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>

并在每个按钮上单击您开始淡入或淡出动画并相应地设置可见性。