恩..写一篇关于贝斯曲线应用的简书吧
贝斯曲线???贝斯曲线是啥?
请详细看着篇文章:
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
