廢話不多說掀亥，看下面的動圖，和百度的還是有點點差別妥色，我也不修改了搪花，很簡單，我實在是沒有多余的時間嘹害，還要學(xué)習(xí)其他的東西鳍侣，累啊(復(fù)雜的動態(tài)View，可以使用SurfaceView吼拥，效率更高，我這里就簡單使用View了)
效果圖
image.png
仔細(xì)觀察一下百度那個動畫线衫，其實是由三層曲線組成的凿可；每層曲線又是由三個貝塞爾曲線組成的。所以一層一層疊加，加上顏色的漸變枯跑，就可以繪制出來類似于山峰的曲線惨驶；最后，動態(tài)改變曲線的高度就可以達(dá)到那種效果（你也可以加上聲音的波動值敛助，那就看起來更加逼真了）
一個草圖（見笑了）:
??
image.png
源碼
package com.example.helang.volumewave;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Shader;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.animation.DecelerateInterpolator;
import java.util.Random;
/**
* 仿百度的語音助手--波浪動畫控件
*/
public class VolumeWaveView extends View {
private static final String TAG = "VolumeWaveView";
private static final int HEIGHT = 400;//整個控件的高度
private static final int HEIGHT1 = 60;//第一層曲線的高度
private static final int HEIGHT2 = 40;//第二層曲線的高度
private static final int HEIGHT3 = 50;//第三層曲線的高度
private int h1 = 0,h2 = 0, h3 = 0,h4 = 0,h5 = 0;
private int range = 0;//波動的幅度,你可以動態(tài)改變這個值粗卜，比如麥克風(fēng)錄入的音量的高低
private Path path;
private Paint paint1,paint2,paint3,paint4;
private LinearGradient linearGradient1,linearGradient2,linearGradient3,linearGradient4;//四種漸變色
private ValueAnimator animator1,animator2,animator3,animator4,animator5;//五種動畫
public VolumeWaveView(Context context) {
this(context,null);
}
public VolumeWaveView(Context context, @Nullable AttributeSet attrs) {
this(context,attrs,0);
}
public VolumeWaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs,defStyleAttr);
initPaint();
startAnimation();
}
/**
* 初始化畫筆
*/
private void initPaint(){
path = new Path();
paint1 = new Paint();
paint1.setStyle(Paint.Style.FILL);
paint1.setAntiAlias(true);//抗鋸齒
//漸變色1
linearGradient1 = new LinearGradient(0, 0, 0, HEIGHT1,
Color.parseColor("#e652a6d2"), Color.parseColor("#e652d5a1"), Shader.TileMode.MIRROR);
paint1.setShader(linearGradient1);
paint2 = new Paint();
paint2.setAntiAlias(true);//抗鋸齒
paint2.setStyle(Paint.Style.FILL);
//漸變色2
linearGradient2 = new LinearGradient(0, 0, 0, HEIGHT2,
Color.parseColor("#e68952d5"), Color.parseColor("#e6525dd5"), Shader.TileMode.MIRROR);
paint2.setShader(linearGradient2);
paint3 = new Paint();
paint3.setAntiAlias(true);//抗鋸齒
paint3.setStyle(Paint.Style.FILL);
//漸變色3
linearGradient3 = new LinearGradient(0, 0, 0, HEIGHT3,
Color.parseColor("#e66852d5"), Color.parseColor("#e651b9d2"), Shader.TileMode.MIRROR);
paint3.setShader(linearGradient3);
paint4 = new Paint();
paint4.setAntiAlias(true);//抗鋸齒
paint4.setStyle(Paint.Style.FILL);
//漸變色4
linearGradient4 = new LinearGradient(0, 0, 0, HEIGHT2,
Color.parseColor("#e6d5527e"), Color.parseColor("#e6bf52d5"), Shader.TileMode.MIRROR);
paint4.setShader(linearGradient4);
}
/**
* draw方法中不要創(chuàng)建大量對象，盡量復(fù)用對象
* @param canvas
*/
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawLayer3(canvas);
drawLayer2(canvas);
drawLayer1(canvas);
}
/**
* 繪制第一層
* @param canvas
*/
private void drawLayer1(Canvas canvas){
drawCurve(path,canvas,paint1,getWidth()/5,getWidth()/3,h1);
drawCurve(path,canvas,paint1,getWidth()/3+getWidth()/5,getWidth()/3,h2);
}
/**
* 繪制第二層
* @param canvas
*/
private void drawLayer2(Canvas canvas){
drawCurve(path,canvas,paint2,0,getWidth()/2,h3);
drawCurve(path,canvas,paint4,getWidth()/2-10,getWidth()/2,h4);
}
/**
* 繪制第三層
* @param canvas
*/
private void drawLayer3(Canvas canvas){
drawCurve(path,canvas,paint3,getWidth()/4,getWidth()/2,h5);
}
/**
* 畫貝塞爾曲線
* @param path
* @param canvas
* @param x 橫向起點的位置(用于擺放曲線的左右的位置)
* @param width 曲線的整個寬度
* @param height 曲線的高度
*/
private void drawCurve(Path path,Canvas canvas,Paint paint,int x,int width,int height){
path.reset();
/*因為這個弧形（類似一個山峰的形狀）
* 其實就是三個貝塞爾曲線組成纳击；
* 而每個貝塞爾曲線需要三個點续扔，三個點連接起來也就是兩部分構(gòu)成；
* 所以焕数，這三個貝塞爾曲線就是由六部分組成了（A纱昧，B，C堡赔，D识脆，E，F(xiàn)善已，G）灼捂，
* 所以這里就平均分一下，建議用筆在紙上畫一下换团，就曉得了**/
int subWidth = width/6;//每小部分的寬度
path.moveTo(x,HEIGHT);//起點 A
path.quadTo(x+subWidth,HEIGHT-height,x+subWidth*2,HEIGHT-height*2);//B - C
path.lineTo(x+subWidth*2,HEIGHT-height*2);//C
path.quadTo(x+subWidth*3,HEIGHT-height*3,x+subWidth*4,HEIGHT-height*2);//D - E
path.lineTo(x+subWidth*4,HEIGHT-height*2);// E
path.quadTo(x+subWidth*5,HEIGHT-height,x+subWidth*6,HEIGHT);//F - G
canvas.drawPath(path,paint);
}
/**
* 添加屬性動畫,每一個動畫的變化范圍和周期都不一樣悉稠，這樣錯開的效果才好看點
*/
public void startAnimation() {
Random random = new Random();
range = random.nextInt(100)%(100-10+1) + 10;//波動的幅度，模擬動態(tài)音量輸入啥寇，你可以自己設(shè)置
animator1 = ValueAnimator.ofInt(0,HEIGHT1,0);
animator1.setDuration(1400);
animator1.setInterpolator(new DecelerateInterpolator());
//無限循環(huán)
animator1.setRepeatCount(ValueAnimator.INFINITE);
animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
h1 = (int) animation.getAnimatedValue();
invalidate();
}
});
animator1.start();
animator2 = ValueAnimator.ofInt(0,HEIGHT1,0);
animator2.setDuration(1700);
animator2.setInterpolator(new DecelerateInterpolator());
//無限循環(huán)
animator2.setRepeatCount(ValueAnimator.INFINITE);
animator2.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
h2 = (int) animation.getAnimatedValue();
invalidate();
}
});
animator2.start();
animator3 = ValueAnimator.ofInt(0,HEIGHT2,0);
animator3.setDuration(1600);
animator3.setInterpolator(new DecelerateInterpolator());
//無限循環(huán)
animator3.setRepeatCount(ValueAnimator.INFINITE);
animator3.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
h3 = (int) animation.getAnimatedValue();
invalidate();
}
});
animator3.start();
animator4 = ValueAnimator.ofInt(0,HEIGHT2,0);
animator4.setDuration(1300);
animator4.setInterpolator(new DecelerateInterpolator());
//無限循環(huán)
animator4.setRepeatCount(ValueAnimator.INFINITE);
animator4.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
h4 = (int) animation.getAnimatedValue();
invalidate();
}
});
animator4.start();
animator5 = ValueAnimator.ofInt(0,HEIGHT3,0);
animator5.setDuration(2000);
animator5.setInterpolator(new DecelerateInterpolator());
//無限循環(huán)
animator5.setRepeatCount(ValueAnimator.INFINITE);
animator5.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
h5 = (int) animation.getAnimatedValue();
invalidate();
}
});
animator5.start();
}
/**
* 關(guān)閉動畫
*/
public void removeAnimation(){
if (animator1 != null){
animator1.cancel();
animator1 = null;
}
if (animator2 != null){
animator2.cancel();
animator2 = null;
}
if (animator3 != null){
animator3.cancel();
animator3 = null;
}
if (animator4 != null){
animator4.cancel();
animator4 = null;
}
if (animator5 != null){
animator5.cancel();
animator5 = null;
}
}
}
主要是利用Path中的貝塞爾曲線偎球，然后加上屬性動畫，動態(tài)改變曲線的高度就可以了
喜歡的話辑甜，就去github給個star吧
