Android 贝塞尔曲线实现水纹波动效果(1)

• (x1,y1), and ending at (x2,y2). If no moveTo() call has been made for

• this contour, the first point is automatically set to (0,0).

• @param x1 The x-coordinate of the control point on a quadratic curve

• @param y1 The y-coordinate of the control point on a quadratic curve

• @param x2 The x-coordinate of the end point on a quadratic curve

• @param y2 The y-coordinate of the end point on a quadratic curve

*/

public void quadTo(float x1, float y1, float x2, float y2) {

isSimplePath = false;

nQuadTo(mNativePath, x1, y1, x2, y2);

}

三阶贝塞尔曲线与二阶类似分别是：

cubicTo(float x1, float y1, float x2, float y2,

float x3, float y3)

与

rCubicTo(float x1, float y1, float x2, float y2,

float x3, float y3)

• 新建WaveRippleView继承自View

既然要绘制，那么肯定要初始化画笔和路径，画笔的颜色值选择蓝色尽可能和海水颜色相似，画笔设为封闭样式

/**

• 初始化

• @param context

*/

private void init(Context context) {

paint = new Paint();

paint.setColor(Color.parseColor(“#009FCC”));

paint.setStyle(Paint.Style.FILL);

path = new Path();

}

• 如何绘制水波纹

好吧，对不起观众的地方来了，我实在找不到一种好的画图软件可以代替手工随心所欲的画，要么就是鼠标操作太费劲，要么就是不能达到想要的效果。

矩形表示手机屏幕（这个自定义view默认是充满屏幕的），波浪线表示水纹波动效果。

一段水波纹是曲线AD，我们只需要让这段曲线不断的滚动就实现了水波纹动画。曲线AD我们可以用贝塞尔曲线分别画出曲线AC和曲线CD，我们之所以从屏幕外开始画是因为水波纹要不断的波动要确保任何时刻都能看到水波纹，所以我们需要在屏幕前后及屏幕内画满水波纹。

设置水波纹的高度WAVE_HEGHT为100，曲线AD的长度即水波纹的波长WAVE_LENGTH为1500（具体值根据显示效果修改）

设置起始点Y点wavestartY为400；

/**

• 波纹的长度

*/

private final static int WAVE_LENGTH = 1500;

/**

• 波纹的高度

*/

private final static int WAVE_HEGHT = 100;

/**

• 起始点y坐标

*/

private static int wavestartY = 400;

• 计算ABCD点坐标

绘制AD曲线，最主要的是计算ABCD的坐标，根据我们的定义不难得出

A点坐标为（-WAVE_LENGTH，wavestartY）

B点相对A点坐标为（WAVE_LENGTH / 4, -WAVE_HEGHT）

C点相对B点坐标为(WAVE_LENGTH / 2, 0)

以此类推：

path.moveTo(-WAVE_LENGTH+dx, wavestartY);

for (int i = -WAVE_LENGTH; i < getWidth() + WAVE_LENGTH; i = i + WAVE_LENGTH) {

path.rQuadTo(WAVE_LENGTH / 4, -WAVE_HEGHT, WAVE_LENGTH / 2, 0);

path.rQuadTo(WAVE_LENGTH / 4, WAVE_HEGHT, WAVE_LENGTH / 2, 0);

}

canvas.drawPath(path, paint);

此时运行代码，效果如图所示：

此时我们的看到AD曲线绘制回来了，为了看起来更像水纹波动，还需要将D点和A点之间下方的空隙连接起来

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

path.lineTo(0,getHeight());

path.close();

连接起来后，运行效果如图所示：

此时看起来就比较像水纹了

• 让水纹波动

水纹波其实就是一个简单的属性动画，关于动画我们这里不详细介绍了，可移步至我之前的文章

/**

• 水波纹属性动画

*/

public void startAnim(){

final ValueAnimator valueAnimator = ValueAnimator.ofInt(0,WAVE_LENGTH);

valueAnimator.setDuration(2500);

valueAnimator.setRepeatCount(ValueAnimator.INFINITE);

valueAnimator.setInterpolator(new LinearInterpolator());

valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

@Override

public void onAnimationUpdate(ValueAnimator animation) {

dx = (int) valueAnimator.getAnimatedValue();

postInvalidate();

}

});

valueAnimator.start();

}

这里记得设置动画插值器让动画看起来更加流畅。

动画每执行一次就重新绘制一次，需要注意的是绘制的起点变为

path.moveTo(-WAVE_LENGTH+dx, wavestartY);

Android高级架构师

由于篇幅问题，我呢也将自己当前所在技术领域的各项知识点、工具、框架等汇总成一份技术路线图，还有一些架构进阶视频、全套学习PDF文件、面试文档、源码笔记。

• 330页PDF Android学习核心笔记（内含上面8大板块）

• Android学习的系统对应视频

• Android进阶的系统对应学习资料

• Android BAT部分大厂面试题（有解析）

好了，以上便是今天的分享，希望为各位朋友后续的学习提供方便。觉得内容不错，也欢迎多多分享给身边的朋友哈。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
id学习的系统对应视频**

• Android进阶的系统对应学习资料

[外链图片转存中…(img-oLJr98Sf-1714692832573)]

• Android BAT部分大厂面试题（有解析）

[外链图片转存中…(img-ELjJZtto-1714692832573)]

好了，以上便是今天的分享，希望为各位朋友后续的学习提供方便。觉得内容不错，也欢迎多多分享给身边的朋友哈。
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！