仿网易音乐听歌识曲-麦克风动画

最近准备做一个关于麦克风的类库,平时听歌也基本用网易音乐,发现了这个效果挺不错的,所以实现收集起来。

一、效果图

二、实现思路分析

  • 透明度变换的体现;
  • 半径不断扩散;
  • 多个圆形的实现;

实现思路: 主要在于如何能够把不同的圆环跟对应的透明度进行对应上。实现上用两个List进行实现。

三、代码编写

/**
 * Created by Iflytek_dsw on 2017/6/24.
 */public class MicRecordingView extends View{/**画笔*/private Paint paint;/**透明度集合*/private List<Integer> alphaList;/**所有圆环半径集合*/private List<Integer> circleList;/**圆环的颜色*/private int circleColor = Color.RED;/**圆环之间的间隔大小*/private int gapLength = 50;/**最大半径*/private int maxWidth = 200;/**圆环的个数*/private int circieNumber = 5;/**圆环的半径x,y*/private float circleX, circleY;/**是否运行动画*/private boolean isStarting = false;public MicRecordingView(Context context, AttributeSet attrs) {super(context, attrs);circleColor = Color.RED;paint = new Paint();paint.setColor(circleColor);alphaList = new ArrayList<>();circleList = new ArrayList<>();alphaList.add(0, 255);circleList.add(0, 0);}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);maxWidth = w > h ? h / 2 : w / 2;circleX = w / 2;circleY = h / 2;circieNumber = maxWidth / gapLength;}@Overridepublic void onDraw(Canvas canvas) {super.onDraw(canvas);for(int i = 0; i < circleList.size(); i++){int circleWidth = circleList.get(i);int alpha = alphaList.get(i);paint.setAlpha(alpha);canvas.drawCircle(circleX, circleY, circleWidth + gapLength, paint);if(isStarting && alpha > 0 && circleWidth < maxWidth){//一个圆环逐渐扩大alphaList.set(i, alpha - 1);circleList.set(i, circleWidth + 1);}/**当一个圆形的半径扩大到了gapLength的长度,就创建下一个圆*/if(isStarting && circleList.get(circleList.size() - 1) == gapLength){alphaList.add(255);circleList.add(0);}if(isStarting && circleList.size() == circieNumber){//保持圆圈在运行alphaList.remove(0);circleList.remove(0);}invalidate();}}/**
     *执行动画
     */public void start() {isStarting = true;}/**
     *停止动画
     */public void stop() {isStarting = false;}/**
     * 判断是都在不在执行
      */public boolean isStarting() {return isStarting;}
}

四、View的实现

1、main_layout布局中

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"android:layout_width="match_parent" android:layout_height="match_parent"android:paddingBottom="@dimen/activity_vertical_margin"android:paddingLeft="@dimen/activity_horizontal_margin"android:paddingRight="@dimen/activity_horizontal_margin"android:paddingTop="@dimen/activity_vertical_margin"tools:context="dsw.iflytek.com.wymusic.MainActivity"><dsw.iflytek.com.wymusic.MicRecordingViewandroid:id="@+id/micView"android:layout_width="match_parent"android:layout_height="match_parent" /><ImageViewandroid:id="@+id/iv_mic"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:src="@mipmap/mic"/>
</RelativeLayout>

2、MainActivity.java中

public class MainActivity extends AppCompatActivity {private ImageView imageView;private MicRecordingView micRecordingView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);micRecordingView = (MicRecordingView) findViewById(R.id.micView);imageView = (ImageView) findViewById(R.id.iv_mic);micRecordingView.start();}
}

五、扩展

1、修改画笔样式

paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);

形成圆环的波形 

2、修改绘制的图形为椭圆

int length = circleWidth + gapLength;
RectF rectF = new RectF(circleX - length, circleY - length/2,circleX + length, circleY + length/2);
canvas.drawOval(rectF, paint);

至此,简单的模仿了下。

仿网易音乐听歌识曲-麦克风动画相关推荐

  1. 听歌识曲java_Android自定义View之继承扩展(仿网易云音乐听歌识曲)

    前言 上篇文章说到了自定义View的组合实战,链接:Android自定义View之组合实战(以支付宝页面为例) ,感兴趣的同学可以看看.今天要分享的是一个模仿网易云音乐听歌识曲界面的自定义View,实 ...

  2. 基于音频指纹技术的微信“摇一摇搜歌”和QQ音乐“听歌识曲”

    摘要: 逛商场时想知道广播里放的好听的歌是什么?听到音乐想跟着唱,想不起歌词怎么办?这些问题都通过微信"摇一摇搜歌"和QQ音乐"听歌识曲"帮您解决! 逛商场时想 ...

  3. Chrome插件:网易云音乐听歌识曲

    大家好,我是若川.持续组织了8个月源码共读活动,感兴趣的可以 点此加我微信ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...

  4. Chrome插件:云音乐听歌识曲

    当你用网页在视频网站刷视频的时候,有没有碰到过一个 BGM 激起你内心的波澜,而你却不知道它的名字.此时只能打开手机进行听歌识曲,而通过一个浏览器的插件却更容易解决这个问题.不需要繁琐的掏出手机,也不 ...

  5. Axure教程(中级):网易云音乐听歌识曲效果模仿

    本教程给大家分享一下模仿[网易云音乐]APP的听歌识曲界面效果 做法如下,如有雷同,纯属默契: 一.页面布局 从左侧元件库拉入一个[椭圆形],尺寸为100*100,填充色为红色,再复制4个作为声波圆圈 ...

  6. 自定义View之网易云音乐听歌识曲水波纹动画

    先上效果图 点击中间的按钮后,像外发散水波纹,再次点击水波纹消失. 实现原理 当点击按钮后,我们隔一段时间执行一个RippleCircleView的动画,动画包括扩大和透明度,通过PropertyVa ...

  7. 基于音频指纹的听歌识曲系统

    听歌识曲,我想大家都不陌生.虽然不同的厂商识别率不同(可能是因为版权的原因),但是每个音乐APP都会有这么一个功能.我们以扣扣音乐为例,扣扣音乐听歌识曲功能比较丰富,不仅有基本的听歌识曲还有哼唱识别, ...

  8. 下一代听歌识曲技术——从信号处理到深度学习

    音乐丰富我们的生活:音乐传达人类的情感:音乐表达人类的艺术.人类文明的进程中离不开音乐这个载体,音乐也离不开人类的真情创作.在听到好听却没听过的歌曲时,如何快速准确得到该歌曲的歌名成为当务之急.Liv ...

  9. atitit 音频 项目 系列功能表 音乐 v3 t67.docx Atitit 音频 项目 系列功能表 1.音频 音乐 语言领域的功能表 听歌识曲功能 酷我功能。 铃声 功能。。 音频切割(按

    atitit 音频 项目 系列功能表 音乐 v3 t67.docx Atitit 音频 项目 系列功能表 音频 音乐 语言领域的功能表 听歌识曲功能 酷我功能. 铃声 功能.. 音频切割(按照副歌部分 ...

最新文章

  1. .net 考试系统人一多就断开了_2020年银行从业资格考试成绩查询入口已开放
  2. 使用insert向表中添加数据MySQL_使用INSERT语句向表中插入数据(MSSQLSERVER版)
  3. python中range和xrange的区别_python中range和xrange的区别
  4. Gitee 使用问题记录
  5. nagios监控服务器的搭建
  6. EMA算法的C#实现
  7. vs 2015 C 语言,VS2015中C/C++代码分析
  8. @清晰掉 C++ 中的 enum 结构在内存中是怎么存储的?
  9. 计算机二级考试科目python难吗_计算机二级python考试难吗
  10. 知方可补不足~UPDLOCK更新锁的使用
  11. iframe标签里面的页面元素只读
  12. eclipse java读取文件_在eclipse完成对Java_web项目里面资源文件的读取
  13. C++中有了malloc/free 为什么还要new/delete?
  14. 【转】Pro Android学习笔记(二五):用户界面和控制(13):LinearLayout和TableLayout...
  15. 计算机开放电子书 2017 归档
  16. 主板检测卡c5_主板检测卡代码大全
  17. Oracle锁表解决方法
  18. 真正的好老板,都是高层次的“给予者”
  19. svg怎么转换html格式,svg是什么格式
  20. Cesium 水淹分析

热门文章

  1. win7 64位安装vs code
  2. java多线程练习--龟兔赛跑程序
  3. 亚马逊正常购物下单流程是怎么样的?
  4. Android Preference 笔记
  5. android scaleanimation动画,Android 动画之ScaleAnimation应用详解
  6. python爬虫简单代码爬取郭德纲单口相声
  7. 超级产品:分析B站招股书,了解不为人知的B站,何时才能盈利?
  8. python 键盘监控_python 监控键盘输入
  9. 对于初学者学习java开发,开发工具选择-Mac
  10. android手机卡怎么办,安卓手机变卡怎么办?值得收藏