Android贝塞尔曲线动画

image.png

前言：

利用贝塞尔曲线绘制类似波浪效果的优美曲线

概述：

• 环境：Android Studio 3.42
• 语言：Java
• 特点：简单，易懂，效果爆炸

展示：

Record_20200321181828(1).gif

原理：首先利用利用画板canvas绘制出贝塞尔曲线路径path,然后使用值动画改变曲线 path的起点，完成动态曲线的绘制

贝塞尔曲线方法

方法	参数	含义
path.move(x,y)	(x,y)表示曲线起点	设置曲线起点
path.cubic(x1,y1,x2,y2,x3,y3)	(x1,y1,x2,y2,x3,y3)分别表示曲线的起点，顶点，终点	三次贝塞尔曲线
path.cubic(x1,y1,x2,y2)	(x1,y1,x2,y2)分别表示曲线的顶点，终点	二次贝塞尔曲线

二次贝塞尔曲线需要设置起点，三次贝塞尔曲线不需要

代码详解

自定义view

public class WaveView extends View {

初始化画板

    //初始化画笔
    private void initPaint(){
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG|Paint.DITHER_FLAG);
        mPaint.setStrokeWidth(mLineSize);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
    }

初始化路径（贝塞尔曲线路径）

 //初始化路径
    private void initPath(){
        mPath = new Path();
        centerY = getPivotY() + (float) getHeight()/2;
        mPath.moveTo(-waveLength,centerY);
        //贝塞尔曲线路径
        for (int start = -waveLength+speed;start<getWidth();start+=waveLength){
            mPath.cubicTo(start,centerY,start+waveLength/4,centerY-waveCrest,start+waveLength/2,centerY);
            mPath.cubicTo(start+waveLength/2,centerY,start+waveLength*3/4,centerY+waveCrest,start+waveLength,centerY);
        }
    }

初始化值动画（注意，这里并没有开启动画）

  //开启值动画，获取变化值
    private void startAnimator(){
        //变化长度
        va = ValueAnimator.ofInt(0,waveLength);
        //每0.5秒改变一次
        va.setDuration(500);
        //设置变化模式为反转
        va.setRepeatMode(ValueAnimator.REVERSE);
        //设置重复次数为无线循环
        va.setRepeatCount(ValueAnimator.INFINITE);
        //匀速变化
        va.setInterpolator(new LinearInterpolator());
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //获取变化值
                speed = (int) animation.getAnimatedValue();
                //刷新
                invalidate();
            }
        });
    }

开启动画

 //调用动画
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //开启动画
        //开起
        va.start();
    }

绘制曲线

 @Override
    protected void onDraw(Canvas canvas) {
        initPath();
        canvas.drawPath(mPath,mPaint);
    }

关闭动画（并未调用）

  //关闭动画
    private void closeAnimation(){
        if (va != null){
            va.cancel();
        }
    }

总结：简单了解了一下Android绘制动态曲线的方法，以后做一些安卓没有的控件也会有帮助。谢谢大家，写的不好的地方多包含~。