Android Loading动画分析设计

android6.0上有了很炫酷的开机动画，虽不知其实现原理是什么，但感觉扎心了！！有时间一定去翻一下源码，本着对loading动画的热爱，后来找到了LoadingDrawable库，还是很炫酷的，简要分析：

loadingdrawable.gif

原理

android中的动画最后都是实现canvas上绘制，这些动画也不例外，不得不说作者真是运用Drawable，ValueAnimator，Canvas到了极致。库中有很多个实现，下面选scenery中的DayNightLoading动画分析其实现过程。

• 整体设计流程

LoadingView是最终在layout文件中的自定义view，继承与ImageView，使用如下：

发现自定义属性DayNightLoadingRenderer（怀疑作者多写个er >..<），通过这里传入的参数，在构造方法中使用工厂方法LoadingRendererFactory.createLoadingRenderer(context, loadingRendererId)构造相应的LoadingRenderer，它就是主角，通过setLoadingRenderer()创建LoadingDrawable，LoadingDrawable继承于Drawable，最后调用setImageDrawable显示。
剥洋葱一样一层一层分析，LoadingView就是基本自定义view的流程，进入LoadingDrawable发现：

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);
        }
    };

Android中的Callback太多了，我承认自己很low这个没见过...，啪啪啪（鼠标声）点进源码看看这是什么鬼，是android.graphics.drawable.Drawable中的静态接口，注释写的很明白如果想做一个动画的drawable，这个drawable又继承于{@link android.graphics.drawable.Drawable Drawable}，那么就实现这个接口就好了，自定义的drawable通过setCallback后能schedule并execute动画的变化，那就很明确了，这就是个动画Drawable用来不断绘制自己的接口，自定义Drawable需要set。LoadingDrawable中为了完成动画的各个状态变化，直接实现了Animatable接口。
接下来看LoadingRenderer类，是个抽象类，那肯定就是为了后续拓展各种Renderer而设计成抽象类。类中定义了缺省的大小和动画时间，如何实现动画的插值器呢，这里使用了ValueAnimator，是属性动画的一种，其缺省插值器是AccelerateDecelerateInterpolator，通过mRenderAnimator.addUpdateListener更新动画的当前值，并重绘，具体为监听过程调用computeRender((float) animation.getAnimatedValue());与invalidateSelf();。
这里顺带提一下LoadingRendererFactory，工厂类，工厂类采用SparseArray存放id与对应的类，通过反射获取相应的类构造函数，从而获取相应的对象。
到了关键人物DayNightLoadingRenderer，继承抽象类LoadingRenderer。

• 分析DayNightLoadingRenderer

mInitSun$MoonCoordinateY关键变量1，太阳和月亮升起的起始位置。
mMaxSun$MoonRiseDistance关键变量2，上升的最大距离。
那么问题来了，drawable是如何知道什么时候绘制什么曲线的呢，draw中给出答案：

        if (mSunCoordinateY < mInitSun$MoonCoordinateY) {
            canvas.drawCircle(arcBounds.centerX(), 
            mSunCoordinateY, mSun$MoonRadius, mPaint);
        }

        if (mMoonCoordinateY < mInitSun$MoonCoordinateY) {
            int moonSaveCount = canvas.save();
            canvas.rotate(mMoonRotation, arcBounds.centerX(), mMoonCoordinateY);
            canvas.drawPath(createMoonPath(arcBounds.centerX(), mMoonCoordinateY), mPaint);
            canvas.restoreToCount(moonSaveCount);
        }

是按照太阳和月亮的当前高度与初始位置高度 的 相对位置判断如何绘制图形。具体canvas的知识这里就不详细介绍了，网上很多。
还记得刚才computeRender((float) animation.getAnimatedValue())与invalidateSelf()吧，这里实现了computeRender：

if (renderProgress <= SUN_RISE_DURATION_OFFSET) {
            ...
}

if (renderProgress <= SUN_ROTATE_DURATION_OFFSET && renderProgress > SUN_RISE_DURATION_OFFSET) {
            ...

            ...
}
...

...

if (renderProgress <= MOON_DECREASE_END_DURATION_OFFSET && renderProgress > MOON_DECREASE_START_DURATION_OFFSET) {
           ...
}

这里清一色通过renderProgress来判断当前动画的进度，当前类中定义了动画的一些关键点，比如：SUN_DECREASE_DURATION_OFFSET、STAR_RISE_START_DURATION_OFFSET等，这些代表太阳落下、星星升起等等。通过关键点的判断改变太阳、月亮、星星的一些属性及太阳、月亮的y轴位置。最后不断重新计算render，不断invalidateSelf，实现整个动画。

总结

熟悉drawable、valueAnimator、callback是基础，但是实现动画的具体变换计算、如何绘制才是重点，这得一点点调出来，实在佩服。这两天看看计算过程，容易讲的话，再写一篇。