Android 点击暂停按钮变成播放图,自定义View：播放、暂停按钮优雅的过渡

TicktockMusic 音乐播放器项目相关文章汇总：

最近想写个音乐播放器，偶然看到轻听这款播放器的播放和暂停按钮，在切换过程中的动画很是吸引我。本着造轮子(其实是 github 上边没找到)的想法，就花了点时间撸出来了这个效果。

效果就是下边这个样子：

效果图

下边说下实现方法，中间也踩了一些坑。

测量及初始化

首先要确实View的宽高，在这里由于是圆形按钮，所以设置宽高相等，onMeasure()方法中设置下即可：

mWidth = MeasureSpec.getSize(widthMeasureSpec);

mHeight = MeasureSpec.getSize(heightMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int heightMode = MeasureSpec.getMode(heightMeasureSpec);

switch (widthMode) {

case MeasureSpec.EXACTLY:

mWidth = mHeight = Math.min(mWidth, mHeight);

setMeasuredDimension(mWidth, mHeight);

break;

case MeasureSpec.AT_MOST:

float density = getResources().getDisplayMetrics().density;

mWidth = mHeight = (int) (50 * density); //默认50dp

setMeasuredDimension(mWidth, mHeight);

break;

}

然后画出底部的圆形

canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaint);

计算Path

1、初始化完毕后，怎么实现两个竖条到一个三角形的过渡呢？这里首先想到的就是自定义 View 常用的 drawPath 方法，抛开动画不谈，整个 View 变化过程其实就是两个矩形变成两个直角三角形的过程。

就是这个样子。知道大体的思路，怎么搞呢，当然是开车了。

就是 canvas.drawPath();

首先计算暂停时两个矩形的各个坐标位置：

float distance = mGapWidth; //暂停时左右两边矩形距离

float barWidth = mRectWidth / 2 - distance / 2; //一个矩形的宽度

float leftLeftTop = barWidth; //左边矩形左上角

float rightLeftTop = barWidth + distance; //右边矩形左上角

float rightRightTop = 2 * barWidth + distance; //右边矩形右上角

float rightRightBottom = rightRightTop; //右边矩形右下角

bottom 的话直接加上矩形的高度即可。

mLeftPath.moveTo(0, 0);

mLeftPath.lineTo(leftLeftTop, mRectHeight);

mLeftPath.lineTo(barWidth, mRectHeight);

mLeftPath.lineTo(barWidth, 0);

mLeftPath.close();

mRightPath.moveTo(rightLeftTop, 0);

mRightPath.lineTo(rightLeftTop, mRectHeight);

mRightPath.lineTo(rightRightBottom, mRectHeight);

mRightPath.lineTo(rightRightTop, 0);

mRightPath.close();

这样两个竖条就出来了。

2、在一开始写的时候就写了这么多计算的方法，但是这时候矩形的边角会超出 View 的范围，所以后来计算了一波位置：

如上图所示，这样就需要再更改一些参数：

首先定义出来这个矩形，计算下宽高：

float space = (float) (mRadius / Math.sqrt(2));

mRectLT = (int) (mRadius - space);

int rectRB = (int) (mRadius + space);

mRect.top = mRectLT;

mRect.bottom = rectRB;

mRect.left = mRectLT;

mRect.right = rectRB;

然后只用在 确定 path 的路线时更改下坐标就可以了：

mLeftPath.moveTo(mRectLT, mRectLT);

mLeftPath.lineTo(leftLeftTop + mRectLT, mRectHeight + mRectLT);

mLeftPath.lineTo(barWidth + mRectLT, mRectHeight + mRectLT);

mLeftPath.lineTo(barWidth + mRectLT, mRectLT);

mLeftPath.close();

mRightPath.moveTo(rightLeftTop + mRectLT, mRectLT);

mRightPath.lineTo(rightLeftTop + mRectLT, mRectHeight + mRectLT);

mRightPath.lineTo(rightRightBottom + mRectLT, mRectHeight + mRectLT);

mRightPath.lineTo(rightRightTop + mRectLT, mRectLT);

mRightPath.close();

这时候画出来两个 Path，暂停按钮就完美的呈现了：

canvas.drawPath(mLeftPath, mPaint);

canvas.drawPath(mRightPath, mPaint);

如下图这样：

动画实现

画完暂停按钮后，怎么让他动画变成三角形呢？一开始我想根据一些宽高的属性来指定动画的变化值，然后更新过程中再画出来，但是计算过程中发现涉及动画的矩形宽度都是从原始的大小到0过渡的，那统一的使用一个参数确定会不会更好点呢？当然会了，从1倍到0变化即可。

这时候就可以设置动画属性了：

ValueAnimator valueAnimator = ValueAnimator.ofFloat(0 , 1);

valueAnimator.setDuration(200);

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

mProgress = (float) animation.getAnimatedValue();

invalidate();

}

});

然后根据 progress 在更新View的过程中来更改矩形的宽高值：

float distance = mGapWidth * (1 - mProgress); //暂停时左右两边矩形距离

float barWidth = mRectWidth / 2 - distance / 2; //一个矩形的宽度

float leftLeftTop = barWidth * mProgress; //左边矩形左上角

float rightLeftTop = barWidth + distance; //右边矩形左上角

float rightRightTop = 2 * barWidth + distance; //右边矩形右上角

float rightRightBottom = rightRightTop - barWidth * mProgress; //右边矩形右下角

这样便可以实现两个矩形到三角形的过渡了，执行动画结束后便是这个样子：

两个矩形变成三角形之后，只需要画布旋转一下，两个暂停按钮到播放按钮的动画已经可以执行了：

canvas.rotate(rotation, mWidth / 2f, mHeight / 2f);

到这里基本上已经结束了，但是写完使用的时候总觉得位置有点不对劲，后来发现确实有问题：

计算过程.png

如图所示，旋转过后 A 和 C 本来是紧靠着圆周的，而 B 距离圆周还有一定的距离。所以需要将其位移 x 的距离，让 OC 的长度等于 BO 的长度。此时圆心O也是三角形的外心。那么此时可以计算出OF的距离，公式如下：

√(( r / √2 ) ^ 2 + OF ^ 2) = √2 * r - OF

得出 OF 的长度为： 3 * √2 * r / 8

那么原矩形宽度的一半减去 OF 的值即为右移的距离，计算可得，右移的距离为 √2 * r / 8 用 Java 表示即

radius * Math.sqrt(2) / 8f

换算为矩形的高度即

mRectHeight / 8f

然后在画布位移一下即可：

canvas.translate((float) (mRectHeight / 8f * mProgress), 0);

总结

上边几个步骤写完，整体效果已经实现了。后来又设置了一系列自定义的参数方便使用：

所有代码都已经上传到 我的Github 上边了，点击可查看，希望提出问题相互讨论，随便给个 Star 再好不过了。

有问题交流可加QQ群 661614986 ，欢迎讨论。