版权声明：本文为博主原创文章，未经博主允许不得转载。
系列教程：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;//消费此长按事件，不再向下传递
}
});
至此本篇教程到此结束，如果大家看了感觉还不错麻烦点个赞，你们的支持是我最大的动力~
