Android自定义View——从零开始实现可暂停的旋转动画效果

版权声明：本文为博主原创文章，未经博主允许不得转载。
系列教程：Android开发之从零开始系列
源码：本期内容比较简单，源码就直接在文中贴出来了

大家要是看到有错误的地方或者有啥好的建议，欢迎留言评论

前言：大家平时有用过MAKA或者易企秀这些H5模板制作工具吗，不知道里面有个小细节大家有没注意到，就是这个音乐小控件

当我们点击这个控件时，它会开始旋转并播放背景音乐，再次点击时会重置回初始状态。类似的旋转效果在APP中也十分常见，例如一些音乐播放界面中不断旋转的音乐碟片

其效果会更复杂一些，碟片会随着音乐的播放、暂停而旋转或暂停在某个旋转角度，从暂停恢复到播放时，又会从当前的角度开始不断地旋转。本期将教大家如何利用 属性动画 ObjectAnimator和 补间动画 RotateAnimation 分别实现这一效果

本篇只着重于思路和实现步骤，里面用到的一些知识原理不会非常细地拿来讲，如果有不清楚的api或方法可以在网上搜下相应的资料，肯定有大神讲得非常清楚的，我这就不献丑了。本着认真负责的精神我会把相关知识的博文链接也贴出来（其实就是懒不想写那么多哈哈），大家可以自行传送。为了照顾第一次阅读系列博客的小伙伴，本篇有可能会出现一些在之前系列博客就讲过的内容，看过的童鞋自行跳过该段即可

国际惯例，先上效果图

目录

• 用ObjectAnimator实现
• 用RotateAnimation实现

---

用ObjectAnimator实现

使用属性动画来实现这个效果是最简单的，因为动画的开始、暂停、结束和重新播放等方法系统都已经为我们封装好了（android 3.0以上开始支持），我们只需要继承ImageView然后调用ObjectAnimator的相应方法即可，代码比较简单，这里就直接贴出来了

public class MusicButton extends AppCompatImageView {
    private ObjectAnimator objectAnimator;

    public static final int STATE_PLAYING =1;//正在播放
    public static final int STATE_PAUSE =2;//暂停
    public static final int STATE_STOP =3;//停止
    public int state;

    public MusicButton(Context context) {
        super(context);
        init();
    }

    public MusicButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MusicButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        state = STATE_STOP;
        objectAnimator = ObjectAnimator.ofFloat(this, "rotation", 0f, 360f);//添加旋转动画，旋转中心默认为控件中点
        objectAnimator.setDuration(3000);//设置动画时间
        objectAnimator.setInterpolator(new LinearInterpolator());//动画时间线性渐变
        objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
        objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
    }

    public void playMusic(){
        if(state == STATE_STOP){
            objectAnimator.start();//动画开始
            state = STATE_PLAYING;
        }else if(state == STATE_PAUSE){
            objectAnimator.resume();//动画重新开始
            state = STATE_PLAYING;
        }else if(state == STATE_PLAYING){
            objectAnimator.pause();//动画暂停
            state = STATE_PAUSE;
        }
    }

    public void stopMusic(){
        objectAnimator.end();//动画结束
        state = STATE_STOP;
    }
}

效果如图

---

用RotateAnimation实现

RotateAnimation本身并没有封装暂停动画的方法，所以实现起来会比ObjectAnimator要复杂一些，本着学习研究的态度，没有困难创造困难也要上，我们就来分析一下如何使用“原始的”RotateAnimation实现我们想要的效果

因为RotateAnimation动画只有开始和结束的方法，所以当我们点击暂停按钮时，需要记录当前已经旋转的角度，重绘View并将画布旋转之前记录的角度。再次播放时，因为View的画布已经旋转至之前暂停的角度，我们只需要新建一个动画从当前角度播放即可，具体代码如下

public class MusicButton extends AppCompatImageView {
    public static final int STATE_PLAYING =1;//正在播放
    public static final int STATE_PAUSE =2;//暂停
    public static final int STATE_STOP =3;//停止
    public int state;

    private float angle;//记录RotateAnimation中受插值器数值影响的角度
    private float angle2;//主要用来记录暂停时停留的角度，即View初始旋转角度
    private int viewWidth;
    private int viewHeight;
    private MusicAnim musicAnim;

    public MusicButton(Context context) {
        super(context);
        init();
    }

    public MusicButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MusicButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init(){
        state = STATE_STOP;
        angle = 0;
        angle2 = 0;
        viewWidth = 0;
        viewHeight = 0;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        viewWidth = getMeasuredWidth();
        viewHeight = getMeasuredHeight();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.rotate(angle2,viewWidth/2,viewHeight/2);
        super.onDraw(canvas);
    }

    public class MusicAnim extends RotateAnimation{
        public MusicAnim(float fromDegrees, float toDegrees, float pivotX, float pivotY) {
            super(fromDegrees, toDegrees, pivotX, pivotY);
        }

        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            angle = interpolatedTime * 360;
        }
    }

    public void playMusic(){
        if(state == STATE_PLAYING){
            angle2 = (angle2 + angle)%360;//可以取余也可以不取，看实际的需求
            musicAnim.cancel();
            state = STATE_PAUSE;
            invalidate();
        }else {
            musicAnim = new MusicAnim(0,360,viewWidth/2,viewHeight/2);
            musicAnim.setDuration(3000);
            musicAnim.setInterpolator(new LinearInterpolator());//动画时间线性渐变
            musicAnim.setRepeatCount(ObjectAnimator.INFINITE);
            startAnimation(musicAnim);
            state = STATE_PLAYING;
        }
    }

    public void stopMusic(){
        angle2 = 0;
        clearAnimation();
        state = STATE_STOP;
        invalidate();
    }
}

MusicButton的代码写完了，下面将按钮结合音乐播放的代码贴出来，感兴趣的小伙伴可以看看

mPlayer = MediaPlayer.create(this, R.raw.音乐名);
mPlayer.setLooping(true);

btnMusic = (MusicButton) findViewById(R.id.btn_music);
btnMusic.setOnClickListener(new View.OnClickListener() {//单击播放或暂停
    @Override
    public void onClick(View v) {
        btnMusic.playMusic();
        try {
            if (mPlayer != null) {
                if (mPlayer.isPlaying()) {
                    mPlayer.pause();
                } else {
                    mPlayer.start();
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
});
btnMusic.setOnLongClickListener(new View.OnLongClickListener() {//长按停止
    @Override
    public boolean onLongClick(View v) {
        try {
            if (mPlayer != null) {
                mPlayer.stop();
                mPlayer.prepare();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        btnMusic.stopMusic();
        return true;//消费此长按事件，不再向下传递
    }
});

至此本篇教程到此结束，如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~

---