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>