自定义view实现拉勾网水波纹效果

github链接：https://github.com/yestin0303/WaveView
该效果可以用2个二阶贝塞尔曲线完成，关于贝塞尔曲线，网上文章很多，不在详述，下面直接上代码，

public class WaveView extends View {
 Path path;
 Paint paint;
 Path pathback;
 Paint paintback;
 int screen_width;
 int screen_height;
 int dx;
 int itemLength;
 int controlLength;

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

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

 public WaveView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 WindowManager wm = (WindowManager) context
 .getSystemService(Context.WINDOW_SERVICE);
 screen_width = wm.getDefaultDisplay().getWidth();
 screen_height = wm.getDefaultDisplay().getHeight();
 itemLength = screen_height;
 path = new Path();
 paint = new Paint();
 paint.setColor(Color.parseColor("#B9EBDF"));
 paint.setStyle(Paint.Style.FILL_AND_STROKE);

 pathback = new Path();
 paintback = new Paint();
 paintback.setColor(Color.parseColor("#00B388"));
 paintback.setStyle(Paint.Style.FILL_AND_STROKE);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 path.reset();
 pathback.reset();
 controlLength = itemLength / 4;
 path.moveTo(-itemLength + dx, 500);
 pathback.moveTo((float) (-itemLength * 1.25+ dx), 500);

 drawWave(canvas, path, paint);
 drawWave(canvas, pathback, paintback);
 }

 public void drawWave(Canvas canvas, Path drawpath, Paint drawpaint) {
 for (int i = 0; i <= screen_width / itemLength + 2; i++) {
 drawpath.rQuadTo(controlLength, 30, itemLength / 2, 0);
 drawpath.rQuadTo(controlLength, -30, itemLength / 2, 0);
 }
 drawpath.lineTo(screen_width, 0);
 drawpath.lineTo(0, 0);
 drawpath.close();
 canvas.drawPath(drawpath, drawpaint);
 }

 public void startAnim() {
 ValueAnimator animator = ValueAnimator.ofInt(0, itemLength);
 animator.setDuration(25000);
 //设置动画无限循环
 animator.setRepeatCount(ValueAnimator.INFINITE);
 animator.setInterpolator(new LinearInterpolator());
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
 @Override
 public void onAnimationUpdate(ValueAnimator animation) {
 dx = (int) animation.getAnimatedValue();
 postInvalidate();
 }
 });
 animator.start();
 }
}

public class MainActivity extends AppCompatActivity {
 WaveView waveView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);

 waveView = (WaveView) findViewById(R.id.mywave);
 waveView.startAnim();
 }
}

效果如下，

GIF.gif