android用贝塞尔曲线完成viewpager轮播指示器

效果图

https://github.com/dengzhi00/BzCircle/blob/master/img/a.gif

实现

要实现上图的效果其实不难，首先我们要获取指示器所画圆的个数，这个可以通过viewpager获取：

然后就是通过画布来绘制需要画的圆，在自定义view中，通过重写onDraw方法来获取画布进行绘制。

绘制

绘制静态圆：

如图所示，由于手机的原点起点位置为左上角，所以此图将坐标系调整为了跟手机一样的方向，方便查看

画静态圆是以原点为起始圆的圆心，圆与圆的间隔为div，代码如下所示：

如此画出的圆的效果如下所示：

你会发现第一个圆只有右下一部分，第二，三个圆只有下面的一般，这是因为画布的起始点为左上角，
而我绘制的圆是以原点为圆心，向右间隔div画圆的，这时就会产生坐标抽只会展示第一象限，及上图的x轴以下，y轴的邮编的部分，这时为了将完成的圆展示出来，我们只需在画布开始绘制的时候向右平移圆的半径(radius)，向下平移圆的半径(radius)，代码：

canvas.translate(x,y);//此方法为画布平移方法
此处要注意，一定要先调用画布平移方法，再画圆，否则平移是无效的，及

此写法调用平移是无效的

以上部分已经完成了静态圆的绘制，接下来将利用贝塞尔曲线绘制圆，及圆的运动状态

1.绘制圆

贝塞尔曲线绘制圆的原理很简单，只需要确定12个顶点，就能确定一个完整的圆，如上图所示：
p0—p11表示这12个顶点其特殊性在于其中8(p0,p2,p3,p5,p6,p8,p9,p11)个顶点的位置，位置取决于数值c约等于0.551915024494f；数值c的作用是用来获取这8个特殊顶点的位置及其中p0-p1的长度为radius*c
为了更好的管理这12个顶点，将他们分为四部分(上，下，左，右)，其中上，下部分y坐标是不变的，左右部分x坐标是不变的，由此得出两个工具类：

这两个工具类用于设置这12个点的坐标，方便下一步的移动
安卓中贝塞尔曲线的绘制方法通过Path类来设置顶点，通过canvas.drawPath绘制
代码如下：

2.移动

移动结合viewpager来完成，通过viewPager.addOnPageChangeListener();来获取移动的状态。
重写onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
主要利用position和positionOffset参数来设置圆的运动状态，
运动主要分为四个阶段，positionOffset等于0-0.2;0.2-0.4;0.4-0.8;0.8-1
第一阶段：0-0.2

此图不好画，所以盗的别人的图…
此阶段主要让右边的线段向右平移，及改变p3,p4,p5的x坐标，达到向右平滑移动效果
及x=当前x坐标(radius)+此圆的右边坐标到下一个圆的右边坐标要移动的距离(div+2 * radius) * 移动系数(positionOffset) + 之前移动的距离((div+2 * radius) * position)
及x = radius + (div + 2 * radius) * (position + positionOffset);
代码如下:

第二阶段:0.2-0.4
第一阶段右移不变，将上，下两段的y坐标按比例缩小，左侧线段跟随右侧线段同样的速度向右平移
及p0,p1,p2,p6,p7,p8的y高度缩小
缩小系数为1-positionOffset+0.2;应为positionOffset是从0.2开始的，为了避免突然缩短，故采用平滑缩小
代码如下:

其中加减0.2是因为 positionOffset是从0.2开始的，为了达到平滑的效果

第三阶段:0.4-0.8
此阶段只是第二阶段完了之后整体向右平滑
代码：

第四阶段:0.8-1
此阶段为了还原到圆的形状，在第一阶段右侧向右滑动0.2个系数，左侧的线段没有滑动。故左侧线段比右侧线段慢了0.2个系数，在第二阶段上下线段y轴各压缩了0.2个系数，所以设置第四阶段为0.2个系数，方便还原圆；
故在此阶段左侧滑动要补回那慢的0.2个系数，即在上个阶段滑动的基础上加上补回的坐标
上下线段位置还原操作，
代码：

横线部分为补回的操作，减去0.8是因为从0.8开始的0.8到1刚好0.2个系数

demo地址
https://github.com/dengzhi00/BzCircle

效果图

实现

绘制

1.绘制圆

2.移动

更多相关文章

随机推荐