Android仿「守望先鋒」加載動畫

轉載請註明本文出自大苞米的博客（http://blog.csdn.net/a396901990），謝謝支持！

---

效果圖

實現思路

• 畫一個小六邊形
• 按效果圖位置畫七個小六邊形
• 實現一個小六邊形的顯示與隱藏動畫
• 按順序播放七個小六邊形的動畫

詳解

畫一個小六邊形

畫一個六邊形只須要知道位置與大小。
位置這裏使用中心點，大小使用中心點到頂點的距離。根據這兩個數據就能夠經過數學方法很容易的求出6個頂點座標。

求出6個頂點座標後能夠經過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);

按效果圖位置畫七出個小六邊形

仔細觀察效果圖能夠發現七個小六邊形其實就是一個旋轉後的大六邊形的6個頂點＋1箇中心點，以下圖所示：

這裏有個坑，就是必定要注意大六邊形和小六邊形的邊長問題！

另外，其實用純數學算出6個小六邊形的中心點也是很容易的。。。

實現一個小六邊形的顯示與隱藏動畫

動畫效果分兩種，一個是顯示，一個是隱藏。這裏使用ValueAnimator來實現：

顯示：

先放大並改變透明度

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也可。

按順序播放七個小六邊形的動畫

根據效果圖，咱們將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