一、国际惯例先上效果
二、实现思路
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.
部分代码
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();
}
总结
因公司项目保密性,大多数代码暂时无法公开,只展示了一些思路和核心算法,望各位见谅,如果您开发过程中也用到类似的效果,需要帮忙可临时私信我,可适当提供部分代码