一、前言
在学习自定义View中，不可避免的遇到贝赛尔曲线，在一顿学习操作之后，成功的实现了一个水波加载，效果图如下：（本文适用于有贝赛尔曲线基础的人学习）
水波加载
二、正文
开始撸代码
1）首先是实现思路
1、水波的实现，在接触贝赛尔曲线之后，用了二阶贝赛尔曲线实现水波效果
2、加载过程，通过属性动画来实现这个过程
3、实现顺序，先实现水波后实现加载过程
2）实现水波
int two = width / 2;
//绘制起点
path.moveTo(-(x - radius) + dx, (y + radius) - dy);
for (int i = width; i < getWidth() + width; i += width) {
//在上一个点的相对位置上绘制二阶贝赛尔曲线，参数分别为，控制点与终点
path.rQuadTo(two / 2, -height, two, 0);
//在上一个点的相对位置上绘制二阶贝赛尔曲线，参数分别为，控制点与终点
path.rQuadTo(two / 2, height, two, 0);
}
path.lineTo(getWidth(), getHeight());
path.lineTo(0, getHeight());
path.close();
3）水波的动画
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, width);
valueAnimator.setDuration(2000);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
dx = (int) valueAnimator.getAnimatedValue();
refirsh();
}
});
valueAnimator.start();
3）在实现水波之后，再实现加载过程的动画
final int totalCount = (int) ((rectF.bottom - rectF.top));
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 1000);
valueAnimator.setDuration(3000);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int progress = (int) valueAnimator.getAnimatedValue();
//计算每次的占比情况
dy = (float) (progress/maxNumber) * totalCount;
Log.e("TAG", String.valueOf(dy)+"\t"+maxNumber+"\t"+progress);
//完成之后调用接口
if(dy == totalCount){
loading.over();
}
refirsh();
}
});
valueAnimator.start();
完整代码
package com.example.myapplication.Widget;
import android.animation.ValueAnimator;
import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.animation.LinearInterpolator;
import androidx.annotation.Nullable;
public class BesselViewWidget extends View {
private Paint paint;
private Path path;
public BesselViewWidget(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
start();
}
private void init() {
paint = new Paint();
paint.setDither(true);
paint.setDither(true);
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL_AND_STROKE);
paint.setColor(Color.BLUE);
path = new Path();
paintRect = new Paint();
paintRect.setDither(true);
paintRect.setDither(true);
paintRect.setStrokeWidth(5);
paintRect.setStyle(Paint.Style.STROKE);
paintRect.setColor(Color.BLACK);
}
/**
* 水波的宽
*/
private int width = 700;
/**
* 水波的高
*/
private int height = 20;
/**
* 水波预留的宽
*/
private int dx = 0;
/**
* 水波预留的高
*/
private float dy = 0;
/**
* 中心点
*/
private int x;
private int y;
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
x = (right - left) / 2;
y = (bottom - top) / 2;
super.onLayout(changed, left, top, right, bottom);
}
private Paint paintRect;
private RectF rectF;
private int radius = 150;
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
rectF = new RectF(x - radius, y - radius, x + radius, y + radius);
//创建裁剪区域
canvas.clipRect(rectF);
path.reset();
int two = width / 2;
//绘制起点
path.moveTo(-(x - radius) + dx, (y + radius) - dy);
for (int i = width; i < getWidth() + width; i += width) {
//在上一个点的相对位置上绘制二阶贝赛尔曲线，参数分别为，控制点与终点
path.rQuadTo(two / 2, -height, two, 0);
//在上一个点的相对位置上绘制二阶贝赛尔曲线，参数分别为，控制点与终点
path.rQuadTo(two / 2, height, two, 0);
}
path.lineTo(getWidth(), getHeight());
path.lineTo(0, getHeight());
path.close();
//绘制线
canvas.drawPath(path, paint);
//绘制区域
canvas.drawRect(rectF, paintRect);
}
/**
* 最大的值
*/
private float maxNumber = 1000;
/**
* 设置进度（加载的动画）
* @param loading
*/
public void setProgress(final Loading loading){
final int totalCount = (int) ((rectF.bottom - rectF.top));
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, 1000);
valueAnimator.setDuration(3000);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int progress = (int) valueAnimator.getAnimatedValue();
//计算每次的占比情况
dy = (float) (progress/maxNumber) * totalCount;
Log.e("TAG", String.valueOf(dy)+"\t"+maxNumber+"\t"+progress);
//完成之后调用接口
if(dy == totalCount){
loading.over();
}
refirsh();
}
});
valueAnimator.start();
}
private void refirsh() {
postInvalidate();
}
/**
* 水波的动画
*/
private void start() {
ValueAnimator valueAnimator = ValueAnimator.ofInt(0, width);
valueAnimator.setDuration(2000);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.setRepeatCount(ValueAnimator.INFINITE);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
dx = (int) valueAnimator.getAnimatedValue();
refirsh();
}
});
valueAnimator.start();
}
public interface Loading{
void over();
}
}
CSDN地址：Android-自定义View-水波加载
