Android学习之使用贝塞尔曲线实现波纹效果

package com.lzy.host.perfect.view;import android.animation.ValueAnimator;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;import android.view.animation.LinearInterpolator;/** * 波纹效果实现View */public class WaveView extends View {    //波浪画笔    private Paint mPaint;    //测试红点画笔    private Paint mCyclePaint;    //波浪Path类    private Path mPath;    //一个波浪长度    private int mWaveLength = 1000;    //波纹个数    private int mWaveCount;    //平移偏移量    private int mOffset;    //波纹的中间轴    private int mCenterY;    //屏幕高度    private int mScreenHeight;    //屏幕宽度    private int mScreenWidth;    private ValueAnimator animator;    public WaveView(Context context) {        super(context);    }    public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    public WaveView(Context context, AttributeSet attrs) {        super(context, attrs);        this.animator = ValueAnimator.ofInt(0, mWaveLength);        mPath = new Path();        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);        mPaint.setAntiAlias(true);        mPaint.setColor(Color.BLUE);        mPaint.setStrokeWidth(5);        mPaint.setStyle(Paint.Style.STROKE);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        mScreenHeight = h;        mScreenWidth = w;        //加1.5：至少保证波纹有2个，至少2个才能实现平移效果        mWaveCount = (int) Math.round(mScreenWidth / mWaveLength + 1.5);        mCenterY = mScreenHeight / 2;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        mPath.reset();        //移到屏幕外最左边        mPath.moveTo(-mWaveLength + mOffset, mCenterY);        for (int i = 0; i < mWaveCount; i++) {            //正弦曲线            mPath.quadTo((-mWaveLength * 3 / 4) + (i * mWaveLength) + mOffset, mCenterY + 60, (-mWaveLength / 2) + (i * mWaveLength) + mOffset, mCenterY);            mPath.quadTo((-mWaveLength / 4) + (i * mWaveLength) + mOffset, mCenterY - 60, i * mWaveLength + mOffset, mCenterY);        }        //填充矩形//        mPath.lineTo(mScreenWidth, mScreenHeight);//        mPath.lineTo(mScreenWidth + mWaveLength, mCenterY);//        mPath.close();        canvas.drawPath(mPath, mPaint);    }    public void start(long interval) {        animator.setDuration(interval);        animator.setRepeatCount(ValueAnimator.INFINITE);        animator.setInterpolator(new LinearInterpolator());        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator animation) {                mOffset = (int) animation.getAnimatedValue();                postInvalidate();            }        });        animator.start();    }    public void stop() {        if (this.animator != null) {            this.animator.cancel();        }    }}

package com.lzy.host.perfect.demo;import android.os.Bundle;import android.widget.TextView;import com.lzy.host.perfect.R;import com.lzy.host.perfect.activity.BaseActivity;import com.lzy.host.perfect.view.WaveView;/** * 波纹效果 * * @author linzhiyong * @time 2017年1月16日17:07:18 * @desc * */public class WaveViewDemoActivity extends BaseActivity {    private TextView topTitleView;    private WaveView waveView;    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_wave_demo);        topTitleView = (TextView) findViewById(R.id.base_top_title);        topTitleView.setText("波纹效果");        waveView = (WaveView) findViewById(R.id.waveView);        waveView.start(1500);    }    @Override    protected void onDestroy() {        if (waveView != null) {            waveView.stop();        }        super.onDestroy();    }}

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/main_gray"    android:clipToPadding="true"    android:fitsSystemWindows="true"    android:orientation="vertical">    <include layout="@layout/base_top_title" />    <com.lzy.host.perfect.view.WaveView        android:id="@+id/waveView"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>