Android贝斯曲线应用--1

恩..写一篇关于贝斯曲线应用的吧

贝斯曲线???贝斯曲线是啥?

请详细看着篇文章:

http://www.html-js.com/article/1628

今天就给大家说一说这个玩意,仔细一看感觉这个玩意真.#高大上

效果图

1515402724545mzmmmm.gif

说实现起来是不是很难?

其实不难,核心代码只有7行

        //核心代码
        path.moveTo(startX, startY);
        path.quadTo(waX, sizeH, mWidth + 30, startY);
        path.lineTo(mWidth + 30, mHeight);
        path.lineTo(startX, mHeight);

        path.close();


        canvas.drawPath(path, paint);
        path.reset();

我先给你介绍一下吧,简单的介绍,不那么正规给你介绍,让你能融入进来
你只要记着Path是贝斯曲线的一个操作类(目前就这样理解)

解释第一行

//这个是起点,我现在就绘画出一个在屏幕60,60座为标记的起点
path.moveTo(60, 60);

代码效果图

预览图.png

手机效果图

Screenshot_20180108-172402.png

//目前只有一个点
接下来就要放大招了

Screenshot_20180108-173422.png

看见没有,

代码:

        path.moveTo(20/*起点X*/, 600/*起点Y*/);
        path.quadTo((600 / 2)/*控制点X*/, 60/*控制点Y*/, 600/*结束点X*/, 600/*结束点Y*/);
        paint.setColor(Color.parseColor("#0015ad"));
        canvas.drawPath(path, paint);

直接就出来了

这块你可能是懵逼的,这都是啥????

这个理解起来就像是抛物线,要在复杂一点,看来就要重拾初中的数学课本了(¦3」∠) 哈哈~~

给你画个图 根据代码的设值来体现

无标题.png

然后你就可以通过改变控制点的值来左右摇摆了,想象着吧起点放到屏幕的最左测,吧终点放在屏幕的最右侧,然后左右摇摆,就能实现出来啦~

推荐先看看源码实现,这个目前只是第一种就是只有一个贝斯曲线,下一章会介绍两个以上的贝斯曲线,这样让动画看起来倍加流畅

最后一定要闭合

不然很难看...

 path.lineTo(mWidth + 30, mHeight);//终点的X,与View的高度
        path.lineTo(startX, mHeight);//起点的X,与View的高度

推荐你自己写一遍,才能更深层的体会到其中的一些东东

Demo(Github):https://github.com/hanxinhao000/BethCurve

关于详细原理请看第二篇:https://www.jianshu.com/p/08dcb5835ef3