专栏名称: 开发者全社区
分享和推送Java/Android方向的技术和文章,让你成为这方面的大牛,让你每天都成长一点。同时,我们也会邀请BAT的大牛分享原创!
目录
相关文章推荐
stormzhang  ·  游戏的玩法,已经变了 ·  16 小时前  
鸿洋  ·  Android从上帝视角来看PackageM ... ·  昨天  
stormzhang  ·  不让人们存钱了? ·  昨天  
鸿洋  ·  深入探索 APKTool:Android ... ·  2 天前  
鸿洋  ·  Android自定义Lint的二三事儿 ·  3 天前  
51好读  ›  专栏  ›  开发者全社区

Android 自定义录音、播放动画View,让你的录音浪起来

开发者全社区  · 公众号  · android  · 2017-05-04 13:29

正文

相关阅读:

吊炸天!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