Android 仿instagram和微博的头像点击加载动画

github:https://github.com/qintong91/InsLoadingAnimation
前段时间发现instagram点击用户头像的加载小视频动画，效果如下：

ins.gif

对，就是转圈圈的这个，这么酷炫，我也要做一个！在整理代码和总结时候，神奇的事情发生了，在我日常刷微博的时候点开微博客户端时候突然发现：
weibo.gif

缘分啊，发现了微博Android客户端也上线了类似动画！等等，不是类似，这是特么是除了颜色和ins的一毛一样啊！
既然这个动画效果这么火，那还不赶快把我实现分享出来
如下就是我实现的效果：
demo

工程链接：https://github.com/qintong91/InsLoadingAnimation
(你如果觉得不错就不要控制自己，点进去star一下~)
下文，分别为整理介绍，使用，具体实现与总结。

1.介绍

InsLoadingView继承自ImageView,其对应的image显示为圆形。InsLoadingView有三种状态：LOADING/UNCLICKED/CLICKED，Loading时候轮廓有不断循环的动画，如上图(下文分析源码时候会详细阐明其过程)。UNCLICKED时外侧轮廓为静态的彩色圈，CLICKED外层为静态的灰色圈。此外，在其被点击时还有控件收缩的动画效果。注意：由于状态是与应用中的情况相关的，所以状态变化需要用户手动去设置。
整体效果如下(感谢家里的喵主子~)


2.使用

如果你想在自己的项目中使用的话，可以按如下几步进行：

Step 1

在build.gradle增加依赖：

dependencies {
  compile 'com.qintong:insLoadingAnimation:1.0.1'
}

Step 2

InsLoadingView继承自ImageView, 所以最基本的，可以按照ImageView的用法使用InsLoadingView：

<com.qintong.library.InsLoadingView
    android:layout_centerInParent="true"
    android:id="@+id/loading_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@mipmap/pink"/>

Step 3

设置状态：

您可以手动设置其状态，来对应在您应用中的当前状态。InsLoadingView的状态有：
LOADING: 表示InsLoadingView被点击之后正在加载内容(未加载完毕之前)，该状态下动画正在执行。
UNCLICKED: 该InsLoadingView被点击之前的状态，此状态下动画停止。
CLICKED: 表示InsLoadingView被点击和加载过，此状态下动画停止切圆圈的颜色为灰色。
默认的状态是LOADING。

可以通过一下代码设置状态：
xml:

  app:status="loading" //or "clicked",or "clicked"

java:

  mInsLoadingView.setStatus(InsLoadingView.Status.LOADING); //Or InsLoadingView.Status.CLICKED, InsLoadingView.Status.UNCLICKED

设置颜色

设置start color和start color，InsLoadingView的圆圈会显示两个颜色间的过渡。
可以按如下代码设置：

xml:

  app:start_color="#FFF700C2" //or your color
  app:end_color="#FFFFD900" //or your color

java:

  mInsLoadingView.setStartColor(Color.YELLOW); //or your color
  mInsLoadingView.setEndColor(Color.BLUE); //or your color

默认的start color和start color为#FFF700C2和#FFFFD900。

设置速度

通过设置环绕动画的时间和整体旋转的时间来改变速度：

xml:

  app:circle_duration="2000"
  app:rotate_duration="10000"

java:

  mInsLoadingView.setCircleDuration(2000);
  mInsLoadingView.setRotateDuration(10000);

默认的时间为2000ms和10000ms。

2.实现

完整的代码请见https://github.com/qintong91/InsLoadingAnimation
下面就对代码进行分析。
InsLoadingView继承自ImageView，动画效果主要通过重写onDraw()函数重新绘制。所以可以先看onDraw()方法：

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.scale(mScale, mScale, centerX(), centerY());
        drawBitmap(canvas);
        Paint paint = getPaint(getColor(0), getColor(360), 360);
        switch (mStatus) {
            case LOADING:
                drawTrack(canvas, paint);
                break;
            case UNCLICKED:
                drawCircle(canvas, paint);
                break;
            case CLICKED:
                drawClickedircle(canvas);
                break;
        }
    }

drawBitmap()为实现显示圆形图片重新完成了绘制图片的过程。之后根据当前status绘制图片外的圈：status为LOADING时候绘制时是动画，其他两种情况绘制是静态的圆圈。

(1) 动画绘制:

LOADING时候的动画是项目中最核心的部分。从动画效果中可以看出，圆弧的两端都在运动：运动较慢的一端其实反应了外圈的整体旋转(连同颜色)，较快一端的旋转还有两个过程：圆弧向外“伸展”一圈和向回“收缩”一圈的过程。
degress和cricleWidth是实时变化的，他们的值由ValueAnimator设置，这两个值分别表示整个动画整体旋转的角度（也就是动画中转速较慢一端）和转速较快的圆弧的动画。两个变量的单位都是度degress范围为0-360，cricleWidth范围为-360到360。cricleWidth圆弧向回“收缩”和向外“伸展”的过程,分别对应代码中的a和b过程,对应的circleWidth范围为-360—0度和0—360度。
在a过程中，cricleWidth + 360换算得到成正的adjustCricleWidth，adjustCricleWidth到360度绘制一个扇形圆弧，adjustCricleWidth到0度，依次向后每隔12度画小的扇形圆弧，圆弧的宽度递减。
b过程中：从0到cricleWidth：最前端绘制4个小扇形圆弧，其后到0度绘制一个长圆弧。从360度到cricleWidth，每间隔12度依次绘制小圆弧，其宽度递减。

    private void drawTrack(Canvas canvas, Paint paint) {
        canvas.rotate(degress, centerX(), centerY());
        canvas.rotate(ARC_WIDTH, centerX(), centerY());
        RectF rectF = new RectF(getWidth() * (1 - circleDia), getWidth() * (1 - circleDia),
                getWidth() * circleDia, getHeight() * circleDia);
        if (DEBUG) {
            Log.d(TAG, "cricleWidth:" + cricleWidth);
        }
        if (cricleWidth < 0) {
            //a
            float startArg = cricleWidth + 360;
            canvas.drawArc(rectF, startArg, 360 - startArg, false, paint);
            float adjustCricleWidth = cricleWidth + 360;
            float width = 8;
            while (adjustCricleWidth > ARC_WIDTH) {
                width = width - arcChangeAngle;
                adjustCricleWidth = adjustCricleWidth - ARC_WIDTH;
                canvas.drawArc(rectF, adjustCricleWidth, width, false, paint);
            }
        } else {
            //b
            for (int i = 0; i <= 4; i++) {
                if (ARC_WIDTH * i > cricleWidth) {
                    break;
                }
                canvas.drawArc(rectF, cricleWidth - ARC_WIDTH * i, 8 + i, false, paint);
            }
            if (cricleWidth > ARC_WIDTH * 4) {
                canvas.drawArc(rectF, 0, cricleWidth - ARC_WIDTH * 4, false, paint);
            }
            float adjustCricleWidth = 360;
            float width = 8 * (360 - cricleWidth) / 360;
            if (DEBUG) {
                Log.d(TAG, "width:" + width);
            }
            while (width > 0 && adjustCricleWidth > ARC_WIDTH) {
                width = width - arcChangeAngle;
                adjustCricleWidth = adjustCricleWidth - ARC_WIDTH;
                canvas.drawArc(rectF, adjustCricleWidth, width, false, paint);
            }
        }
    }

(2) 点击View收缩效果：

在onDraw()方法中有：

        canvas.scale(mScale, mScale, centerX(), centerY());

控制了View在点击后的整体收缩效果，mScale参数由ValueAnimator和触摸事件控制。在onTouchEvent()中我们要分析event，ACTION_DOWN时候按下mScale开始变小，从当前值向最向0.9变化(中间值由ValueAnimator生成)，在ACTION_UP和ACTION_CANCEL时候手指抬起，mScale由当前值向1变化。
这里值得注意的是，在重写onTouchEvent()时候，有两点要注意：1.要保证super.onTouchEvent(event)被调用，否则该View的OnClickListener和OnLongClickListener将不会响应(具体可见事件传递机制，OnClickListener/OnLongClickListener层级最低)。2.在处理ACTION_DOWN时候要保证返回值为True，否则同次动作的ACTION_UP等事件将不会再响应，这也是事件传递机制的内容。为保证这两点，此处代码如下：

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        boolean result = false;
        if (DEBUG) {
            Log.d(TAG, "onTouchEvent: " + event.getAction());
        }
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                startDownAnim();
                result = true;
                break;
            }
            case MotionEvent.ACTION_UP: {
                startUpAnim();
                break;
            }
            case MotionEvent.ACTION_CANCEL: {
                startUpAnim();
                break;
            }
        }
        return super.onTouchEvent(event) || result;
    }

    private void startDownAnim() {
        mTouchAnim.setFloatValues(mScale, 0.9f);
        mTouchAnim.start();

    }

    private void startUpAnim() {
        mTouchAnim.setFloatValues(mScale, 1);
        mTouchAnim.start();
    }

(3) ValueAnimator：

该项目用到了三个ValueAnimator：分别控制前文的degress，cricleWidth以及mScale，绘制圆弧的过程中是减速的过程，所以用了减速插值器，其他两个过程用的都是线性插值器。此外，还需要判断当前是绘制圆弧向外伸展还是向内伸缩，所以用了个boolean值isFirstCircle进行判断，在动画Repeat时候对其值反转。代码如下：

    private void onCreateAnimators() {
        mRotateAnim = ValueAnimator.ofFloat(0, 180, 360);
        mRotateAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                degress = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        mRotateAnim.setInterpolator(new LinearInterpolator());
        mRotateAnim.setDuration(mRotateDuration);
        mRotateAnim.setRepeatCount(-1);
        mCircleAnim = ValueAnimator.ofFloat(0, 360);
        mCircleAnim.setInterpolator(new DecelerateInterpolator());
        mCircleAnim.setDuration(mCircleDuration);
        mCircleAnim.setRepeatCount(-1);
        mCircleAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                if (isFirstCircle) {
                    cricleWidth = (float) animation.getAnimatedValue();
                } else {
                    cricleWidth = (float) animation.getAnimatedValue() - 360;
                }
                postInvalidate();
            }
        });
        mCircleAnim.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {

            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                isFirstCircle = !isFirstCircle;
            }
        });
        mTouchAnim = new ValueAnimator();
        mTouchAnim.setInterpolator(new DecelerateInterpolator());
        mTouchAnim.setDuration(200);
        mTouchAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mScale = (float) animation.getAnimatedValue();
                postInvalidate();
            }
        });
        startAnim();
    }

(4) 绘制圆形图片：

由于与ImageView不同，这里图片要显示成圆形，所以这里我们通过Drawble拿到Bitmap对象后，将其BitmapShader修剪成正方形，paint的shader设置为其BitmapShader，再用该paint画圆：

    private void drawBitmap(Canvas canvas) {
        Paint bitmapPaint = new Paint();
        setBitmapShader(bitmapPaint);
        RectF rectF = new RectF(getWidth() * (1 - bitmapDia), getWidth() * (1 - bitmapDia),
                getWidth() * bitmapDia, getHeight() * bitmapDia);
        canvas.drawOval(rectF, bitmapPaint);
    }

    private void setBitmapShader(Paint paint) {
        Drawable drawable = getDrawable();
        Matrix matrix = new Matrix();
        if (null == drawable) {
            return;
        }
        Bitmap bitmap = drawableToBitmap(drawable);
        BitmapShader tshader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        float scale = 1.0f;
        int bSize = Math.min(bitmap.getWidth(), bitmap.getHeight());
        scale = getWidth() * 1.0f / bSize;
        matrix.setScale(scale, scale);
        if (bitmap.getWidth() > bitmap.getHeight()) {
            matrix.postTranslate(-(bitmap.getWidth() * scale - getWidth()) / 2, 0);
        } else {
            matrix.postTranslate(0, -(bitmap.getHeight() * scale - getHeight()) / 2);
        }
        tshader.setLocalMatrix(matrix);
        paint.setShader(tshader);
    }

    private Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable instanceof BitmapDrawable) {
            BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;
            return bitmapDrawable.getBitmap();
        }
        int w = drawable.getIntrinsicWidth();
        int h = drawable.getIntrinsicHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, w, h);
        drawable.draw(canvas);
        return bitmap;
    }

(5) 颜色：

在onDraw()中,getPaint()得到了从mStartColor到mEndColor的过渡的颜色：

   Paint paint = getPaint(mStartColor, mEndColor, 360);

其中：

    private Paint getPaint(int startColor, int endColor, double arcWidth) {
        Paint paint = new Paint();
        Shader shader = new LinearGradient(0f, 0f, (float) (getWidth() * circleDia * (arcWidth - ARC_WIDTH * 4) / 360),
                getHeight() * strokeWidth, startColor, endColor, CLAMP);
        paint.setShader(shader);
        setPaintStroke(paint);
        return paint;
    }

(6) 重写onMeasure()：

因为该控件是圆形，所以还需要重写onMeasure()方法，使其最后长和高一致，并针对MATCH_PARENT和WRAP_CONTENT以及指定具体宽高的情况下分别处理，注意WRAP_CONTENT下这里是指定了最大宽/高为300px，这与ImageView不同。代码如下：

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        final int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        final int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        final int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (DEBUG) {
            Log.d(TAG, "onMeasure widthMeasureSpec:" + widthSpecMode + "--" + widthSpecSize);
            Log.d(TAG, "onMeasure heightMeasureSpec:" + heightSpecMode + "--" + heightSpecSize);
        }
        int width;
        if (widthSpecMode == MeasureSpec.EXACTLY && heightSpecMode == MeasureSpec.EXACTLY) {
            width = Math.min(widthSpecSize, heightSpecSize);
        } else {
            width = Math.min(widthSpecSize, heightSpecSize);
            width = Math.min(width, 300);
        }
        setMeasuredDimension(width, width);
    }

总结

InsLoadingAnimation主要是由属性动画实现，也加深了对View的生命周期和事件传递等方法的理解。更进一步的，也练习了canvas上的绘图。最后我们就有了和Instagram和微博一样炫酷的动画效果~ 如果你觉得不错，赶快去https://github.com/qintong91/InsLoadingAnimation star/fork一下吧，欢迎交流和建议~

这么牛逼的项目，你不star一个么
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,937评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,503评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,712评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,668评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,677评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,601评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,975评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,637评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,881评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,621评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,710评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,387评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,971评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,947评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,189评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,805评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,449评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,412评论 25赞 707
  • 优秀第三方
    发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4赞 62
  • 一个人的旅行
    当我们独自背上行囊，开启一场远行的时候，便注定要一个人承受旅途里的所有孤独。 不知道找谁来拍照，记录旅途中美好的自...
    田锦钧阅读 344评论 0赞 5
  • 知小酌的漫漫不归路(一)
    知小酌，又名懒小拖，年过3旬，自画像...还在学习中...，一直对手绘很感兴趣，不过人如其名，懒嘛，又拖、拖、拖，...
    知小酌阅读 225评论 2赞 1