贝塞尔曲线实用

一.先是简单的效果手指触摸更改曲线：

    //起点
    private Point point1;
   // 终点
    private Point point2;
    //辅助点
    private Point pointasset;
    //宽高
    private int height;
    private int width;
    private Path path;
    //画笔
    private Paint paint;

以上为需要的数据

 public void init() {
        point1 = new Point();
        point2 = new Point();
        path = new Path();
        paint = new Paint();
        //防锯齿
        paint.setAntiAlias(true);
        //防震动
        paint.setDither(true);
        paint.setStrokeWidth(2);
        //设置画线条
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);
    }

初始化数据，

   path.reset();
        point1.set(0, height / 2);
        point2.set(width, height / 2);
        path.moveTo(0, height / 2);
        //穿过辅助点到终点
        path.quadTo(pointasset.x, pointasset.y, width, height / 2);
        canvas.drawPath(path,paint );

上面为画图，

   @Override
    public boolean onTouchEvent(MotionEvent event) {

        switch (event.getAction()) {
            //触摸事件更改辅助点
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
            case MotionEvent.ACTION_UP:
                pointasset.set(((int) event.getX()), ((int) event.getY()));
                invalidate();
                break;
        }
        return true;
    }

上面为触摸移动事件，

效果图：

以下为波浪状的代码，我看了网上一些代码都很复杂我写了个简单的但是效果一样：

初始化数据：

private Point point1;
    private Point point2;
    private Point pointasset;
    private int height;
    private int width;
    private Path path;
    private Paint paint;
   private float waveheight= 35f;
    float tanslatex;

    public void init() {
        point1 = new Point();
        point2 = new Point();
        path = new Path();
        paint = new Paint();
        //防锯齿
        paint.setAntiAlias(true);
        //防震动
        paint.setDither(true);
        paint.setStrokeWidth(2);
        //设置画线条
        paint.setStyle(Paint.Style.FILL);

        paint.setColor(Color.BLUE);
    }

画一幅图控制动态修改tanslation来实现动画效果

     canvas.translate(tanslatex,0);
        path.reset();
        path.moveTo(-width,height/2);
       path.quadTo(-width/4*3,height/2-waveheight,-width/2,height/2);
       path.quadTo(-width/4,height/2+waveheight,0,height/2);
      // path.moveTo(0,0);
        path.quadTo(width/4,height/2-waveheight,width/2,height/2);
        path.quadTo(width/4*3,height/2+waveheight,width,height/2);
        path.lineTo(width,height);
        path.lineTo(-width,height);
        path.lineTo(-width,height/2);
        canvas.drawPath(path,paint);

网上为了实现这个动画多写了好多代码而且还很容易出错。

刚开始我想使用裁剪来实现后来发现不行（因为我看过plipjay的图表的框架使用了）

然后是使用动画更改数据：

 public void startAnim() {
        float x=tanslatex;
        Log.e("startAnim: ",tanslatex+"" );
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(1408, 0);
        valueAnimator.setInterpolator(new LinearInterpolator());
        valueAnimator.setDuration(2000);
        valueAnimator.setRepeatCount(Animation.INFINITE);
        //动画效果重复
//        valueAnimator.setRepeatMode(Animation.RESTART);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                tanslatex=(float) animation.getAnimatedValue();
                invalidate();
            }
        });
        valueAnimator.start();
    }

因为页面第一次画的时候获取到的时候是0，未能及时初始化宽高我直接给了个死的值。

在activity中调用这个方法开启动画然后动画就实现了

 Bazeir2 bazeir2= ((Bazeir2) findViewById(R.id.bazir2));
        bazeir2.startAnim();

比网上其他的简单多了节省了成吨的代码