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

从源码注释中我们可以看出rQuadTo传递的参数分别是第一个点与第二个点距离上一个点的相对X坐标，相对Y坐标

quadTo方法传递的是绝对坐标（如下所示）

/**

• Add a quadratic bezier from the last point, approaching control point

• (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();

}

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

最后

答应大伙的备战金三银四，大厂面试真题来啦！

这份资料我从春招开始，就会将各博客、论坛。网站上等优质的Android开发中高级面试题收集起来，然后全网寻找最优的解答方案。每一道面试题都是百分百的大厂面经真题+最优解答。包知识脉络 + 诸多细节。
节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

《960全网最全Android开发笔记》

《379页Android开发面试宝典》

包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。

如何使用它？
1.可以通过目录索引直接翻看需要的知识点，查漏补缺。
2.五角星数表示面试问到的频率，代表重要推荐指数

《507页Android开发相关源码解析》

只要是程序员，不管是Java还是Android，如果不去阅读源码，只看API文档，那就只是停留于皮毛，这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。

腾讯、字节跳动、阿里、百度等BAT大厂 2020-2021面试真题解析

资料收集不易，如果大家喜欢这篇文章，或者对你有帮助不妨多多点赞转发关注哦。文章会持续更新的。绝对干货！！！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

真正最能锻炼能力的便是直接去阅读源码，不仅限于阅读各大系统源码，还包括各种优秀的开源库。

[外链图片转存中…(img-b7djVAmP-1714692899151)]

腾讯、字节跳动、阿里、百度等BAT大厂 2020-2021面试真题解析

[外链图片转存中…(img-KVN2daHS-1714692899151)]

资料收集不易，如果大家喜欢这篇文章，或者对你有帮助不妨多多点赞转发关注哦。文章会持续更新的。绝对干货！！！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！