效果圖
實(shí)現(xiàn)
要實(shí)現(xiàn)上圖的效果其實(shí)不難欢策，首先我們要獲取指示器所畫(huà)圓的個(gè)數(shù)，這個(gè)可以通過(guò)viewpager獲壬吞省：
然后就是通過(guò)畫(huà)布來(lái)繪制需要畫(huà)的圓踩寇，在自定義view中，通過(guò)重寫(xiě)onDraw方法來(lái)獲取畫(huà)布進(jìn)行繪制六水。
繪制
繪制靜態(tài)圓：
如圖所示俺孙，由于手機(jī)的原點(diǎn)起點(diǎn)位置為左上角，所以此圖將坐標(biāo)系調(diào)整為了跟手機(jī)一樣的方向掷贾，方便查看
畫(huà)靜態(tài)圓是以原點(diǎn)為起始圓的圓心睛榄，圓與圓的間隔為div，代碼如下所示：
如此畫(huà)出的圓的效果如下所示：
你會(huì)發(fā)現(xiàn)第一個(gè)圓只有右下一部分想帅，第二场靴，三個(gè)圓只有下面的一般，這是因?yàn)楫?huà)布的起始點(diǎn)為左上角港准，而我繪制的圓是以原點(diǎn)為圓心憎乙，向右間隔div畫(huà)圓的，這時(shí)就會(huì)產(chǎn)生坐標(biāo)抽只會(huì)展示第一象限叉趣，及上圖的x軸以下泞边，y軸的郵編的部分，這時(shí)為了將完成的圓展示出來(lái)疗杉，我們只需在畫(huà)布開(kāi)始繪制的時(shí)候向右平移圓的半徑(radius)阵谚，向下平移圓的半徑(radius)，代碼：
canvas.translate(x,y);//此方法為畫(huà)布平移方法此處要注意烟具，一定要先調(diào)用畫(huà)布平移方法梢什，再畫(huà)圓，否則平移是無(wú)效的朝聋，及
此寫(xiě)法調(diào)用平移是無(wú)效的
以上部分已經(jīng)完成了靜態(tài)圓的繪制嗡午，接下來(lái)將利用貝塞爾曲線繪制圓，及圓的運(yùn)動(dòng)狀態(tài)
1.繪制圓
貝塞爾曲線繪制圓的原理很簡(jiǎn)單冀痕，只需要確定12個(gè)頂點(diǎn)荔睹，就能確定一個(gè)完整的圓狸演，如上圖所示：
p0—p11表示這12個(gè)頂點(diǎn)其特殊性在于其中8(p0,p2,p3,p5,p6,p8,p9,p11)個(gè)頂點(diǎn)的位置，位置取決于數(shù)值c約等于0.551915024494f僻他；數(shù)值c的作用是用來(lái)獲取這8個(gè)特殊頂點(diǎn)的位置及其中p0-p1的長(zhǎng)度為radius*c
為了更好的管理這12個(gè)頂點(diǎn)宵距，將他們分為四部分(上，下吨拗，左满哪，右)，其中上劝篷，下部分y坐標(biāo)是不變的哨鸭，左右部分x坐標(biāo)是不變的，由此得出兩個(gè)工具類(lèi)：
這兩個(gè)工具類(lèi)用于設(shè)置這12個(gè)點(diǎn)的坐標(biāo)娇妓，方便下一步的移動(dòng)安卓中貝塞爾曲線的繪制方法通過(guò)Path類(lèi)來(lái)設(shè)置頂點(diǎn)像鸡，通過(guò)canvas.drawPath繪制代碼如下：
2.移動(dòng)
移動(dòng)結(jié)合viewpager來(lái)完成，通過(guò)viewPager.addOnPageChangeListener();來(lái)獲取移動(dòng)的狀態(tài)峡蟋。
重寫(xiě)onPageScrolled(int position, float positionOffset, int positionOffsetPixels)
主要利用position和positionOffset參數(shù)來(lái)設(shè)置圓的運(yùn)動(dòng)狀態(tài)坟桅，
運(yùn)動(dòng)主要分為四個(gè)階段，positionOffset等于0-0.2;0.2-0.4;0.4-0.8;0.8-1
第一階段：0-0.2
此圖不好畫(huà)蕊蝗，所以盜的別人的圖...
此階段主要讓右邊的線段向右平移仅乓，及改變p3,p4,p5的x坐標(biāo)，達(dá)到向右平滑移動(dòng)效果及x=當(dāng)前x坐標(biāo)(radius)+此圓的右邊坐標(biāo)到下一個(gè)圓的右邊坐標(biāo)要移動(dòng)的距離(div+2 * radius) * 移動(dòng)系數(shù)(positionOffset) + 之前移動(dòng)的距離((div+2 * radius) * position)及x = radius + (div + 2 * radius) * (position + positionOffset);代碼如下:
第二階段:0.2-0.4第一階段右移不變蓬戚，將上夸楣，下兩段的y坐標(biāo)按比例縮小，左側(cè)線段跟隨右側(cè)線段同樣的速度向右平移及p0,p1,p2,p6,p7,p8的y高度縮小縮小系數(shù)為1-positionOffset+0.2;應(yīng)為positionOffset是從0.2開(kāi)始的子漩，為了避免突然縮短豫喧，故采用平滑縮小代碼如下:
其中加減0.2是因?yàn)?positionOffset是從0.2開(kāi)始的，為了達(dá)到平滑的效果
第三階段:0.4-0.8此階段只是第二階段完了之后整體向右平滑代碼：
第四階段:0.8-1此階段為了還原到圓的形狀幢泼，在第一階段右側(cè)向右滑動(dòng)0.2個(gè)系數(shù)紧显，左側(cè)的線段沒(méi)有滑動(dòng)。故左側(cè)線段比右側(cè)線段慢了0.2個(gè)系數(shù)缕棵，在第二階段上下線段y軸各壓縮了0.2個(gè)系數(shù)孵班，所以設(shè)置第四階段為0.2個(gè)系數(shù)，方便還原圓招驴；故在此階段左側(cè)滑動(dòng)要補(bǔ)回那慢的0.2個(gè)系數(shù)篙程，即在上個(gè)階段滑動(dòng)的基礎(chǔ)上加上補(bǔ)回的坐標(biāo)上下線段位置還原操作，代碼：
橫線部分為補(bǔ)回的操作别厘，減去0.8是因?yàn)閺?.8開(kāi)始的0.8到1剛好0.2個(gè)系數(shù)
本項(xiàng)目有瑕疵虱饿，僅文章來(lái)說(shuō)明制作思路
