android6.0上有了很炫酷的开机动画,虽不知其实现原理是什么,但感觉扎心了!!有时间一定去翻一下源码,本着对loading动画的热爱,后来找到了LoadingDrawable库,还是很炫酷的,简要分析:
![](https://img.haomeiwen.com/i2702938/c9b2cf46329092b3.gif)
原理
android中的动画最后都是实现canvas上绘制,这些动画也不例外,不得不说作者真是运用Drawable
,ValueAnimator
,Canvas
到了极致。库中有很多个实现,下面选scenery中的DayNightLoading动画分析其实现过程。
-
整体设计流程
LoadingView是最终在layout文件中的自定义view,继承与ImageView,使用如下:
<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" />
发现自定义属性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是基础,但是实现动画的具体变换计算、如何绘制才是重点,这得一点点调出来,实在佩服。这两天看看计算过程,容易讲的话,再写一篇。
网友评论