Path绘制贝塞尔曲线和波浪waveView

时间:2020-12-14 05:45:43

用path绘制简单的二阶贝塞尔曲线效果图如下:
Path绘制贝塞尔曲线和波浪waveView

  @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path path=new Path();
path.moveTo(0,300);
path.quadTo(waveLength/2,150,waveLength,300);
canvas.drawPath(path,paint);
path.quadTo(waveLength+waveLength/2,450,waveLength*2,300);
path.close();
canvas.drawPath(path,paint);
}

waveview的结构图

Path绘制贝塞尔曲线和波浪waveView

   @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//绘制waveView
path.reset();
if (deltY<150) {
deltY+=10;

}
deltY+=5;
path.moveTo(-waveLength + deltX, startY-deltY);
if (startY-deltY<-waveHeight) {
canvas.save();
return;
}
for (int i = -waveLength; i < getWidth() + waveLength; i += waveLength) {
path.rQuadTo(waveLength / 4, -waveHeight, waveLength / 2, 0);
path.rQuadTo(waveLength / 4, waveHeight, waveLength / 2, 0);
}

matrix.setScale(0,2f);
//形成闭合区域,填充色块
path.lineTo(getWidth(),getHeight());
path.lineTo(0,getHeight());
path.lineTo(-waveLength + deltX, startY-deltY);
path.close();
canvas.drawPath(path, paint);
}

protected void startWave() {
//利用属性动画特性不断的计算动画时间点返回的整数值
ValueAnimator animator = ValueAnimator.ofInt(0, waveLength);
//动画没有设置任何属性值,scale,translate
animator.setDuration(1200);
animator.setInterpolator(new AccelerateDecelerateInterpolator());
animator.setRepeatCount(ValueAnimator.INFINITE);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
deltX = (int) animation.getAnimatedValue();
postInvalidate();
}
});
animator.start();
}