最近在做声纹相关的东西,在画页面时,因为设计不在家,所以就在即琢磨着,突发奇想的如果能模拟声纹波动的效果,岂不是很形象,所以在这边做了个模拟声纹波动的动画,但是首先声明,不是真的检测外部的声音而实时波动的,仅仅是个模拟声纹的动画效果,直接上代码:
layout xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context="winter.winterdemos.PathViewActivity">
<winter.winterdemos.WaveView
android:id="@+id/pathView"
android:layout_width="360dp"
android:layout_height="200dp"
android:layout_centerInParent="true"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"/>
<TextView
android:layout_width="500dp"
android:layout_height="2dp"
android:background="@color/title_color"
android:layout_centerInParent="true" />
RelativeLayout>
colors:
<color name="title_color">#0088FE
WaveView:
package winter.winterdemos;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
/**
* Created by Winter on 2016/6/15.
*/
public class WaveView extends View {
private final static String TAG = "Winter";
private Paint paint;
private Path path;
private int count = 0;
private Handler handler = new Handler() {
@Override
public void handleMessage(Message msg) {
super.handleMessage(msg);
switch (msg.what){
case 0x23:
count+=5;
if(count>=360){
count=0;
}
invalidate();//通过更改count 值,在重新画贝塞尔曲线,已达到动态的效果
sendEmptyMessageDelayed(0x23,400);
break;
}
}
};
public WaveView(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setAntiAlias(true);
paint.setTextSize(30);
paint.setStyle(Paint.Style.STROKE);
paint.setColor(getResources().getColor(R.color.title_color));
paint.setDither(true);//设定是否使用图像抖动处理,会使绘制出来的图片颜色更加平滑和饱满,图像更加清晰
paint.setStrokeWidth(2);
path = new Path();
handler.sendEmptyMessageDelayed(0x23, 1000);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.reset();
path.moveTo(0, 100);
int size = count / 17;
for (int i = 0;i <= size ; i++ ){//动态生成二阶贝塞尔曲线,模拟声纹波
path.rQuadTo(count % 17, -100, 2*(count % 17), 0);//上16
path.rQuadTo(count % 17, 100, 2*(count % 17), 0);//下10
path.rQuadTo(count % 17, -60, 2*(count % 17), 0);//上18
path.rQuadTo(count % 17, 60, 2*(count % 17), 0);//下20
path.rQuadTo(count % 17, -35, 2*(count % 17), 0);//上10
path.rQuadTo(count % 17, 30, 2*(count % 17), 0);//下8
path.rQuadTo(count % 17, -150, 2*(count % 17), 0);//上6
path.rQuadTo(count % 17, 150, 2*(count % 17), 0);//下8
}
for (int i = 0; i < 10; i++) {//混淆近一些固定的声纹波,显得真实一下
path.rQuadTo(8, -100, 16, 0);//上16
path.rQuadTo(5, 100, 10, 0);//下10
path.rQuadTo(5, -60, 18, 0);//上18
path.rQuadTo(10, 40, 20, 0);//下20
path.rQuadTo(5, -15, 10, 0);//上10
path.rQuadTo(4, 30, 8, 0);//下8
path.rQuadTo(8, 0, 30, 0);//上30
path.rQuadTo(3, -80, 6, 0);//上6
path.rQuadTo(4, 150, 8, 0);//下8
path.rQuadTo(6, -120, 12, 0);//上12
path.rQuadTo(7, 130, 14, 0);//下14
path.rQuadTo(8, -130, 20, 0);//上20
path.rQuadTo(10, 60, 25, 0);//下25
path.rQuadTo(8, 0, 63, 0);//上63 260
}
canvas.drawPath(path, paint);
}
}