QQ数字提示的粘连效果:DraggableFlagView与BezierDemo比较

安卓版qq不知道什么时候起加入了一个很有意思的功能,在消息选项卡右上角显示未读提示,这个提示是可以拖拽的,拖拽距离越长就会拉的越细。

原以为很复杂,不过很快就有人实现了,目前实现这种效果的开源项目有两个都是中国人写的,分别是DraggableFlagViewBezierDemo

BezierDemo

 

DraggableFlagView

draggableflagview.gif

这篇文章主要是讲解两者的区别。后面将会选择其中一个项目做源码分析,看看这种粘连效果到底是如何实现的。

注:文章见  http://jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0311/2577.html 

BezierDemo和DraggableFlagView

BezierDemo基本上是完全实现了qq上的所有效果,更像一个山寨版。而DraggableFlagView则着重于探索这种效果的实现方式,并对效果进行了改进。

从源码上来说BezierDemo只求模仿qq的效果,不太注重代码的普适性和规范性,而DraggableFlagView则更加像一个可以重复利用的控件。

但是两者实现的核心思想是一致的,都是使用了贝赛尔曲线,如果你不知道贝塞尔曲线是什么,请看这篇文章  。

android中的path.quadTo()方法提供了绘制二阶贝塞尔曲线的方法。这两个项目都是用的quadTo来绘制的。

实际上贝塞尔曲线在代码模拟现实生活中平滑过度效果的时候会非常有用,因此学会了贝塞尔曲线的应用并勇敢尝试相当于打开了一片新的天地。BezierDemo作者的另一个项目SpringIndicator 就是一个例子。