android 三阶曲线动画,Android-贝塞尔曲线实现水波纹动画

Android 系统api提供了quadTo和rQuadTo实现二阶贝塞尔曲线，三阶贝塞尔曲线在这不做阐述，只不过是两个控制点。

ed662587bd.jpg

效果图

device-2018-10-19-155544.gif

首先看张二阶贝赛尔的曲线

bzier.jpg

Path path = new Path();//贝赛尔的起始点moveTo(x,y)path.moveTo(getWidth() / 2 - 200, getHeight() / 2);//quadTo 参数讲解(x1,y1,x2,y2)//x1:控制点x坐标//y1:在控制点y坐标//x2：终点x坐标//y2:终点y坐标path.quadTo(getWidth() / 2 - 100, getHeight() / 2 - 100, getWidth() / 2, getHeight() / 2);

path.quadTo(getWidth() / 2 + 100, getHeight() / 2 + 100, getWidth() / 2 + 200, getHeight() / 2);

canvas.drawPath(path, mPaint);

quadTo和rQuadTo的区别//rQuadTo参数讲解(dx1,dy1,dx2,dy2)：//dx1：控制点相对起点的x位移//dy1：控制点相对起点的y位移//dx2：终点相对起点的x位移/dy2：终点相对起点的y位移

path.moveTo(getWidth() / 2 - 200, getHeight() / 2);

path.rQuadTo(100, -100, 200, 0);

path.rQuadTo(100, 100, 200, 0);

canvas.drawPath(path, mPaint);

效果一样，在这就不贴图了。

quadTo参数讲解(x1,y1,x2,y2)：x1:控制点x坐标，y1:在控制点y坐标，x2：终点x坐标，y2:终点y坐标

rQuadTo参数讲解(dx1,dy1,dx2,dy2)：dx1：控制点相对起点的x位移，dy1：控制点相对起点的y位，dx2：终点相对起点的x位移，dy2：终点相对起点的y位移

实现水波纹动态的效果

实现水波纹动态效果无非是曲线向左一个偏移量dx，看过去想凹凸的曲线，于是形成了水波纹动态效果。看代码。public class WaveView extends View {private Paint mPaint;private int mWidth;private int mHeight;private int mWaveHeight;private int mWaveDx;private int dx;public WaveView(Context context) {    this(context, null);

}public WaveView(Context context, @Nullable AttributeSet attrs) {    this(context, attrs, 0);

}public WaveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setColor(Color.parseColor("#FF3891"));

mPaint.setStyle(Paint.Style.FILL);    //波长的长度(这里设置为屏幕的宽度)

mWaveDx = getResources().getDisplayMetrics().widthPixels;

}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {    super.onMeasure(widthMeasureSpec, heightMeasureSpec);    //控件的宽高

mWidth = MeasureUtils.measureView(widthMeasureSpec, mWaveDx);

mHeight = MeasureUtils.measureView(heightMeasureSpec, 300);    //水波的高度

mWaveHeight = DensityUtil.dip2px(getContext(), 16);

}@Overrideprotected void onDraw(Canvas canvas) {    super.onDraw(canvas);

drawWave(canvas);

}private void drawWave(Canvas canvas) {

Path path = new Path();

path.reset();

path.moveTo(-mWaveDx + dx, mHeight / 2);    for (int i = -mWaveDx; i 

path.rQuadTo(mWaveDx / 4, -mWaveHeight, mWaveDx / 2, 0);

path.rQuadTo(mWaveDx / 4, mWaveHeight, mWaveDx / 2, 0);

}   //绘制封闭的区域

path.lineTo(mWidth, mHeight);

path.lineTo(0, mHeight);    //path.close() 绘制封闭的区域

path.close();

canvas.drawPath(path, mPaint);

}public void startAnimation() {

ValueAnimator valueAnimator = ValueAnimator.ofInt(0, mWaveDx);

valueAnimator.setDuration(2000);

valueAnimator.setRepeatCount(ValueAnimator.INFINITE);

valueAnimator.setInterpolator(new LinearInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {        @Override

public void onAnimationUpdate(ValueAnimator animation) {            //水平方向的偏移量

dx = ( int ) animation.getAnimatedValue();

invalidate();

}

});

valueAnimator.start();

}

}

核心代码是drawWave()这个方法，startAnimation()是一个水平方向动画，偏移量是dx，在Activity中调用。水波纹的高度(贝塞尔曲线的高度)，颜色、大小都可以自定义。小编没有写，整个绘制水波纹动画效果的思路和清晰。主要是搞懂quadTo和rQuadTo的区别和参数的意思。

作者：Steven_520

链接：https://www.jianshu.com/p/1e8bdf66b150

打开App，阅读手记