相关阅读：

吊炸天！74款APP完整源码！

Components for Android: 一个Facebook的高效的声明式UI框架

Android架构之App 模块化实战经验总

作者：BlinCheng （下载地址：点击文末“阅读原文”）

地址：http://blog.csdn.net/qq_25867141

1

前言

最近公司项目有一个录音的录制和播放动画需求，然后时间是那么紧，那么赶紧开撸。

先看效果图

嗯，然后大致就是这样，按住录音，然后有一个倒计时，最外层一个进度条，还有一个类似模拟声波的动画效果（其实中间的波浪会根据声音的大小浪起来的~）

2

实现思路

然后，我们适当的来分析一下这个录音动画的实现方式。这个肯定是通过自定义控件，咱们来把这个效果完完全全画出来。

大致包括以下几个点：

1. 最外层的进度条，最坑的就是一开始的一个渐变的效果
2. 然后进度条最前方是有一个点的（我肯定选择用图片来实现）
3. 中间的波浪（关键是要随着声音的大小浪起来）
4. 中间的倒计时

3

实现过程

1.画最外层的圆

2.画提示的文字

3.画倒计时（静止时间）

4.画声波

这边代码就不展开了，画的有点烦，简单说下，还需要自己体会哈。上面分隔线之前的说白了就是让声波动起来，也就是改变volume的值，然后后面有3个for循环。

第一个for循环是为了确定声波水平线的位置，第二个是画声波，第三个是颜色的渐变。

5.画外圈进度的那个点

我们先会个图分析一下，如下图。A点就是起始坐标，一开始我们的小圆点是隐藏的，如果不算padding的话，x=witdh/2,y=0;

嗯，然后呢画图片我们用的是

canvas.drawBitmap(......);

那么要知道，drawBitmap()这个方法画的时候是我们图片的左上角去画到A点的，其实我们应该往左上角挪一点，才能让图片的中心真正意义上的和A点重合，对吧对吧，嗯，仔细思考一下。

然后继续看上面那个图，当我们A点随着时间运动到B点之后，我们要算出B点的坐标。

这边用一下三角函数啦，我们设A到B，转过的角度为α，设圆的半径为r，那么A到B其实横向增加的距离应该就是

m = x+r*sin(α);
n = y+r*cos(α);

那么我们该图片的所有代码就是：

6.画外边的带进度和带渐变的大圆

我的实现方式很简单，从我们的UI图看出，外面的大圆在1/4进度的时候是渐变的，然后剩下的3/4圆其实都是一种颜色，对吧，那我就画2个圆来实现这个效果呗。

当progress<90的时候，我们画那个渐变的圆环，当>90的时候，我们同时画出那个渐变的和纯色的圆环（当progress的时候，这个时候其实那个渐变的圆环没变化，只是纯色的圆环一直在变）。

如图：A是那个渐变的圆环，B是纯色不变的圆环

7.然后最后就剩下一个计时器了，还有那个上面一直出现的progress

8.最后就是提供各种接口，各种绘制和启动机制了，最主要的还是上面的绘制方法。

比如你的自定义属性

以及一切其余自定义View的东西，对自定义View不熟的同学可以先去学习下怎么自定义View（其实很简单，新手不要怕），然后再去实现一些看上去挺棒的效果。

总结

嗯，大致就是这样，对于公司这些动画的需求我只想说其实你想要咋弄，都是没问题的，最重要的就是时间！本身其实最后留给开发人员的时间就不多，然后如果还要加各种动画，那不是天天加班的节奏么~

下载地址：https://github.com/Blincheng/RecordView

看完本文有收获？请分享给更多人

---

Java和Android架构

欢迎关注我们，一起讨论技术，扫描和长按 下方的二维码可快速关注我们。 或 搜索微信公众号:JANiubility。

公众号： JANiubility