android 自定义曲线图,Android自定义View——贝赛尔曲线

个人博客:haichenyi.com。感谢关注

本文针对有一定自定义View的童鞋,最好对贝赛尔曲线有辣么一丢丢了解,不了解也没关系。花5分钟看一下 GcsSloop的 安卓自定义View进阶-Path之贝塞尔曲线。

本文的最终效果图:

最终效果图.gif

思路

首先他是一个只有上半部分的正弦形状的水波纹,很规则。

其次,他这个正弦图左右在移动。

然后,就是它这个自定义View,上下也在移动,是慢慢增加的

最后,优化点:一开始刚出来的时候,它那个水波纹的角度,更达到一定角度后,最后面,快要完成的时候的角度是不一样的。

第一步:画正弦形状的水波纹

有一定自定义View基础的童鞋都知道,一阶贝赛尔画直线,这里的正弦图形是用二阶贝赛尔曲线。至于三阶,四阶,五阶用的都比较少。

我们这里知道了,这是用的二阶贝赛尔曲线,辣么,方法呢?

//不带r的方法是基于原点的坐标系(偏移量), rXxx方法是基于当前点坐标系(偏移量)

mPath.rQuadTo(dx1, dy1, dx2, dy2);

//mPath.quadTo(dx1, dy1, dx2, dy2);

Path调用该方法,这里就是传的两个点,也就是四个值,参数的含义:第一个点是控制点,第二个点是终点。前面还有一个起点,通过

mPath.moveTo(x,y);

这个方法是确定起点。不懂的童鞋,看一下文章开头推荐的文章。我们效果的是一排波浪线,我们上面这个方法只是一个。举个例子:

//构造方法里面初始化

private void initView() {

path = new Path();

paint = new Paint();

paint1 = new Paint();

paint.setColor(Color.GREEN);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(10);

paint1.set(paint);

paint1.setColor(Color.RED);

}

//onDraw里面去画出来

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.moveTo(0,300);

path.quadTo(150, 150, 300, 300);

path.quadTo(450, 450, 600, 300);

canvas.drawPath(path, paint);

canvas.drawCircle(0,300,5,paint1);

canvas.drawCircle(150,150,5,paint1);

canvas.drawCircle(300,300,5,paint1);

canvas.drawCircle(450,450,5,paint1);

canvas.drawCircle(600,300,5,paint1);

}

上面就是简单的初始化paint,和path,然后画出path,另外,我还画出了5个点,帮助理解。跑出来的效果图如下:

一个水波纹效果图.png

转换成对应的坐标系,手画的,有点丑,知道是这个意思就行了。如下:

一个水波纹放入坐标系中.png

画一个正弦图的思路:

首先,把path移动到起点,对应的也就是moveTo(0,300)

然后,确定终点,也就是我们前面说的quadTo()方法的第二个点(300,300)

最后,我们确定控制点,也就是我们前面说的quadTo()方法的第一个点。 辣么,这个控制点是怎么确定的呢?问题就在这里。敲黑板 因为我们画的是一个规则的正弦图,所以,控制点的x坐标肯定是终点x坐标300的一半,也就是150。再就是他的y坐标,其实y坐标是随便定义的。y坐标只是约束这个正弦图形的坡度,对坡度。你把y坐标定义的离终点的y坐标远一点,他的坡度就大一点。离他近一点,坡度就小一点。你如果定义控制点是(150,100),他相对于控制点是(150,150)的坡度就会大一点。因为100距300相差200,150距300相差150。200大于150。对,就是这样。辣么,怎么控制是上半部分的正弦图还是下半部分的正弦图呢? |y控|>|y终|,上半部分;相反,则是下半部分。

对了,这里我需要说明的是,上面我们调用了两次quadTo()方法,第二次调用的起点,就是第一次的终点。

上面效果是调用quadTo()方法,我们再来说一说rQuadTo()方法。上面的注释里面,我们也标明了两者的区别。 辣么,什么叫相对于原点的坐标系?什么叫相对于当前点的坐标系呢? 我们知道android的坐标系原点是左上角,你可以这样理解,第一种,不带r的方法quadTo(),他的坐标原点(0,0)点始终在左上角,第二种带r的方法rQuadTo(),我们第一次移动到起点(0,300)的时候,这个时候的原点就是(0,300),所以说此时的终点应该是(300,0),然后确定我们的控制点(150,-150)。辣么,我们调用第二次的时候,此时的终点就是(300,0),这个时候的终点就是(300,0),在确定此时的控制点(150,150)。两次的终点都是(300,0),但是,意义是不一样的。有点绕,但是你理解了相对于原点坐标系,和相对于当前点的坐标系,就很简单了。理解一下,思考5分钟。辣么,上面用带r的怎么写呢?

path.moveTo(0,300);

// path.quadTo(150, 150, 300, 300);

// path.quadTo(450, 450, 600, 300);

path.rQuadTo(150,-150,300,0);

path.rQuadTo(150,150,300,0);

canvas.drawPath(path, paint);

至此,怎么换一个正弦图,以及,两个方法的区别,已经讲完了,我觉得已经讲的非常清楚了。感觉,没有谁比我讲的还要清楚了。手把手教学。我们这个效果,画一个,肯定不行。要画满一个屏幕。怎么画呢?

找规律,一个正弦图,我们上面都是围绕这三个点,起点,控制点,终点。要想规则,控制点的x坐标是终点x坐标的一半。再就是,要画满一个屏幕,要在屏幕内部,所以,终点x坐标要小于屏幕宽度。综上所述。

三个点:起点,终点,控制点

控制点的x坐标是终点x坐标的一半

终点x坐标要小于屏幕宽度

我们就开始写代码了:

private int startY = 300;//定义起始点的y坐标

private int endX = 300;//定义终点的x坐标

private int controlY = 150;//定义控制点的y坐标

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.moveTo(0, 300);

path.moveTo(0, startY);

// path.quadTo(150, 150, 300, 300);

// path.quadTo(450, 450, 600, 300);

//这里的for循环为什么每次要加2倍的终点x坐标呢?

//你想一想,我们一次for循环,画的图的终点x坐标在哪?

for (int i = 0; i < getWidth(); i += 2*endX) {

// path.rQuadTo(150, -150, 300, 0);

// path.rQuadTo(150, 150, 300, 0);

path.rQuadTo(endX/2, -controlY, endX, 0);

path.rQuadTo(endX/2, controlY, endX, 0);

}

canvas.drawPath(path, paint);

}

效果图,如下:

整个屏幕的水波纹效果图.png

好,到这里,第一步完成了,满屏的水波纹出来了。

第二步,正弦图左右在移动

想一想,这个动画,想一想,想一想,像不像水平位移动画?像不像?越想越像。辣么,我们就去验证一下。写一个动画,这种,明显就是属性动画。既然是左右移动,辣么就肯定是改变x轴的坐标值,改变谁的呢?肯定是起点的啊,只有改变起点的x左边的值,水波纹才会有动的效果

public void startAnimation(){

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

animator.setDuration(1000);

animator.setRepeatCount(ValueAnimator.INFINITE);

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

Float animatedValue = (Float) animation.getAnimatedValue();

currentStartX = (int) (endX * animatedValue);

postInvalidate();

}

});

animator.start();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.reset();//不加会有重影,不是我们想要的

// path.moveTo(0, 300);

// path.moveTo(0, startY);

path.moveTo(currentStartX, startY);

...//其他的不变

}

效果图如下:

移动有空白.gif

尼玛,什么鬼?动是动起来了,为啥左边还有一段空白?不要急,想一想为什么?我们之前是从Y轴开始画的,我们这个动画是从左向又移动一个endx的值,所以,我们设置起点的时候,也向左偏移一个endx的值不就好了么?我们再试一试

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.reset();

// path.moveTo(0, 300);

// path.moveTo(0, startY);

path.moveTo(-endX + currentStartX, startY);

// path.quadTo(150, 150, 300, 300);

// path.quadTo(450, 450, 600, 300);

//这里的for循环为什么每次要加2倍的终点x坐标呢?

//你想一想,我们一次for循环,画的图的终点x坐标在哪?

for (int i = -endX; i < getWidth() + endX; i += 2 * endX) {

// path.rQuadTo(150, -150, 300, 0);

// path.rQuadTo(150, 150, 300, 0);

path.rQuadTo(endX / 2, -controlY, endX, 0);

path.rQuadTo(endX / 2, controlY, endX, 0);

}

canvas.drawPath(path, paint);

}

跑出来的效果图如下:

移动会闪一下.gif

咦,满脸的嫌弃,这是什么东西啊,空白虽然没了,为什么会卡一下,并且这个也不是我们想要的效果。我们再想一想,我们这个无线循环的动画的原理是什么? 敲黑板,其实,我们就是多画了一个正弦波形,我们移动之后,跟移动之前一样,也就是位移了两个正弦图,结束后的图形,跟结束前的图形重合,然后一直重复动画,从而让用户感觉是无线循环的动画。 辣么,哪里出问题呢?想一想,为什么达不到我们的效果,肯定是我们水平移动距离的有问题啊。找啊找啊找,找到了,我们这里的endx坐标,是一个完整正弦图形的一半。所以,我们动画移动的距离要乘以2。如下:

currentStartX = (int) (2 * endX * animatedValue);//动画里面的

//动画还要加上插值器,从而达到平滑的效果

animator.setInterpolator(new LinearInterpolator());

辣么,这里距离变了,我们起始点的距离,循环的距离也要变。要不然会有空白

path.moveTo(-endX*2 + currentStartX, startY);

for (int i = -endX*2; i < getWidth() + endX*2; i += 2 * endX) {...}

综上所述,去除无关代码之后的完整代码,如下:

/**

* Author: 海晨忆

* Date: 2018/3/27

* Desc:

*/

public class WaveView1 extends View {

private Path path;

private Paint paint;

private Paint paint1;

private int startY = 300;

private int endX = 300;

private int controlY = 150;

private int currentStartX;

public WaveView1(Context context) {

this(context, null);

}

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

this(context, attrs, 0);

}

public WaveView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView();

}

private void initView() {

path = new Path();

paint = new Paint();

paint1 = new Paint();

paint.setColor(Color.GREEN);

paint.setStyle(Paint.Style.STROKE);

paint.setStrokeWidth(10);

paint1.set(paint);

paint1.setColor(Color.RED);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.reset();

path.moveTo(-endX*2 + currentStartX, startY);

for (int i = -endX*2; i < getWidth() + endX*2; i += 2 * endX) {

path.rQuadTo(endX / 2, -controlY, endX, 0);

path.rQuadTo(endX / 2, controlY, endX, 0);

}

canvas.drawPath(path, paint);

}

public void startAnimation() {

ValueAnimator animator = ValueAnimator.ofFloat(0, 1);

animator.setDuration(1000);

animator.setRepeatCount(ValueAnimator.INFINITE);

animator.setInterpolator(new LinearInterpolator());

animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

Float animatedValue = (Float) animation.getAnimatedValue();

currentStartX = (int) (2 * endX * animatedValue);

postInvalidate();

}

});

animator.start();

}

}

跑出来的效果图如下:

移动水波纹.gif

完美达到了我们的预期效果。

第三步:自定义View上下移动

经过上面的左右动画,现在这个上下移动的动画就很简单了,很明显是改变起始点y坐标的值,当然,肯定是属性动画。代码如下:

public void startAnimation() {

...//这是我们的左移动画,没写上来

//这就是我们的竖着移动的动画

ValueAnimator animator1 = ValueAnimator.ofFloat(0, 1);

animator1.setDuration(5000);

animator1.setInterpolator(new LinearInterpolator());

animator1.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

Float animatedValue = (Float) animation.getAnimatedValue();

currentStartY = (int) (getHeight() * animatedValue);

postInvalidate();

}

});

animator1.start();

}

//改变我们的初始点的y坐标。不要只写个currentStartY,

//光写这个是从下往上移动,你要的是从上往下移动

path.moveTo(-endX*2 + currentStartX, getHeight()-currentStartY);

//再就是修改画笔为填充

paint.setStyle(Paint.Style.FILL_AND_STROKE);

//并且把path连接成一个闭合图形

...//这里是onDraw里面的for循环画正弦图形

path.lineTo(getWidth(),getHeight());

path.lineTo(0,getHeight());

path.close();

canvas.drawPath(path, paint);

跑出来的效果图,如下:

上下移动有bug.gif

到这个位置,基本上已经完成了百分之九十了。我们可以看到开始会有一个问题,结束的时候也有一个问题,这个问题是怎么产生的呢?

第四步:优化开始和结束的动画

其实,我们可以想一想,一开始,我们这个控制点的Y值,不应该一出来就是写死的,显得太突兀了,一开始,我们应该是慢慢涨,涨到我们规定的值,然后快结束的时候,我们应该是慢慢减,减到0为止。应该是这样才对。

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

path.reset();

int currentControlY = 0;

if (currentStartY < controlY) {

currentControlY = currentStartY;

} else {

currentControlY = controlY;

}

if (getHeight() - currentStartY < controlY) {

currentControlY = getHeight() - currentStartY;

}

path.moveTo(-endX * 2 + currentStartX, getHeight() - currentStartY);

for (int i = -endX * 2; i < getWidth() + endX * 2; i += 2 * endX) {

path.rQuadTo(endX / 2, -currentControlY, endX, 0);

path.rQuadTo(endX / 2, currentControlY, endX, 0);

}

path.lineTo(getWidth(), getHeight());

path.lineTo(0, getHeight());

path.close();

canvas.drawPath(path, paint);

}

效果图如下:

最终效果图.gif

经过上面的操作,就完美的达到了我们的预期效果。(PS:把画笔的宽度去掉)

把这个自定义View优化一下,把方法封装好了。项目链接

你可能感兴趣的:(android,自定义曲线图)