安卓材料风格的播放/暂停矢量图动画

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>

播放_暂停.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>

路径变形.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>

- WideFide

---

展示你尝试过的内容以及具体的问题，否则没有人会或愿意帮助你。我们不在这里为你完成工作。 - Xaver Kapeller

请查看此答案：https://dev59.com/ol8d5IYBdhLWcg3wsT0b#35738726 - Amit Vaghela

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>

- Conchylicultor

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>

每次点击按钮时，您都会启动淡入或淡出动画，并相应地设置可见性。

- ilomambo

---

是的，但这是老派的动画。你必须使用OnClick代码来触发淡入/淡出效果。我会尝试稍后为您编写一段代码片段。但我相信如果你谷歌一下它（“android OnClick animation”），你会更快地找到它。 - ilomambo

但我正在寻找类似于Youtube的播放/暂停按钮。 - WideFide

是的，我理解了你的问题，只是提供了一个更简单的替代方案。 - ilomambo

极其奇怪和低效的想法！ - Koushik Shom Choudhury