本文實例為大家分享了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中的代碼:

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。