https://github.com/ucodeustory/recordvoiceview

🍭自定义声音波纹，适合作录音应用的开发，模仿iPhone录音效果,模仿小米录音效果，其他录音效果录音效果
https://github.com/ucodeustory/recordvoiceview

Last synced: 5 days ago
JSON representation

🍭自定义声音波纹，适合作录音应用的开发，模仿iPhone录音效果,模仿小米录音效果，其他录音效果录音效果

• Host: GitHub
• URL: https://github.com/ucodeustory/recordvoiceview
• Owner: UCodeUStory
• Created: 2017-10-25T03:44:46.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-28T14:11:40.000Z (almost 7 years ago)
• Last Synced: 2023-11-07T15:18:12.661Z (about 1 year ago)
• Language: Java
• Homepage:
• Size: 17.9 MB
• Stars: 302
• Watchers: 2
• Forks: 17
• Open Issues: 0
• Metadata Files:
  • Readme: ReadMe.md

Awesome Lists containing this project

README

        
# 录音波纹控件

## *模仿iphone录音效果*



## *模仿小米录音效果*





## 小米录音界面实现详解

### 分析特点

   - 根据声音分贝可以自由控制高度

   

   - 曲线是动态，像是沿着一个方向在行走

   

   - 两个端点位置不变曲线两端由低到高

   

### 实现方式

  - 1 这里通过正弦函数 f(x) = sin(x)算法来实现，也可以用贝塞尔曲线，不过处理细节部分往往不太好

 

  - 2 f(x) = sin(x) x 是弧度 0 到2π 区间周期性变化，而我们的屏幕是宽度,0 到 480+ 以上的像素，怎么样转换成弧度呢?

   我们知道 角度可以转化成弧度，而我的们的值恰好很接近角度周期性变化，因此，把每个像素看成一个角度，然后对应转化成弧度

   0 到 360 对应 0 到 2π，Math有转化函数

  

  

     private float calculateY(float x) {

  

          /**

           * 弧度取值范围 0 2π

           */

          double rad = Math.toRadians(x);

  

          double fx = Math.sin(rad);

  

          float dy = (float) (fx * 50);

  

          return (float) (mCenterY - dy);

  

      }

 

  - 3 通过上面计算方法，增加点的数量可以得到一条平滑的曲线，点的数量可以按实际像素宽度计算，如果线的宽度大于1px，可以这样计算

    点的数量 >= 屏幕宽度/线的宽度,这样效果最好

    

  - 4 通过上面方法我们只能得到一条静态的曲线，当然我们是希望他动起来，不能乱动，每个点要按sinX 成周期性变化

     因此，可以通过时间控制 加入offset参数，offset 随着时间慢慢增加，让后将这个参数加入到sin函数里面

     

  

     private float calculateY(float x, float offset) {

  

          /**

           * 弧度取值范围 0 2π

           */

          double rad = Math.toRadians(x);

  

          double fx = Math.sin(rad + offset);

  

          float dy = (float) (fx * 50);

  

          return (float) (mCenterY - dy);

  

      }

  

  - 5 得到动态的曲线后,和我们预期还是不太一样，两端没有固定

     通过判断两端点，会得到两个端点变化明显，并且我们的目的是两端收敛

     

  - 6 模仿小米还需要Path LineTo

  

  - 绘制3条相交的部分