自绘动画android,在Android中使用View实现一个波浪动画

在Android中使用View实现一个波浪动画

发布时间：2020-11-06 17:34:00

来源：亿速云

阅读：97

作者：Leah

这篇文章将为大家详细讲解有关在Android中使用View实现一个波浪动画，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

xml中调用

android:layout_width="match_parent"

android:layout_height="match_parent"

app:amplitude="100"

app:quadrant="0.5"

app:speed="0.15"/>

实现原理

属性配置

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

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

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);

}

}

}

关于在Android中使用View实现一个波浪动画就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。