https://github.com/dengzhi00/BzCircle/blob/master/img/a.gif
要实现上图的效果其实不难,首先我们要获取指示器所画圆的个数,这个可以通过viewpager获取:
然后就是通过画布来绘制需要画的圆,在自定义view中,通过重写onDraw方法来获取画布进行绘制。
如图所示,由于手机的原点起点位置为左上角,所以此图将坐标系调整为了跟手机一样的方向,方便查看
画静态圆是以原点为起始圆的圆心,圆与圆的间隔为div,代码如下所示:
你会发现第一个圆只有右下一部分,第二,三个圆只有下面的一般,这是因为画布的起始点为左上角,
而我绘制的圆是以原点为圆心,向右间隔div画圆的,这时就会产生坐标抽只会展示第一象限,及上图的x轴以下,y轴的邮编的部分,这时为了将完成的圆展示出来,我们只需在画布开始绘制的时候向右平移圆的半径(radius),向下平移圆的半径(radius),代码:
canvas.translate(x,y);//此方法为画布平移方法
此处要注意,一定要先调用画布平移方法,再画圆,否则平移是无效的,及
此写法调用平移是无效的
以上部分已经完成了静态圆的绘制,接下来将利用贝塞尔曲线绘制圆,及圆的运动状态
贝塞尔曲线绘制圆的原理很简单,只需要确定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绘制
代码如下:
移动结合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