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

效果图


实现

要实现上图的效果其实不难,首先我们要获取指示器所画圆的个数,这个可以通过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地址:github.com/dengzhi00/BzCircle

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容