效果圖
這里寫圖片描述
這里寫圖片描述
這里寫圖片描述
實現(xiàn)思路
- 畫一個小六邊形
- 按效果圖位置畫七個小六邊形
- 實現(xiàn)一個小六邊形的顯示與隱藏動畫
- 按順序播放七個小六邊形的動畫
詳解
畫一個小六邊形
畫一個六邊形只需要知道位置與大小。
位置這里使用中心點旗扑，大小使用中心點到頂點的距離。根據(jù)這兩個數(shù)據(jù)就可以通過數(shù)學(xué)方法很容易的求出6個頂點坐標(biāo)眠菇。
求出6個頂點坐標(biāo)后可以通過canvas.drawPath來畫出六邊形：
Paint mPaint = new Paint();
mPaint.setColor(mLoadingView.color);
mPaint.setStrokeWidth(3);
mPaint.setAlpha(0);
CornerPathEffect corEffect = new CornerPathEffect(length / CORNER_PATH_EFFECT_SCALE);
mPaint.setPathEffect(corEffect);
PointF[] points = getHexagonPoints(centerPoint, length);
Path mPath = new Path();
mPath.moveTo(points[1].x, points[1].y);
mPath.lineTo(points[2].x, points[2].y);
mPath.lineTo(points[3].x, points[3].y);
mPath.lineTo(points[4].x, points[4].y);
mPath.lineTo(points[5].x, points[5].y);
mPath.lineTo(points[6].x, points[6].y);
mPath.close();
canvas.drawPath(mPath, mPaint);
按效果圖位置畫七出個小六邊形
仔細(xì)觀察效果圖可以發(fā)現(xiàn)七個小六邊形其實就是一個旋轉(zhuǎn)后的大六邊形的6個頂點＋1個中心點捎废，如下圖所示：
這里寫圖片描述
這里有個坑就是主意大六邊形和小六邊形的變長問題！
其實用純數(shù)學(xué)算出6個小六邊形的中心點也是很容易的登疗。
實現(xiàn)一個小六邊形的顯示與隱藏動畫
動畫效果分兩種，一個是顯示断傲，一個是隱藏智政。這里使用ValueAnimator來實現(xiàn)：
顯示：
先放大并改變透明度
ValueAnimator mShowAnimation = ValueAnimator.ofFloat(0, 1);
mShowAnimation.setDuration(ANIMATION_DURATION);
mShowAnimation.setInterpolator(new DecelerateInterpolator());
mShowAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animValue = (float) animation.getAnimatedValue();
mScale = 0.5f + animValue / 2;
mPaint.setAlpha((int) (animValue * 255));
mLoadingView.invalidate();
}
});
隱藏：
ValueAnimator mHideAnimation = ValueAnimator.ofFloat(1, 0);
mHideAnimation.setDuration(ANIMATION_DURATION);
mHideAnimation.setInterpolator(new DecelerateInterpolator());
mHideAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float animValue = (float) animation.getAnimatedValue();
mScale = 0.5f + animValue / 2;
mPaint.setAlpha((int) (animValue * 255));
mLoadingView.invalidate();
}
});
隱藏動畫其實就是把顯示動畫倒過來续捂，因此直接將顯示動畫reverse也可。
按順序播放七個小六邊形的動畫
根據(jù)效果圖牙瓢，我們將7個小六邊形編號為1，2页慷，3聂渊，4，5汉嗽，6，7饼暑。則一輪動畫為：
1顯示 -> 2顯示 -> 3顯示 -> 4顯示 -> 5顯示 -> 6顯示 -> 7顯示 -> 1隱藏 -> 2隱藏 -> 3隱藏 -> 4隱藏 -> 5隱藏 -> 6隱藏 -> 7隱藏
Android中可以使用AnimatorSet的playSequentially方法來播放一組順序動畫弓叛，所以我們只要不停的播放這個動畫序列就ok了！
代碼如下：
AnimatorSet mPlayAnimator = new AnimatorSet();
ArrayList<Animator> animators = new ArrayList<>();
// add show animation
for (OverWatchViewItem item : items) {
animators.add(item.getShowAnimation());
}
// add hide animation
for (OverWatchViewItem item : items) {
animators.add(item.getHideAnimation());
}
// 播放動畫序列
mPlayAnimator.playSequentially(animators);
mPlayAnimator.start();
最后
Github地址：
https://github.com/a396901990/LoadingView-OverWatch
