Android自定义View实现波浪动画

本文实例为大家分享了Android自定义View实现波浪动画的具体代码，供大家参考，具体内容如下

效果演示

代码调用与实现效果

xml中调用

<developer.shivam.waveview.Wave
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:amplitude="100"
 app:quadrant="0.5"
 app:speed="0.15"/>

实现原理

属性配置

attrs.xml文件中,进行属性配置

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Wave">
 <!--波浪颜色-->
 <attr name="waveColor" format="color"/>
 <!--波浪背景颜色-->
 <attr name="waveBackgroundColor" format="color"/>
 <!--波浪速度-->
 <attr name="speed" format="float"/>
 <!--正弦曲线相关-->
 <!--波浪振幅-->
 <attr name="amplitude" format="integer"/>
 <!--波浪相对于控件的位置-->
 <attr name="quadrant" format="float"/>
 <!--波浪的频率-->
 <attr name="frequency" format="float"/>
</declare-styleable>
</resources>

获取属性,同时对属性赋默认值

final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
 mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
 mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
 mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
 mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
 mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
 mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
 array.recycle();

绘制波浪

在onDraw()中使用Canvas进行绘制即可,这里需要注意的正弦曲线的绘制.

正弦曲线(y=Asin(ωx+φ)+k)的一些参数如下:

A——振幅，当物体作轨迹符合正弦曲线的直线往复运动时，其值为行程的1/2。
(ωx+φ)——相位，反映变量y所处的状态。
φ——初相，x=0时的相位；反映在坐标系上则为图像的左右移动。
k——偏距，反映在坐标系上则为图像的上移或下移。
ω——角速度， 控制正弦周期(单位角度内震动的次数)。

onDraw中的代码:

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
final int width = getWidth();
final int height = getHeight();

final int waveHeight = (int) (getHeight() * mQuadrant);
// 绘制背景
canvas.drawColor(mWaveBKColor);
mWavePath.moveTo(0, height);
mWavePath.lineTo(0, waveHeight);
for (int i = 1; i <= width; i++) {
 // 绘制正弦曲线 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
 final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
 mWavePath.lineTo(i, y);
}
// 将曲线闭合
mWavePath.lineTo(width, height);
canvas.drawPath(mWavePath, mWavePaint);
}

波浪动画

这时波浪应该已经绘制完成了,下面使用Handler中的周期任务实现动画效果.

// 创建一个周期任务,它的职责是改变正弦曲线的偏移量
final class WaveAnimation implements Runnable {

@Override
 public void run() {
  mWavePath.reset();
  mShift += mSpeed;
  invalidate();
  Wave.this.postDelayed(this, DEFAULT_PERIOD);
 }
}

在View被创建的时候让它进行执行

// 开始波浪动画
postDelayed(new WaveAnimation(), DEFAULT_PERIOD);

完整代码

public class Wave extends View {

// 默认属性值
private static final int DEFAULT_AMPLITUDE = 200;
private static final int DEFAULT_PERIOD = 16;
private static final float DEFAULT_SPEED = .1F;
private static final float DEFAULT_QUADRANT = .33F;
private static final float DEFAULT_FREQUENCY = 1F / 360F;
private static final int DEFAULT_WAVE_COLOR = Color.parseColor("#64B5F6");
private static final int DEFAULT_WAVE_BK_COLOR = Color.parseColor("#EEEEEE");

@SuppressWarnings("FieldCanBeLocal")
@ColorInt
private int mWaveColor;
@ColorInt
private int mWaveBKColor;
// 振幅
private int mAmplitude;
// 波浪位于View的位置
private float mQuadrant;
// 波浪的频率,这个值越大,波浪越密集
private float mFrequency;

// 速度
private float mSpeed;
private float mShift;

private final Paint mWavePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private final Path mWavePath = new Path();

public Wave(Context context) {
 this(context, null);
}

public Wave(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
}

public Wave(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 init(context, attrs);
}

private void init(Context context, AttributeSet set) {
 final TypedArray array = context.obtainStyledAttributes(set, R.styleable.Wave);
 mSpeed = array.getFloat(R.styleable.Wave_speed, DEFAULT_SPEED);
 mWaveColor = array.getColor(R.styleable.Wave_waveColor, DEFAULT_WAVE_COLOR);
 mWaveBKColor = array.getColor(R.styleable.Wave_waveBackgroundColor, DEFAULT_WAVE_BK_COLOR);
 mAmplitude = array.getInt(R.styleable.Wave_amplitude, DEFAULT_AMPLITUDE);
 mQuadrant = array.getFloat(R.styleable.Wave_quadrant, DEFAULT_QUADRANT);
 mFrequency = array.getFloat(R.styleable.Wave_frequency, DEFAULT_FREQUENCY);
 array.recycle();

mWavePaint.setStrokeWidth(2);
 mWavePaint.setColor(mWaveColor);

// 开始波浪动画
 postDelayed(new WaveAnimation(), DEFAULT_PERIOD);
}

@Override
protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 final int width = getWidth();
 final int height = getHeight();

final int waveHeight = (int) (getHeight() * mQuadrant);
 // 绘制背景
 canvas.drawColor(mWaveBKColor);
 mWavePath.moveTo(0, height);
 mWavePath.lineTo(0, waveHeight);
 for (int i = 1; i <= width; i++) {
  // 绘制正弦曲线 y = A Sin(ωt+ ρ) = A sin(2πft + ρ)
  final float y = (float) (waveHeight + mAmplitude * Math.sin(2 * Math.PI * i * mFrequency + mShift));
  mWavePath.lineTo(i, y);
 }
 // 将曲线闭合
 mWavePath.lineTo(width, height);
 canvas.drawPath(mWavePath, mWavePaint);
}

final class WaveAnimation implements Runnable {

@Override
 public void run() {
  mWavePath.reset();
  mShift += mSpeed;
  invalidate();
  Wave.this.postDelayed(this, DEFAULT_PERIOD);
 }
}
}

来源：https://blog.csdn.net/y874961524/article/details/73546595