waveview 大波浪,波浪線,分貝效果,貝塞爾曲線實作

先上效果圖,如下

自定義WaveView,實作波浪效果

package com.bx.waveview;

import android.animation.ValueAnimator;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.accessibility.AccessibilityEvent;
import android.view.animation.LinearInterpolator;

/**
*@author small white
*@date 2018/6/16
*@fuction android波浪效果,波浪線
*/
public class WaveView extends View{

    /**
     * 每個波浪寬度
     */
    private int mWaveWidth;
    /**
     * 波浪高度
     */
    private int mWaveHeight;

    /**
     * 波浪運動時間,控制波浪速度效果
     */
    private  int mWaveTime;
    /**
     * 波浪顔色
     */
    private  int mWaveColor;
    /**
     * 是否是波浪線
     */
    private  boolean isWaveLine;

    private int mWaveCount;
    private int offset;
    private int mScreenWidth;
    private int mScreenHeight;
    private Path mPath;
    private Paint mPaint;
    private ValueAnimator mValueAnimatior;
    private Canvas canvas;

    public WaveView(Context context) {
        this(context,null,0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs) {
        this(context,attrs,0);
    }

    public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.WaveViewStyle);
        mWaveTime = typedArray.getInteger(R.styleable.WaveViewStyle_mWaveTime,mWaveTime);
        mWaveColor = typedArray.getColor(R.styleable.WaveViewStyle_mWaveColor,mWaveColor);
        isWaveLine = typedArray.getBoolean(R.styleable.WaveViewStyle_isWaveLine,isWaveLine);
        typedArray.recycle();
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
       setPaint();
    }

    /**
     * 設定paint
     */
    private void setPaint(){
        if (isWaveLine){
            mPaint.setStyle(Paint.Style.STROKE);
        }else {
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        }
        mPaint.setStrokeWidth(8);
        mPaint.setColor(mWaveColor);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mPath = new Path();
        mScreenHeight = h;
        mScreenWidth = w;
        mWaveHeight = h/2;
        mWaveWidth = 800;
        // 計算波形的個數
        mWaveCount = (int) Math.round(mScreenWidth / mWaveWidth+1.5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPath.reset();
        //移動到螢幕外
        mPath.moveTo(-mWaveWidth*3/4,mWaveHeight);
        for (int i = 0; i < mWaveCount; i++) {
            //二階貝塞爾曲線,繪制波形
            mPath.quadTo(-mWaveWidth * 3 / 4 + i * mWaveWidth + offset,mWaveHeight + 70,-mWaveWidth / 2 + i * mWaveWidth + offset,mWaveHeight);
            mPath.quadTo(-mWaveWidth / 4 + i * mWaveWidth + offset,mWaveHeight - 70,i * mWaveWidth + offset,mWaveHeight);
        }

        if (!isWaveLine){
            //鋪滿波浪線下方,形成封閉區
        mPath.lineTo(mScreenWidth,mScreenHeight);
        mPath.lineTo(0,mScreenHeight);
        mPath.close();
        }
        canvas.drawPath(mPath,mPaint);
        this.canvas = canvas;
    }


    /**
     * 開啟波浪效果,設定偏移量
     */
    public void startAnimator() {
        mValueAnimatior = ValueAnimator.ofInt(0, mWaveWidth);
        mValueAnimatior.setDuration(mWaveTime);
        mValueAnimatior.setInterpolator(new LinearInterpolator());
        mValueAnimatior.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimatior.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                offset = (int) animation.getAnimatedValue();
                invalidate();
            }
        });
        mValueAnimatior.start();
    }

    /**
     * 關閉波浪效果
     */
    public void closeAnimator() {
        if (mValueAnimatior.isRunning()){
            mValueAnimatior.cancel();
        }
    }


}
           

自定義屬性

Attribute屬性	Description描述
mWaveTime	動畫時間,控制波浪速度
mWaveColor	波浪顔色
isWaveLine	是否為波浪線

xml檔案引用

<com.bx.waveview.WaveView
        android:layout_marginTop="100dp"
        android:id="@+id/waveviewline"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:mWaveTime="1000"
        app:mWaveColor="@color/colorPrimary"
        app:isWaveLine="true"
        />
           

源碼位址: https://github.com/baixxx/WaveView