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

版权声明：本文为博主原创文章，未经博主容许不得转载java

系列教程：Android开发之从零开始系列android

源码：本期内容比较简单，源码就直接在文中贴出来了canvas

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

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

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

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

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

国际惯例，先上效果图post

用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;//消费此长按事件，再也不向下传递
	}
});
复制代码

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