android - 单击时播放的动画图像按钮

Question

我正在尝试创建一个媒体播放器，因为我想让 Play 按钮在单击时转换为 Pause 按钮，然后再次转换回 Play 按钮再次点击。这是一张 .gif 图片，我想在第一次点击时向前播放，在第二次点击时向后播放。有很多关于如何在 android 中将图像添加为按钮的教程，但没有一个教程讨论带有点击时播放动画的按钮。我确信这是受支持的，因为我见过类似的应用程序。我想知道这样做的正确方法是什么？所以它的性能并不昂贵，而且无论环境如何都能正常工作。如果可能的话，我也会很感激一个最小的例子。

更新:

索尼 Xperia(具体为 Z1 或 Z Ultra 型号)随身听应用程序是我所想的一个真实的例子。这是 sample图片以进一步澄清事情。

Answer 1

你可以使用 AnimationDrawable (链接包含示例)。

我看不到反向播放的方法，因此您可能会创建其中的 2 个，一个图像正向播放，一个图像反向播放。在您的按钮 OnClickListener 中，根据需要将可绘制对象设置为一个动画或另一个动画，然后启动()动画。

要使用此技术，您必须将 gif 转换为单独的帧。您可以使用大量免费工具来执行此操作。

示例代码:

public class AnimationDrawableButtonActivity extends FragmentActivity {

    private AnimationDrawable[] mAnimations;
    private int mAnimationIndex = 1;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_animation_drawable_button);
        new LoadAnimationTask().executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR);
    }

    class LoadAnimationTask extends AsyncTask<Void, Void, AnimationDrawable[]>{


        @Override
        protected AnimationDrawable[] doInBackground(Void... voids) {
            AnimationDrawable[] animations = new AnimationDrawable[2];
            animations[0] = (AnimationDrawable) getResources().getDrawable(R.drawable.play_pause);
            animations[1] = (AnimationDrawable) getResources().getDrawable(R.drawable.play_pause_reverse);
            animations[0].setOneShot(true);
            animations[1].setOneShot(true);
            return animations;
        }

        @Override
        protected void onPostExecute(AnimationDrawable[] animationDrawables) {
            super.onPostExecute(animationDrawables);

            mAnimations = animationDrawables;

            final ImageButton playButton = (ImageButton) findViewById(R.id.btnPlay);
            playButton.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    mAnimationIndex = (mAnimationIndex+ 1) %2;
                    playButton.setImageDrawable(mAnimations[mAnimationIndex]);
                    mAnimations[mAnimationIndex].start();
                }
            });
        }
    }
}

播放暂停.xml

<?xml version="1.0" encoding="utf-8"?>

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/play_pause_022" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_023" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_024" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_025" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_026" android:duration="@integer/play_pause_duration" />
</animation-list>

play_pause_reverse.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/play_pause_026" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_025" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_024" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_023" android:duration="@integer/play_pause_duration" />
    <item android:drawable="@drawable/play_pause_022" android:duration="@integer/play_pause_duration" />
</animation-list>

ints.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="play_pause_duration">32</integer>
</resources>

activity_animation_drawable_button.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/btnPlay"
        android:layout_gravity="center"
        android:src="@drawable/play_pause_022"
        style="?android:attr/buttonBarButtonStyle"
        android:padding="8dp" />
</FrameLayout>