這個是跟據(jù)雙曲線函數(shù)繪畫出來的
效果圖:
1515469582842mz雙曲線.gif
根據(jù)第一版實(shí)現(xiàn)出更絢麗動畫的效果
效果圖
1515488488626mz效果圖.gif
實(shí)現(xiàn)根據(jù):
path.cubicTo(第一個控制點(diǎn)X, 第一個控制點(diǎn)Y, 第二個控制點(diǎn)X, 第二個控制點(diǎn)Y, 終點(diǎn)X, 終點(diǎn)Y);
實(shí)現(xiàn)代碼:
//起點(diǎn) 畫好第一段雙曲線
path.moveTo(startX, startY);
path.cubicTo(k1X, k1Y, k2X, k2Y, endX, endY);
//開始畫第二段雙曲線,從上一段末尾開始畫
path.lineTo(startX2, startY2);
path.cubicTo(k1X2, k1Y2, k2X2, k2Y2, endX2, endY2);
path.close();
//閉合,不然很難看
path.lineTo(endX2, endY2);
path.lineTo(endX2, viewH);
path.lineTo(startX, viewH);
canvas.drawPath(path, paint);
path.reset();
點(diǎn)的計(jì)算代碼
//開始計(jì)算值
private void startNumber() {
if (indexH == -1) {
//第一個曲線
//起點(diǎn)的X放向
startX = -30;
//起點(diǎn)的Y放向
startY = 120;
//控制點(diǎn)1的X方向
k1X = viewW / 4;
//控制點(diǎn)1的Y方向
k1Y = 0;
//控制點(diǎn)2的X方向
k2X = viewW - (viewW / 4);
//控制點(diǎn)2的Y方向
k2Y = startY + 120;
//終點(diǎn)X
endX = viewW + 30;
//終點(diǎn)Y
endY = startY;
//第二個取曲線
//起點(diǎn)的X放向
startX2 = endX;
//起點(diǎn)的Y放向
startY2 = endY;
//控制點(diǎn)1的X方向
k1X2 = ((viewW / 4) + viewW);
//控制點(diǎn)1的Y方向
k1Y2 = k1Y;
//控制點(diǎn)2的X方向
k2X2 = ((viewW - (viewW / 4)) + viewW);
//控制點(diǎn)2的Y方向
k2Y2 = startY + 120;
//終點(diǎn)X
endX2 = ((viewW + 30) + endX);
//終點(diǎn)Y
endY2 = startY;
handler.post(new Runnable() {
@Override
public void run() {
invalidate();
}
});
} else {
//控制后期的手動高度
//第一個曲線
//起點(diǎn)的X放向
startX = -30;
//起點(diǎn)的Y放向
startY = indexH;
//控制點(diǎn)1的X方向
k1X = viewW / 4;
//控制點(diǎn)1的Y方向
k1Y = indexH - 120;
//控制點(diǎn)2的X方向
k2X = viewW - (viewW / 4);
//控制點(diǎn)2的Y方向
k2Y = indexH + 120;
//終點(diǎn)X
endX = viewW + 30;
//終點(diǎn)Y
endY = indexH;
//第二個取曲線
//起點(diǎn)的X放向
startX2 = endX;
//起點(diǎn)的Y放向
startY2 = indexH;
//控制點(diǎn)1的X方向
k1X2 = ((viewW / 4) + viewW);
//控制點(diǎn)1的Y方向
k1Y2 = indexH - 120;
//控制點(diǎn)2的X方向
k2X2 = ((viewW - (viewW / 4)) + viewW);
//控制點(diǎn)2的Y方向
k2Y2 = indexH + 120;
//終點(diǎn)X
endX2 = ((viewW + 30) + endX);
//終點(diǎn)Y
endY2 = indexH;
handler.post(new Runnable() {
@Override
public void run() {
invalidate();
}
});
}
}
你看到這里是不是不想看了,一看我*這些實(shí)現(xiàn)點(diǎn)的代碼你都是怎么計(jì)算出來的?
接下來我一步步給你說如如何實(shí)現(xiàn)
注意,WARNING!!!!!!!!!WARNING!!!!!!!!!!!!
記住這個東西:
path.cubicTo(第一個控制點(diǎn)X, 第一個控制點(diǎn)Y, 第二個控制點(diǎn)X, 第二個控制點(diǎn)Y, 終點(diǎn)X, 終點(diǎn)Y);
記住里邊的"第一個控制點(diǎn)X" "第一個控制點(diǎn)Y"...
----------------------------------
先看我們整個屏幕---圖文開始區(qū)
1
這是手機(jī)屏幕
手機(jī)屏幕png.png
2
假設(shè)吧屏幕分為4等分
手機(jī)屏幕png.png
3
控制點(diǎn)的分配
手機(jī)屏幕png.png
注意
上圖中的"控制點(diǎn) X,Y(第一個)"與"控制點(diǎn)X,Y(第二個)"
分別匹配的是你剛記住代碼的如下
path.cubicTo(第一個控制點(diǎn)X, 第一個控制點(diǎn)Y, 第二個控制點(diǎn)X, 第二個控制點(diǎn)Y, 終點(diǎn)X, 終點(diǎn)Y);
手機(jī)屏幕png.png
第一個控制點(diǎn)就在第一個十字交叉處,我們獲取 屏幕寬度/4 就是第一個控制點(diǎn)的X坐標(biāo),Y坐標(biāo)你隨意
第二個控制點(diǎn)就在第二個十字交叉處,我們獲取 屏幕寬度 - (屏幕寬度/4) 就是第二個控制點(diǎn)的X坐標(biāo),相當(dāng)于拿了屏幕了3份(共4份)Y坐標(biāo)還是隨意
在這里你會想到為什么我要用你的 屏幕寬度/4啊 或者 屏幕寬度 - (屏幕寬度/4) 我就不能自己給自己搞一個嘛?答案是可以滴,大兄弟,你先搞嘛,你先用這個方法(cubicTo)隨便輸入幾個值先試一試嘛,肯定你會搞出來一個比我還好的,但你絕對會吐血,哈哈哈哈..
接下來就是在畫一個于屏幕右邊外側(cè)的圓弧線
如圖
手機(jī)屏幕2.png
然后讓線一直往左走如果最右邊的結(jié)束點(diǎn)到達(dá)了屏幕的最右邊,趕緊讓過去的線銷毀(最左邊的已經(jīng)出去了,沒有意義了),然后再添加一條最右邊的線,就這樣無限循環(huán)
OK現(xiàn)在應(yīng)該能理解了吧.0.0
好,接下來給你Demo
大兄弟,記得開啟抗鋸齒
paint.setAntiAlias(true);
(普通版)Demo(github):https://github.com/hanxinhao000/double2Line
(絢麗版)Demo(github):https://github.com/hanxinhao000/XHWaveView
