Android 实现波浪动画的两种方式

一、国际惯例先上效果

水波浪动画截取了部分效果

二、实现思路

1、贝塞尔曲线实现

什么是贝塞尔曲线，贝塞尔曲线的原理，二阶、三阶、四阶、五阶等等更复杂的贝塞尔曲线感兴趣的自己去了解，这里就不赘述了
Android中绘制贝塞尔曲线的Path类提供了四个方法
二阶贝API：
public void quadTo(float x1, float y1, float x2, float y2)
public void rQuadTo(float dx1, float dy1, float dx2, float dy2)
三阶API：
public void quadTo(float x1, float y1, float x2, float y2, float x3, float y3)
public void rQuadTo(float dx1, float dy1, float dx2, float dy2, float dx3, float dy3)

推导过程（从其他网站趴的别人的），其中N阶贝塞尔曲线可理解为有N条相连的线段，有N+1个顶点：
（1）一阶贝塞尔曲线：有顶点A、B，组成线段AB，利用线性插值原理，可得轨迹公式为：Path = (1-t)A + tB.
（2）二阶贝塞尔曲线：有顶点A、B、C，组成线段AB、BC，则有：

    M = AB = (1-t)A + tB,
    N = BC = (1-t)B + tC,
    Path = (1-t)M + tN.
    将M和N带入Path，可得轨迹公式为：Path = (1-t)²A + 2t(1-t)B + t²C.

（3）三阶贝塞尔曲线：有顶点A、B、C、D，组成线段AB、BC、CD，则有：

    M = AB = (1-t)A + tB,
    N = BC = (1-t)B + tC,
    Q = CD = (1-t)C + tD,
    S = MN = (1-t)M + tN,
    T = NQ = (1-t)N + tQ,
    Path = (1-t)S + tT,

    将S和T带入Path，再将M、N和Q带入Path中的S和T，可得轨迹公式：Path = (1-t)³A + 3t(1-t)²B + 3t²(1-t)C + t³D. 

n阶公式

部分代码

初始化画笔，通过动画控制从左到右的变量

onDraw方法绘制 注意一定要闭合并且修改画笔的style属性

2、正弦函数实现

一个很重要的网站：Des正xuanmos | 图形计算器先利用这个网站套正弦曲线的表达式为y=Asin(ωx+φ)+k，把正玄图画出来

三条波浪正弦图

部分代码

//三条曲线相关的核心正弦曲线公式
 private fun calcValue(mapX: Float, offset: Float, i: Int): Double {
        var off = offset
        off %= 2f
        val sinFunc = sin(2 * (mapX + i) - off * Math.PI) + 1
        val recessionFunc = perHeight / (4 + (mapX + i).toDouble().pow(2.0))
        return -sinFunc * recessionFunc
    }

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 从canvas层面去除绘制时锯齿
        canvas.setDrawFilter(mDrawFilter);
        for (int i = 0; i < getWidth(); i++) {

            // y = A * sin( wx + b) + h ; A： 浪高； w：周期；b：初相；
            float endY = (float) (20 * Math.sin(2 * Math.PI / getWidth() * i + mOffset1) + 300);
            //画第一条波浪
            canvas.drawLine(i, 600, i, endY, mWavePaint);

            //画第二条波浪
            float endY2 = (float) (20 * Math.sin(2 * Math.PI / getWidth() * i + mOffset2) + 300);
            canvas.drawLine(i, 600, i, endY2, mWavePaint);
        }
       
        if (mOffset1 > Float.MAX_VALUE - 1) {//防止数值超过浮点型的最大值
            mOffset1 = 0;
        }
        mOffset1 += mSpeed1;
        
        if (mOffset2 > Float.MAX_VALUE - 1) {//防止数值超过浮点型的最大值
            mOffset2 = 0;
        }
        mOffset2 += mSpeed2;
        //刷新
        postInvalidate();
    }

内存占有率和性能

总结

因公司项目保密性，大多数代码暂时无法公开，只展示了一些思路和核心算法，望各位见谅，如果您开发过程中也用到类似的效果，需要帮忙可临时私信我，可适当提供部分代码