android canvas光晕绘制_Android仿instagram和微博的头像点击加载动画

前段时间发现instagram点击用户头像的加载小视频动画，效果如下：

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

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

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：

    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="2