基本思路:貝塞爾三階曲線
public class WaveView extends View {
private float mCenterX;
private float mCenterY;
private float startX;
private float startY;
private float endX;
private float endY;
private float controlX1;
private float controlX2;
private float controlY1;
private float controlY2;
private float wave1;
private float wave2;
private Paint paint;
private Paint arcPaint;
public WaveView(Context context) {
this(context, null);
}
public WaveView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
ObjectAnimator animator = ObjectAnimator.ofFloat(this, "wave", 0, 3000);
animator.setDuration(4000);
animator.setRepeatMode(ValueAnimator.INFINITE);
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.start();
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setAntiAlias(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeCap(Paint.Cap.ROUND);
arcPaint = new Paint();
arcPaint.setStyle(Paint.Style.FILL);
arcPaint.setStrokeCap(Paint.Cap.ROUND);
arcPaint.setStrokeWidth(10);
}
public float getWave() {
return wave1;
}
public void setWave(float wave) {
this.wave1 = wave;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mCenterX = canvas.getWidth() / 2;
mCenterY = canvas.getHeight() / 2;
startX = 0;
startY = mCenterY;
endX = mCenterX * 2;
endY = mCenterY;
controlX2 = mCenterX + wave1 > mCenterX * 2 ? (mCenterX + wave1) % canvas.getWidth() : mCenterX + wave1;
controlY2 = mCenterY + 100;
controlX1 = controlX2 - 300;
controlY1 = mCenterY - 100;
canvas.drawPoint(mCenterX, mCenterY, arcPaint);
canvas.drawPoint(controlX1, controlY1, arcPaint);
canvas.drawPoint(controlX2, controlY2, arcPaint);
Path path = new Path();
path.moveTo(startX, mCenterY);
path.cubicTo(controlX1, controlY1, controlX2, controlY2, endX, mCenterY);
canvas.drawPath(path, paint);
}
}