android波浪线动画,Android绘制波浪线

今天让我们来绘制一条波浪线，并且提供了控制波浪大小和波浪速度的方法，首先我们来看看完成的效果：

效果是不是还不错，接下来我们就来看看具体怎么实现的吧！

实现思路

波浪线的绘制

波浪线是怎么实现的呢，其实这用到的内塞尔曲线。

大家可以在这里看看贝塞尔曲线的使用方式。——贝塞尔曲线开发的艺术

使用一阶贝塞尔曲线画出前半截凸起的曲线，再使用一阶贝塞尔曲线画出后半截的贝塞尔曲线。

具体实现方式，为了看着简单点，我就直接写数字了。

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint paint = new Paint();

paint.setColor(Color.RED);

paint.setAntiAlias(true);

paint.setStrokeWidth(5);

paint.setStyle(Paint.Style.STROKE);

Path path = new Path();

path.moveTo(0, 500);

path.quadTo(screenWidth / 4, 300, screenWidth / 2, 500);

path.moveTo(screenWidth / 2, 500);

path.quadTo(screenWidth / 4 * 3, 700, screenWidth, 500);

canvas.drawPath(path, paint);

}

效果大概是这个样子：

波浪的动态

大家有没有觉得这个波浪线很像y=sinx这个函数图像，只要y=sin(x+a)，a是一个随着时间无限增大的值，该函数图像就可以动起来，大家可以在这个网站上试试——Desmos图形计算器

大概要输入一个这样的函数：y=sin(x/5+a)，a做为一个滑块。这样大家就可以看到波浪线的动态图了。

好了，点子已经有了，只要我们把那个波浪线向后移动，就可以看出波浪的动态效果，于是我们做出了如下代码：

private int screenWidth;

private float xoffset = 0;

public MyView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);

screenWidth = wm.getDefaultDisplay().getWidth();

ValueAnimator animator = new ValueAnimator();

animator.setFloatValues(0, screenWidth);

animator.setDuration(3000);

animator.setRepeatCount(-1);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator ani