這次不是十分鐘動畫，今天要分享的是PathMeasure的玩法。
首先我們來回顧一下童年吧~~90后滿滿的記憶
小時候總是幻想著自己能變身，今天我們就來用代碼實現(xiàn)變身的第一步吧，動畫繪制一個魔法陣magic_circle~~
靜態(tài)圖片比較容易，我們用 Path 設置好路徑，然后再 canvas.drawPath 即可，但是靜態(tài)的也太 low 了一點，我們要讓它動起來。
實現(xiàn)效果：
效果看完了，不會寫的童鞋肯定已經(jīng)懵逼了，會的童鞋可以出門左拐了，因為實現(xiàn)實在太簡單。
好了，在開始擼代碼之前，我們先來學習一個類 PathMeasure。我們的光能使者陣就是是基于這個類的兩個方法擼出來的。
PathMeasure
這個類的 class 注釋就一個版權說明，醬紫~
踏馬的，Google 工程師都偷懶了，注釋都不寫。。。幸好這個類只有一百多行代碼，那我們就自己看吧
Public constructors
- PathMeasure 創(chuàng)建一個空的 pathmeasure 對象
- PathMeasure(Path path,boolean forceClosed)創(chuàng)建一個帶 path 參數(shù)的 PathMeasure,forceClosed控制 path 是否自動閉合
Public methods
- getLength() 返回當前 Path 的總長度。
- getMatrix(float distance, Matrix matrix, int flags)
- getPosTan(float distance, float[] pos, float[] tan)獲取distance長度的 point 值給 pos，point 點的正切值給 tan。
- getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) 獲取 path 的一個片段，即startD到 stopD 的線段，輔助給 dst。
- isClosed() 是否自動閉合
- nextContour() 移動到下一條曲線。如果 path 中含有不連續(xù)的線條，getLength、getPosTan等方法之會在第一條線上運行，需要使用這個方法跳到第二條線
- setPath(Path path, boolean forceClosed)
是不是很簡單，就這么幾個方法，現(xiàn)在去畫光能使者陣有思路了么~~
接下來為了便于大家理解，我們再來簡單回顧一下 path 的 api，因為靜態(tài)的光能使者陣是需要 path 去繪制的。
Path
| 方法名 | 作用 |
|---|---|
| moveTo | 移動到指定點 |
| setLastPoint | 重新設置當前 Path 的最后一個點，如果當前 Path 為空，則等同上個方法 |
| lineTo | 添加當前點到一個指定點的直線 |
| close | 連接當前點到起點，形成閉合路徑 |
| addRect、addRoundRect、addOval、addCircle、addPath、addArc、arcTo | 添加各種圖形 |
| isEmpty | 是否為空 |
| isRect | 是否為矩形 |
| set | 用一個新的 path 替換 |
| offset | 對當前的路徑進行偏移，不會影響后續(xù)操作 |
| quadTo、cubicTo | 貝塞爾曲線 |
| rMoveTo、rLineTo、rQuaTo、rCubicTo | 帶 r 的是基于當前點的偏移量，不帶 r 基于坐標原點 |
| setFillType、getFillType | 設置填充模式 |
| transform | 矩陣變換 |
就這樣簡單回顧一下吧，具體玩法可以參考 Hencoder 的 bolg【HenCoder Android 開發(fā)進階: 自定義 View 1-1 繪制基礎】
動畫拆解
好了，準備工作完成，我們開始擼代碼
第一步，繪制靜態(tài)的光能使者陣
首先繪制兩個圓，然后就是中間的六角星（其實仔細看就是兩個三角形）。
都是很簡單的方法，同學們動手去畫的時候可能會遇到一個這樣的問題，就是三角形的三個點不好取。其實很簡單，直接在圓上取0，1/3，2/3長度的點即可，剛剛我們不是說了 PathMeasure 的方法么，用getPosTan就可以實現(xiàn)。
第二步，讓光能使者陣動起來
這里我們把這個動畫效果分成三個階段吧。
- 第一階段，繪制兩個圓
如上圖所示，這里兩個圓是慢慢繪制出來的， 圓的 path 很容易繪制出來，這里我就不講了，然后PathMeasure的getLength可以獲取 path 總的長度，getSegment可以獲取某個點到某個點的 Path。因此一個 ValueAnimator 就可以解決從0到100%長度的過程，具體實現(xiàn)看后面的代碼。
然后問題來了，path畫出來的圓的起點在哪里？怎么控制兩個圓開始繪制的角度不一樣。有同學可能想到了旋轉90°再畫第二個圓，當然這種方式是可以實現(xiàn)的，但是由于后面的三角形也需要旋轉，這里我們就不用 path 畫圓了，用 path 添加一個正方形 Rect 的圓弧也是一個圓，然后我們的圓弧可以控制開始的角度，弧度。
然后變成這樣了
WTF？角度怎么不對了，我明明設置的開始角度的呀
innerCircle.addArc(innerRect, 150, -360);
outerCircle.addArc(outerRect, 60, -360);
最后有個大牛說你的圓變成閉環(huán)了，PathMeasure 找不到開始點，用了默認的。你把360度改成359.9讓他不是一個閉環(huán)的圓就行了。
- 第二階段，兩個點在圓里面彈射
看起來好像還要干什么碰撞反彈之類的事，一副高科技的樣子，其實不是的。
軌跡就是兩個三角形，怎么讓兩條線跟著三角形走呢，而且走的時候還要不段變化長度。
剛剛第一步我們用 ValueAnimator 來控制一個圓從0到100%的過程，
pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
不斷截取起點到*%長度的 path 賦值給drawPath。
從里是從起點開始截取，那么我們不從起點開始截取，從當前點附近開始截取不就行了嗎，哈哈哈哈~so easy
float stopD = distance * pathMeasure.getLength();
float startD = stopD - (0.5f - Math.abs(0.5f - distance)) * 200;
pathMeasure.getSegment(startD, stopD, drawPath, true);
醬紫~~
- 第三階段繪制兩個三角形
其實兩個三角形就是第二步的運動軌跡，也是就是說直接用第階段的 Path 即可，然后再用第一階段一樣的辦法就可以實現(xiàn)效果。
代碼實現(xiàn)
public class GranzortView extends View {
private Paint paint;
private Path innerCircle;//內圓 path
private Path outerCircle;//外圓 path
private Path trangle1;//第一個三角形的 Path
private Path trangle2;//第二個三角形的 Path
private Path drawPath;//用于截取路徑的 Path
private PathMeasure pathMeasure;
private float mViewWidth;
private float mViewHeight;
private long duration = 3000;
private ValueAnimator valueAnimator;
private Handler mHanlder;
private float distance;//當前動畫執(zhí)行的百分比取值為0-1
private ValueAnimator.AnimatorUpdateListener animatorUpdateListener;
private Animator.AnimatorListener animatorListener;
private State mCurrentState = State.CIRCLE_STATE;
//三個階段的枚舉
private enum State {
CIRCLE_STATE,
TRANGLE_STATE,
FINISH_STATE
}
public GranzortView(Context context) {
this(context, null);
}
public GranzortView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public GranzortView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mViewWidth = w;
mViewHeight = h;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(getResources().getColor(R.color.colorPrimary));
canvas.save();
canvas.translate(mViewWidth / 2, mViewHeight / 2);
switch (mCurrentState) {
case CIRCLE_STATE:
drawPath.reset();
pathMeasure.setPath(innerCircle, false);
pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
canvas.drawPath(drawPath, paint);
pathMeasure.setPath(outerCircle, false);
drawPath.reset();
pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
canvas.drawPath(drawPath, paint);
break;
case TRANGLE_STATE:
canvas.drawPath(innerCircle, paint);
canvas.drawPath(outerCircle, paint);
drawPath.reset();
pathMeasure.setPath(trangle1, false);
float stopD = distance * pathMeasure.getLength();
float startD = stopD - (0.5f - Math.abs(0.5f - distance)) * 200;
pathMeasure.getSegment(startD, stopD, drawPath, true);
canvas.drawPath(drawPath, paint);
drawPath.reset();
pathMeasure.setPath(trangle2, false);
pathMeasure.getSegment(startD, stopD, drawPath, true);
canvas.drawPath(drawPath, paint);
break;
case FINISH_STATE:
canvas.drawPath(innerCircle, paint);
canvas.drawPath(outerCircle, paint);
drawPath.reset();
pathMeasure.setPath(trangle1, false);
pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
canvas.drawPath(drawPath, paint);
drawPath.reset();
pathMeasure.setPath(trangle2, false);
pathMeasure.getSegment(0, distance * pathMeasure.getLength(), drawPath, true);
canvas.drawPath(drawPath, paint);
break;
}
canvas.restore();
}
private void init() {
initPaint();
initPath();
initHandler();
initAnimatorListener();
initAnimator();
mCurrentState = State.CIRCLE_STATE;
valueAnimator.start();
}
private void initHandler() {
mHanlder = new Handler(){
@Override
public void handleMessage(Message msg) {
switch (mCurrentState) {
case CIRCLE_STATE:
mCurrentState = State.TRANGLE_STATE;
valueAnimator.start();
break;
case TRANGLE_STATE:
mCurrentState = State.FINISH_STATE;
valueAnimator.start();
break;
}
}
};
}
private void initAnimatorListener() {
animatorUpdateListener = new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
distance = (float) animation.getAnimatedValue();
invalidate();
}
};
animatorListener = new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
Log.e("star:",mCurrentState+"_");
}
@Override
public void onAnimationEnd(Animator animation) {
Log.e("end:",mCurrentState+"_");
mHanlder.sendEmptyMessage(0);
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
};
}
private void initAnimator() {
valueAnimator = ValueAnimator.ofFloat(0, 1).setDuration(duration);
valueAnimator.addUpdateListener(animatorUpdateListener);
valueAnimator.addListener(animatorListener);
}
private void initPath() {
innerCircle = new Path();
outerCircle = new Path();
trangle1 = new Path();
trangle2 = new Path();
drawPath = new Path();
pathMeasure = new PathMeasure();
RectF innerRect = new RectF(-220, -220, 220, 220);
RectF outerRect = new RectF(-280, -280, 280, 280);
innerCircle.addArc(innerRect, 150, -359.9F); // 不能取360f，否則可能造成測量到的值不準確
outerCircle.addArc(outerRect, 60, -359.9F);
pathMeasure.setPath(innerCircle, false);
float[] pos = new float[2];
pathMeasure.getPosTan(0, pos, null); // 獲取開始位置的坐標
trangle1.moveTo(pos[0], pos[1]);
pathMeasure.getPosTan((1f / 3f) * pathMeasure.getLength(), pos, null);
System.out.println("pos : " + pos[0] + " " + pos[1]);
trangle1.lineTo(pos[0], pos[1]);
pathMeasure.getPosTan((2f / 3f) * pathMeasure.getLength(), pos, null);
trangle1.lineTo(pos[0], pos[1]);
trangle1.close();
pathMeasure.getPosTan((2f / 3f) * pathMeasure.getLength(), pos, null);
Matrix matrix = new Matrix();
matrix.postRotate(-180);
trangle1.transform(matrix, trangle2);
}
private void initPaint() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeJoin(Paint.Join.BEVEL);
paint.setShadowLayer(15, 0, 0, Color.WHITE);//白色光影效果
}}
好，光能使者陣完成了，離變身成為光能使者只差喊口號和變身動作了，加油吧，有夢想的程序員。
最后，感覺小伙伴Moo_Night分享的光能使者陣。
