一张图带你彻底了解二阶贝塞尔曲线

今天周一，反响不错的《高仿网易新闻栏目动画效果》的作者 Young_Kai 又投稿了，细心的朋友会发现——他改名了。

对于贝塞尔曲线概念模糊的朋友，可自行搜索，这样方便你迅速地理解本篇文章。

Young_Kai 的博客地址：http://blog.csdn.net/tyk0910

基本绘制

一阶贝塞尔曲线是一条直线，确定起点终点即可，三阶贝塞尔曲线有两个控制点，相对比较复杂,不容易控制。二阶贝塞尔曲线只有一个控制点，在实际开发中应用的也是最多的。今天讨论的就是关于二阶贝塞尔曲线的控制点坐标计算问题。

到底怎样一张图就能够彻底了解二阶贝塞尔曲线呢，往下看就知道了：

设置二阶贝塞尔曲线的方法：

• moveTo(float x,float y)：其中 x,y 的坐标代表图中曲线左边起点的位置坐标。

  
  

• quadTo(float x1, float y1, float x2, float y2 ) ：其中 x1,y1 的坐标就是图中小圆点的位置，也就是控制点的坐标 x2,y2 的坐标就是图中曲线右边终点的位置坐标。

代码中怎么实现的，一起看一下：

其实就是重写了 onTouchEvent(MotionEvent ev) 方法，在 action为MotionEvent.ACTION_MOVE 的时候，得到滑动时候的x与y坐标，然后分别赋值给 path.quadTo(float x1, float y1, float x2, float y2 ) 方法中的前两个参数，也就是二阶贝塞尔曲线的控制点坐标。然后调用 postInvalidate() 来重新进行绘制即可。最后记得在 onTouchEvent(MotionEvent ev) 方法后返回 true，表示View消耗当前滑动事件。

进阶绘制

哈哈，看完是不是觉得很简单了。基于这张原理图，实际开发中有很多应用。我后来做了一些改进，算是小小拓展一下。看看下面的效果图：

是不是一种很熟悉的赶脚，各大手机卫士的清理小火箭不就出来了嘛，哈哈。这里关于自定义View的一些初始工作就不详细介绍了，前几篇说的很清楚。这里就主要贴 onDraw() 的代码了。

1. 重写onDraw()方法

xSize与ySize 分别代表整体View宽度与高度的1/10，xWidth与yHeight 是在action为 MotionEvent.ACTION_MOVE 时拿到的x与y坐标。后面绘制小火箭以及发射台的坐标都是基于这两个点进行改变的。仔细观察示例图效果，你会发现，小火箭是无法超出这个设置的区域。

一阶贝塞尔曲线的应用

示例图中，只有火箭到达指定区域，才会引起发射台弯曲。这里进行了一下判断，只有在控制点坐标大于整体高度的7/10，并且宽度在指定范围内的时候，才会让quadTo(float x1, float y1, float x2, float y2 )中的第二个参数进行改变，否则保持不变。

这里的文字是在动画效果完成以后，并且控制点y的值小于0，也就是消失在视野中的时候，才让发射成功的文字出现。

2.重写onTouchEvent(MotionEvent ev)方法

• MotionEvent.ACTION_DOWN的时候，发射成功设置为false 
  

• MotionEvent.ACTION_MOVE的时候，获取触摸点的坐标，并赋值给控制点 
  

• MotionEvent.ACTION_UP的时候，进行判断，符合发射条件就开启动画

返回true，表示消费当前滑动事件。

3.动画实现

设置好开始值与结束值，添加一个动画的监听，就能够得到变化的值，再使用 postInvalidate() 方法，从而调用 onDraw() 方法来进行数值的改变并重新绘制。最后开启动画，并且将发射成功设置为true即可。

OK，相信看到这里，你对二阶贝塞尔曲线有了更加全面的认识。

下载源码请点击下方 阅读原文 链接。

---

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：

觉得有用就赞一下呗

赞赏

人赞赏