Android 贝斯曲线应用--2

这个是跟据双曲线函数绘画出来的

效果图:

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

第一版实现:https://www.jianshu.com/p/09a38be63e0b