前言
扯来扯去,前面三篇自定义 View 文章,终于扯完了一些知识点,有些枯燥,所以我也是讲下核心点,没有细分析,主要是让各位有点印象和了解。这篇终于是实践,敲代码的了,因为工作原因,这篇拖的比较久,不过这系列会一直更新下去的,会把我工作中用到的自定义 View 也会加上去。好了,回归正原题,说到自定义 View ,似乎都离不开贝塞尔曲线,因此,第一篇实践就是与贝塞尔曲线有关的。
目录
从0到1Android自定义View(四) 贝塞尔曲线.png
一、贝塞尔曲线
1、贝塞尔曲线简介
来看看官方对神奇的赛贝尔曲线的介绍:贝塞尔曲线于 1962,由法国工程师皮埃尔·贝塞尔所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 演算法开发,以稳定数值的方法求出贝兹曲线。贝塞尔曲线主要用于二维图形应用程序中的数学曲线,曲线由起始点,终止点(也称锚点)和控制点组成,通过调整控制点,贝塞尔曲线的形状会发生变化。
看完后是不是一脸蒙蔽,一句话理解贝塞尔曲线就是:将任意一条曲线转化为精确的数学公式。
2、赛贝尔曲线公式
竟然说了是将曲线转化为精确的数学公式,那么我们来看下具体的数学公式( 注:以下公式中,B(t) 为 t 时间下点的坐标; P0 为起点,Pn 为终点,Pi 为控制点 ):
(1) 一阶贝塞尔曲线(线段)
由 P0 至 P1 的连续点, 描述的一条线段
一阶贝塞尔曲线公式.jpg
一阶贝塞尔曲线公式图.jpg
(2) 二阶贝塞尔曲线(抛物线):
由 P0 至 P1 的连续点 Q0,描述一条线段。
由 P1 至 P2 的连续点 Q1,描述一条线段。
由 Q0 至 Q1 的连续点 B(t),描述一条二次贝塞尔曲线。
二阶贝塞尔曲线(抛物线)公式.jpg
二阶贝塞尔曲线(抛物线)公式图.jpg
(3) 三阶贝塞尔曲线:
三阶贝塞尔曲线公式.jpg
三阶贝塞尔曲线公式图.jpg
3、贝塞尔曲线在 Android 中的应用
其实贝塞尔曲线在 Android 自定义 View 中运用还是挺多的,比如
Android 5.0 后下拉刷新的阴影曲线
QQ 消息提醒的小红点
用于左右滑动时显示个数的点的移动动画
水流波动效果
一个弹性效果的抽屉菜单
4、Android Path 类中提供贝塞尔曲线的操作方法
在 Android 开发中,要实现贝塞尔曲线其实还是很简单的,因为 Android 已经给我们提供了相关接口,此接口方法在 Path 类中,而关于 Path 类的讲解,前面一篇博客就介绍过了。而且通过 Android 的 API 可以知道,贝塞尔曲线从 API1 就开始支持了。下面就是赛贝尔曲线对应的 API 方法了。
贝塞尔曲线对应的方法演示动画
一阶曲线
(线性曲线)lineTo
一阶贝塞尔曲线动图.gif
二阶曲线quadTo
二阶贝塞尔曲线(抛物线)动图.gif
三阶曲线cubicTo
三阶贝塞尔曲线动图.gif
四阶曲线无
四阶贝塞尔曲线动图.gif
5、通过 de Casteljau 算法绘制贝塞尔曲线
上面提过,Path 类中提供了画一到三阶的贝塞尔曲线的方法,如果我们需要绘制更高阶的贝塞尔曲线呢?我们可以采用德卡斯特里奥算法(De Casteljau’s Algorithm)来实现贝塞尔曲线。
效果图:
贝塞尔曲线截屏1.gif
贝塞尔曲线截屏2.gif
贝塞尔曲线截屏3.gif
贝塞尔曲线截屏4.gif
Github 上的代码:beziercurve
里面主要就一个类,beziercurve,这是个自定义 View ,BezierCurve里面主要提供了以下的方法:
Methods:
method 方法description 描述
voidstart()开始贝塞尔曲线(required)
voidstop()停止贝塞尔曲线(optional)
booleanaddPoint()增加控制点(optional)
booleandelPoint()删除控制点(optional)
intgetOrder()获取贝塞尔曲线阶数(optional)
voidsetRate(int rate)设置移动速率(optional)
voidsetTangent(boolean tangent)设置是否显示切线(optional)
voidsetLoop(boolean loop)设置是否循环(optional)
voidsetOrder(int order)设置贝塞尔曲线阶数(optional)
最后通过BezierCurveActivity来展示。
二、贝塞尔曲线的应用
1.QQ 消息提醒可拖拽红点
Github 上的项目地址:qqmsgnotify
效果图:
QQ消息提醒红点.gif
主要是在绘制红点的时候运用了贝塞尔曲线,在固定的位置中,拖拽的时候,有一种粘性的效果,就是这里运用了贝塞尔曲线。
QQ消息提醒红点.png
运用:
(1) 在对应的位置创建一个 TextView
(2) 设置 GooViewListener 监听事件就可以了
mTvPoint = (TextView) findViewById(R.id.point_conversation); mTvPoint.setText("10"); mTvPoint.setTag(10); GooViewListener listener =newGooViewListener(this, mTvPoint) {@OverridepublicvoidonDisappear(PointF mDragCenter){super.onDisappear(mDragCenter); Toast.makeText(QQMsgNotifyActivity.this,"消失了", Toast.LENGTH_SHORT).show(); }@OverridepublicvoidonReset(booleanisOutOfRange){super.onReset(isOutOfRange); Toast.makeText(QQMsgNotifyActivity.this,"重置了", Toast.LENGTH_SHORT).show(); } }; mTvPoint.setOnTouchListener(listener);
2.Viewpage页面引导切换动画
Github 上的项目地址:guideview
效果图:
ViewPage引导动画.gif
)
其实这个例子也是,运用贝塞尔曲线也就是在绘制那个圆形的地方而已,其他地方基本不怎么使用贝塞尔曲线。