Android仿“守望先鋒”加載動畫
原效果圖:
實(shí)現(xiàn)效果圖：
實(shí)現(xiàn)思路：
畫一個小六邊形
按效果圖位置畫七個小六邊形
實(shí)現(xiàn)一個小六邊形的顯示與隱藏動畫
按順序播放七個小六邊形的動畫
詳解：
畫一個小六邊形
畫一個六邊形只需要知道位置與大小，位置這里使用中心點(diǎn)，大小使用中心點(diǎn)到頂點(diǎn)的距離，根據(jù)這兩個數(shù)據(jù)就可以通過數(shù)學(xué)方法很容易的求出6個頂點(diǎn)坐標(biāo)。
求出6個頂點(diǎn)坐標(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)七個小六邊形其實(shí)就是一個旋轉(zhuǎn)后的大六邊形的6個頂點(diǎn)＋1個中心點(diǎn)，如下圖所示：
這里有個坑就是主意大六邊形和小六邊形的變長問題，其實(shí)用純數(shù)學(xué)算出6個小六邊形的中心點(diǎn)也是很容易的。
實(shí)現(xiàn)一個小六邊形的顯示與隱藏動畫
動畫效果分兩種，一個是顯示，一個是隱藏。這里使用ValueAnimator來實(shí)現(xiàn)：
顯示：
先放大并改變透明度
ValueAnimator mShowAnimation = ValueAnimator.ofFloat(0, 1);mShowAnimation.setDuration(ANIMATION_DURATION);mShowAnimation.setInterpolator(new DecelerateInterpolator());mShowAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic 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() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {float animValue = (float) animation.getAnimatedValue();mScale = 0.5f + animValue / 2;mPaint.setAlpha((int) (animValue * 255));mLoadingView.invalidate();}});
隱藏動畫其實(shí)就是把顯示動畫倒過來，因此直接將顯示動畫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 animationfor (OverWatchViewItem item : items) {animators.add(item.getShowAnimation());}// add hide animationfor (OverWatchViewItem item : items) {animators.add(item.getHideAnimation());}// 播放動畫序列mPlayAnimator.playSequentially(animators);mPlayAnimator.start();
源碼地址：
https://github.com/a396901990/LoadingView-OverWatch
到這里就結(jié)束啦。
評論
圖片
表情