Android Loading动画分析设计

   <p>android6.0上有了很炫酷的开机动画，虽不知其实现原理是什么，但感觉扎心了！！有时间一定去翻一下源码，本着对loading动画的热爱，后来找到了 LoadingDrawable库 ，还是很炫酷的，简要分析：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6d4aee42b3374fdf733132b2b572c2aa.gif"></p>    <p style="text-align:center">loadingdrawable.gif</p>    <h2>原理</h2>    <p>android中的动画最后都是实现canvas上绘制，这些动画也不例外，不得不说作者真是运用 Drawable ， ValueAnimator ， Canvas 到了极致。库中有很多个实现，下面选scenery中的DayNightLoading动画分析其实现过程。</p>    <ul>     <li> <p>整体设计流程</p> <p>LoadingView是最终在layout文件中的自定义view，继承与ImageView，使用如下：</p> <pre>  <code class="language-java"><app.dinus.com.loadingdrawable.LoadingView        android:id="@+id/day_night_view"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1"        android:background="#ff071c28"        app:loading_renderer="DayNightLoadingRenderer" /></code></pre> <p>发现自定义属性DayNightLoadingRenderer（怀疑作者多写个er >..<），通过这里传入的参数，在构造方法中使用工厂方法 LoadingRendererFactory.createLoadingRenderer(context, loadingRendererId) 构造相应的 LoadingRenderer ，它就是主角，通过 setLoadingRenderer() 创建 LoadingDrawable ，LoadingDrawable继承于Drawable，最后调用 setImageDrawable 显示。</p> <p>剥洋葱一样一层一层分析，LoadingView就是基本自定义view的流程，进入LoadingDrawable发现：</p> <pre>  <code class="language-java">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);        }    };</code></pre> <p>Android中的Callback太多了，我承认自己很low这个没见过...，啪啪啪（鼠标声）点进源码看看这是什么鬼，是 android.graphics.drawable.Drawable 中的静态接口，注释写的很明白 如果想做一个动画的drawable，这个drawable又继承于{@link android.graphics.drawable.Drawable Drawable}，那么就实现这个接口就好了，自定义的drawable通过setCallback后能schedule并execute动画的变化 ，那就很明确了，这就是个动画Drawable用来不断绘制自己的接口，自定义Drawable需要set。 LoadingDrawable 中为了完成动画的各个状态变化，直接实现了 Animatable 接口。</p> <p>接下来看 LoadingRenderer 类，是个抽象类，那肯定就是为了后续拓展各种Renderer而设计成抽象类。类中定义了缺省的大小和动画时间，如何实现动画的插值器呢，这里使用了 ValueAnimator ，是属性动画的一种，其缺省插值器是 AccelerateDecelerateInterpolator ，通过 mRenderAnimator.addUpdateListener 更新动画的当前值，并重绘，具体为监听过程调用 computeRender((float) animation.getAnimatedValue()); 与 invalidateSelf(); 。</p> <p>这里顺带提一下 LoadingRendererFactory ，工厂类，工厂类采用 SparseArray 存放id与对应的类，通过反射获取相应的类构造函数，从而获取相应的对象。</p> <p>到了关键人物 DayNightLoadingRenderer ，继承抽象类LoadingRenderer。</p> </li>     <li> <p>分析DayNightLoadingRenderer</p> <p>mInitSun$MoonCoordinateY 关键变量1，太阳和月亮升起的起始位置。</p> <p>mMaxSun$MoonRiseDistance 关键变量2，上升的最大距离。</p> <p>那么问题来了，drawable是如何知道什么时候绘制什么曲线的呢，draw中给出答案：</p> <pre>  <code class="language-java">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);        }</code></pre> </li>    </ul>    <p>是按照太阳和月亮的当前高度与初始位置高度 的 相对位置判断如何绘制图形。具体canvas的知识这里就不详细介绍了，网上很多。</p>    <p>还记得刚才 computeRender((float) animation.getAnimatedValue()) 与 invalidateSelf() 吧，这里实现了computeRender：</p>    <pre>  <code class="language-java">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) {             ...  }</code></pre>    <p>这里清一色通过renderProgress来判断当前动画的进度，当前类中定义了动画的一些关键点，比如： SUN_DECREASE_DURATION_OFFSET 、 STAR_RISE_START_DURATION_OFFSET 等，这些代表太阳落下、星星升起等等。通过关键点的判断改变太阳、月亮、星星的一些属性及太阳、月亮的y轴位置。最后不断重新计算render，不断invalidateSelf，实现整个动画。</p>    <h2>总结</h2>    <p>熟悉drawable、valueAnimator、callback是基础，但是实现动画的具体变换计算、如何绘制才是重点，这得一点点调出来，实在佩服。这两天看看计算过程，容易讲的话，再写一篇。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/646b3b42c471</p>    <p> </p>