LoadingDrawable

LoadingDrawable

LoadingDrawable是github上挺火的一个项目, 通过自定义Drawable来实现各式各样的Loading动画. 现已经有多种有意思的动画效果, 可以直接用在自己项目中, 或者仿照他的做法实现自己的loading动画.

LoadingDrawable使用

凡是好用的东西一般都使用非常简单, 当然这个也不例外, 只要有一个ImageView, 在代码中创建一个需要的LoadingDrawable, 再将drawable设给ImageView就可以了.

mIvMaterial= (ImageView) findViewById(R.id.material_view);

//使用自己需要的LoadingRenderer

mMaterialDrawable=newLoadingDrawable(newMaterialLoadingRenderer(this));

mIvMaterial.setImageDrawable(mMaterialDrawable);

LoadingDrawable分析

概述

LoadingDrawable通过自定义一个Drawable将不同的动画画出来, 其中的对于不同的动画对应不同的LoadingRender, 他们都是LoadingRender的子类, 分别重写了不同的计算和绘制的方法以实现不同的效果. 下面先看看他所涉及的类:

LoadingDrawable包结构
真的是很简捷清晰, 高亮是Drawable的子类, render包下是对不同动画的渲染器, 其中的LoadingRender是基类, 实现了基本的逻辑和定义绘制计算接口. 上面的几个包就是具体的动画实现.

LoadingDrawable

直接来看LoadingDrawable的实现:

//LoadingDrawable继承自Drawable, 可以自定义不用交互的可见控件
//实现Animatable接口, 他就成为一个动画, 可以在合适的时机显示或者停止
public class LoadingDrawable extends Drawable implements Animatable {
  private LoadingRenderer mLoadingRender;
  //定义一个Callback, 并将其传递给Render, 负责更新当前视图, 将其传递给Render可以避免Render去持有过多的引用
  private final Callback mCallback = new Callback() {
    @Override
    public void invalidateDrawable(Drawable d) {
      invalidateSelf();
    }
    @Override
    public void scheduleDrawable(Drawable d, Runnable what, long when) {
      scheduleSelf(what, when);
    }
    @Override
    public void unscheduleDrawable(Drawable d, Runnable what) {
      unscheduleSelf(what);
    }
  };

  //构造方法, 将Render保存在Drawable中, 方便后面将所有的计算绘制任务交给他
  public LoadingDrawable(LoadingRenderer loadingRender) {
    this.mLoadingRender = loadingRender;
    this.mLoadingRender.setCallback(mCallback);
  }

  //直接将绘制的任务交给Render去做, 后面的好多方法也是类似的, 直接给Render去处理
  @Override
  public void draw(Canvas canvas) {
    mLoadingRender.draw(canvas, getBounds());
  }我是我
  /*...省略部分代码...*/
}

代码量不大, 主要是将任务交给Render处理, 其中使用Callback的思想要学习一下.

LoadingRenderer

最核心的部分, 连接LoadingDrawable与各个具体动画, 规范各种动画接口的类, 就是LoadingRenderer, 下面我们看看他都做了什么.

public abstract class LoadingRenderer {

  public LoadingRenderer(Context context) {
    //设置大小
    setupDefaultParams(context);
    //设置动画更新相关
    setupAnimators();
  }

  //其中对不同动画的抽象都在这里定义, 在子类中实现这些方法以实现对应动画
  public abstract void draw(Canvas canvas, Rect bounds);
  public abstract void computeRender(float renderProgress);
  public abstract void setAlpha(int alpha);
  public abstract void setColorFilter(ColorFilter cf);
  public abstract void reset();

  //这里的start其实就是start渲染动画
  public void start() {
    reset();
    setDuration(mDuration);
    mRenderAnimator.start();
  }

  public void stop() {
    mRenderAnimator.cancel();
  }

  public boolean isRunning() {
    return mRenderAnimator.isRunning();
  }

  public void setCallback(Drawable.Callback callback) {
    this.mCallback = callback;
  }

  protected void invalidateSelf() {
    mCallback.invalidateDrawable(null);
  }

  private void setupDefaultParams(Context context) {
    final DisplayMetrics metrics = context.getResources().getDisplayMetrics();
    final float screenDensity = metrics.density;

    mWidth = DEFAULT_SIZE * screenDensity;
    mHeight = DEFAULT_SIZE * screenDensity;
    mStrokeWidth = DEFAULT_STROKE_WIDTH * screenDensity;
    mCenterRadius = DEFAULT_CENTER_RADIUS * screenDensity;
    mDuration = ANIMATION_DURATION;
  }

  private void setupAnimators() {
    mRenderAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
    mRenderAnimator.setRepeatCount(Animation.INFINITE);
    mRenderAnimator.setRepeatMode(Animation.RESTART);
    //fuck you! the default interpolator is AccelerateDecelerateInterpolator
    mRenderAnimator.setInterpolator(new LinearInterpolator());
    mRenderAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
      @Override
      public void onAnimationUpdate(ValueAnimator animation) {
        //就是从这里把计算的任务与绘制的任务分开, 动画这部分只负责计算
        //真正的画出来是在draw里面
        computeRender((float) animation.getAnimatedValue());
        //通过CallBack通知Drable更新
        invalidateSelf();
      }
    });
  }
  
  /*....省略部分代码.....*/

  public void setDuration(long duration) {
    this.mDuration = duration;
    mRenderAnimator.setDuration(mDuration);
  }
}

LoadingRender对各种不同的动画进行了抽象, 将动画的计算和绘制拆分出来, 十分有利于后面不同动画的实现, 另外还对一些默认参数进行设置. 真正的计算和绘制都在下面的子类中, 我们分析一个MaterialLoadingRenderer.

MaterialLoadingRenderer

MaterialLoadingRenderer是右上方的效果, 三种颜色交替过渡出现, 圆先变大半圆再变小半圆, 然后整体还在转动,,初分析感觉好难, 下面细细看其代码, 不得不说以前自己写的动画都是什么玩意儿啊..下面看源码

public void computeRender(float renderProgress) {
    updateRingColor(renderProgress);

    // Moving the start trim only occurs in the first 50% of a
    // single ring animation
    if (renderProgress <= START_TRIM_DURATION_OFFSET) {
        //除定前半程比例, 这里相当于把一个动画分成了两个动画, 前半段是只移动头, 后半段只移动尾巴
        //这里把原来一共的比例换算到前半段的时间上来
        float startTrimProgress = renderProgress / START_TRIM_DURATION_OFFSET;
        //要开始的角度. 原始角度加已经过了的角度
        //向前伸出去的那个头,加原始角度(在一次动画中他是不变的, 等于上一次动画结束的地方)
        //再加最大的多半圈乘扫过的比例
        mStartDegrees = mOriginStartDegrees + MAX_SWIPE_DEGREES * MATERIAL_INTERPOLATOR.getInterpolation(startTrimProgress);
    }

    // Moving the end trim starts after 50% of a single ring
    // animation completes
    if (renderProgress > START_TRIM_DURATION_OFFSET) {
        //超过一半的比例/后半程比例, 同上
        float endTrimProgress = (renderProgress - START_TRIM_DURATION_OFFSET) / (END_TRIM_DURATION_OFFSET - START_TRIM_DURATION_OFFSET);
        //尾巴所在的角度
        mEndDegrees = mOriginEndDegrees + MAX_SWIPE_DEGREES * MATERIAL_INTERPOLATOR.getInterpolation(endTrimProgress);
    }

    //要显示的角度
    if (Math.abs(mEndDegrees - mStartDegrees) > MIN_SWIPE_DEGREE) {
        mSwipeDegrees = mEndDegrees - mStartDegrees;
    }

    //整个过程中画布一一直慢慢的转动
    mGroupRotation = ((FULL_GROUP_ROTATION / NUM_POINTS) * renderProgress) + (FULL_GROUP_ROTATION * (mRotationCount / NUM_POINTS));
    //不知道干啥的....
    mRotationIncrement = mOriginRotationIncrement + (MAX_ROTATION_INCREMENT * renderProgress);
}

过程中设了画笔的颜色, 颜色是动画前80%使用一个颜色, 后20%的时候使用

return ((startA + (int) (fraction * (endA - startA))) << 24)
        | ((startR + (int) (fraction * (endR - startR))) << 16)
        | ((startG + (int) (fraction * (endG - startG))) << 8)
        | ((startB + (int) (fraction * (endB - startB))));

计算两个颜色的过渡色, 就会产生过渡的颜色变化.
后面的计算基本如注释描述. 直接看draw方法.

public void draw(Canvas canvas, Rect bounds) {
    int saveCount = canvas.save();
    //对Canvas进行转动, 产生画的过程中首尾都在转动的效果
    canvas.rotate(mGroupRotation, bounds.exactCenterX(), bounds.exactCenterY());

    RectF arcBounds = mTempBounds;
    arcBounds.set(bounds);
    arcBounds.inset(mStrokeInset, mStrokeInset);

    mPaint.setColor(mCurrentColor);
    //绘制弧线, 就是Loading的主体
    canvas.drawArc(arcBounds, mStartDegrees, mSwipeDegrees, false, mPaint);

    canvas.restoreToCount(saveCount);
}

基本上是拿一到计算的数据进行绘制就可以了, 记得每次都要将canvas进行restore. 别的方法就是与动画相关的: 开始, 停止之类, 不再分析.
学习一个简单的Loading图就是这样, 后面会再分析一个使用图片的Loading图, 就可以根据自己的需求进行自定义各种动画了.

学习这个开源代码最大的收获就是感觉结果清晰, 每一个类, 每一个方法的责任都十分的明确, 十分值得我们学习.