技术共享之贝塞尔曲线

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

自定义控件 新建一个类 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();    }}

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