这个是跟据双曲线函数绘画出来的
效果图:
1515469582842mz双曲线.gif
根据第一版实现出更绚丽动画的效果
效果图
1515488488626mz效果图.gif
实现根据:
path.cubicTo(第一个控制点X, 第一个控制点Y, 第二个控制点X, 第二个控制点Y, 终点X, 终点Y);
实现代码:
//起点 画好第一段双曲线
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();
点的计算代码
//开始计算值
private void startNumber() {
if (indexH == -1) {
//第一个曲线
//起点的X放向
startX = -30;
//起点的Y放向
startY = 120;
//控制点1的X方向
k1X = viewW / 4;
//控制点1的Y方向
k1Y = 0;
//控制点2的X方向
k2X = viewW - (viewW / 4);
//控制点2的Y方向
k2Y = startY + 120;
//终点X
endX = viewW + 30;
//终点Y
endY = startY;
//第二个取曲线
//起点的X放向
startX2 = endX;
//起点的Y放向
startY2 = endY;
//控制点1的X方向
k1X2 = ((viewW / 4) + viewW);
//控制点1的Y方向
k1Y2 = k1Y;
//控制点2的X方向
k2X2 = ((viewW - (viewW / 4)) + viewW);
//控制点2的Y方向
k2Y2 = startY + 120;
//终点X
endX2 = ((viewW + 30) + endX);
//终点Y
endY2 = startY;
handler.post(new Runnable() {
@Override
public void run() {
invalidate();
}
});
} else {
//控制后期的手动高度
//第一个曲线
//起点的X放向
startX = -30;
//起点的Y放向
startY = indexH;
//控制点1的X方向
k1X = viewW / 4;
//控制点1的Y方向
k1Y = indexH - 120;
//控制点2的X方向
k2X = viewW - (viewW / 4);
//控制点2的Y方向
k2Y = indexH + 120;
//终点X
endX = viewW + 30;
//终点Y
endY = indexH;
//第二个取曲线
//起点的X放向
startX2 = endX;
//起点的Y放向
startY2 = indexH;
//控制点1的X方向
k1X2 = ((viewW / 4) + viewW);
//控制点1的Y方向
k1Y2 = indexH - 120;
//控制点2的X方向
k2X2 = ((viewW - (viewW / 4)) + viewW);
//控制点2的Y方向
k2Y2 = indexH + 120;
//终点X
endX2 = ((viewW + 30) + endX);
//终点Y
endY2 = indexH;
handler.post(new Runnable() {
@Override
public void run() {
invalidate();
}
});
}
}
你看到这里是不是不想看了,一看我*这些实现点的代码你都是怎么计算出来的?
接下来我一步步给你说如如何实现
注意,WARNING!!!!!!!!!WARNING!!!!!!!!!!!!
记住这个东西:
path.cubicTo(第一个控制点X, 第一个控制点Y, 第二个控制点X, 第二个控制点Y, 终点X, 终点Y);
记住里边的"第一个控制点X" "第一个控制点Y"...
----------------------------------
先看我们整个屏幕---图文开始区
1
这是手机屏幕
手机屏幕png.png
2
假设吧屏幕分为4等分
手机屏幕png.png
3
控制点的分配
手机屏幕png.png
注意
上图中的"控制点 X,Y(第一个)"与"控制点X,Y(第二个)"
分别匹配的是你刚记住代码的如下
path.cubicTo(第一个控制点X, 第一个控制点Y, 第二个控制点X, 第二个控制点Y, 终点X, 终点Y);
手机屏幕png.png
第一个控制点就在第一个十字交叉处,我们获取 屏幕宽度/4 就是第一个控制点的X坐标,Y坐标你随意
第二个控制点就在第二个十字交叉处,我们获取 屏幕宽度 - (屏幕宽度/4) 就是第二个控制点的X坐标,相当于拿了屏幕了3份(共4份)Y坐标还是随意
在这里你会想到为什么我要用你的 屏幕宽度/4啊 或者 屏幕宽度 - (屏幕宽度/4) 我就不能自己给自己搞一个嘛?答案是可以滴,大兄弟,你先搞嘛,你先用这个方法(cubicTo)随便输入几个值先试一试嘛,肯定你会搞出来一个比我还好的,但你绝对会吐血,哈哈哈哈..
接下来就是在画一个于屏幕右边外侧的圆弧线
如图
手机屏幕2.png
然后让线一直往左走如果最右边的结束点到达了屏幕的最右边,赶紧让过去的线销毁(最左边的已经出去了,没有意义了),然后再添加一条最右边的线,就这样无限循环
OK现在应该能理解了吧.0.0
好,接下来给你Demo
大兄弟,记得开启抗锯齿
paint.setAntiAlias(true);
(普通版)Demo(github):https://github.com/hanxinhao000/double2Line
(绚丽版)Demo(github):https://github.com/hanxinhao000/XHWaveView
网友评论