Android自定义View实现波浪动画

这篇文章主要为大家详细介绍了Android自定义View实现波浪动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果演示

代码调用与实现效果

xml中调用

 

实现原理

属性配置

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持html中文网。

以上就是Android自定义View实现波浪动画的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » 移动