技术共享之贝塞尔曲线

贝塞尔曲线的应用场景 ： 文件下载的进度 、 充电电量的上升进度、水波纹效果
效果图 ：

自定义控件 新建一个类 Wave 继承view

package besia.test.liang.com.besiacom.liang.test.besia;

import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.LinearInterpolator;

/**
 * Created by 梁 on 2017/12/14.
 */

public class Wave extends View {

    private Paint paint;
    private Path path;
    private int waveLength = 300;  //波长的宽度
    private int dx;
    private int dy;

    public Wave(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL_AND_STROKE);

        path = new Path();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        path.reset();  //重置 path
        int originY = getHeight();
        if(dy<originY + 150){
            dy += 10;  //高度每秒 + 10
        }
        int halfWaveLength = waveLength/2;   //半个波长
        path.moveTo(-waveLength+dx, originY-dy);
        //屏幕的宽度里面放多少个波长
        for (int i = -waveLength; i < getWidth() + waveLength; i += waveLength) {
            //相对绘制二阶贝塞尔曲线(相对于自己的起始点--也即是上一个曲线的终点  的距离dx1)
            path.rQuadTo(halfWaveLength/2, -80, halfWaveLength, 0);
            path.rQuadTo(halfWaveLength/2, 80, halfWaveLength, 0);
//          path.quadTo(x1, y1, x2, y2)

        }
        //颜色填充
        //画一个封闭的空间
        path.lineTo(getWidth(), getHeight());
        path.lineTo(0, getHeight());
        path.close();

        canvas.drawPath(path, paint);  //开始绘制
    }

    public void startAnimation(){
        ValueAnimator animator = ValueAnimator.ofInt(0,waveLength);
        animator.setDuration(1000);  //设置时长
        animator.setInterpolator(new LinearInterpolator());  //设置线性加速器
        //无限循环
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dx = (int) animation.getAnimatedValue();
                postInvalidate();  //重绘
            }
        });
        animator.start();
    }
}

在布局（activity_main）中使用 该控件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="besia.test.liang.com.besiacom.liang.test.besia.MainActivity">

    <besia.test.liang.com.besiacom.liang.test.besia.Wave
        android:id="@+id/wave"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

在MainActivity中让控件动起来

package besia.test.liang.com.besiacom.liang.test.besia;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

/**
 * Created by 梁 on 2017/12/14.
 */

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Wave wave = (Wave)findViewById(R.id.wave);
        wave.startAnimation();
    }
}

以上是简单实现波浪的效果 ，如果想用到项目中，例如进度，自定义属性就行了，以下 不再提供代码