最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码https://github.com/dinuscxj/LoadingDrawable,
这个动画效果使用drawable来实现,觉得很好玩,先分析这个Fish动画(上面是鱼,下面是ghosteye,可是我看半天看不出哪里像 ghost ╮(╯▽╰)╭)。
项目整体是采用了策略模式(Strategy)通过给LoadingDrawable设置不同的LoadingRenderer(渲染器) 来绘制不同的加载动画。Fish首先是继承了Drable类实现了Animate接口。
LoadingDrawable
这个类继承Drawable并实现接口Animatable,构造函数必须传入 LoadingRenderer的子类。并通过回调Callback与LoadingRenderer进行交互。
LoadingRenderer
主要负责给LoadingDrawable绘制的。 这里使用抽象类将公共使用的归类到该类处理,比如公共参数,宽高,描边,圆的默认半径等等。将绘制不同图形的功能函数如 draw(Canvas, Rect) 和 computeRender(float)抽象出来, 其中draw(Canvas, Rect)顾名思义,负责绘制, computeRender 负责计算当前的进度需要绘制的形状的大小,位置,其参数 是有类内部的成员变量mRenderAnimator负责传递。
这种将公共的封装抽象出来的OOP思想要注意掌握。
在前面说了,关键是draw(Canvas,Rect)方法复制绘制图形, computeRender(float)负责让图片具体动起来,下面先对其核心分析一下。主要是三步走:
【画池塘(矩形框)】——>【画鱼】——>【动起来】
ok,一个个来分析,先拣软柿子捏,矩形框。
1、矩形框(池塘)
在draw(Canvas canvas, Rect bounds)中
//draw river
int riverSaveCount = canvas.save();//记录river当前的图层
mPaint.setStyle(Paint.Style.STROKE);
canvas.clipRect(fishRectF, Region.Op.DIFFERENCE);//关键,确保鱼会盖住水池矩形
canvas.drawPath(createRiverPath(arcBounds), mPaint);
canvas.restoreToCount(riverSaveCount);//直接弹出到指定id层,并且将其上的Layer全部弹出,让该层称为顶栈
在处理水塘时使用canvas的sava和restoreToCount的方法记录图层,其中restoreToCount根据传入记录图层id将其上面的Layer全部弹出,然后处理了细节确保后面鱼游在池塘上面canvas.clipRect(fishRectF, Region.Op.DIFFERENCE)
,接着就是画池塘的矩形,使用了drawPath,因此需要传入池塘的path
/**
* 画水池的Path
*
* @param arcBounds
* @return
*/
private Path createRiverPath(RectF arcBounds) {
if (mRiverPath != null) {
return mRiverPath;
}
mRiverPath = new Path();
RectF rectF = new RectF(arcBounds.centerX() - mRiverWidth / 2.0f, arcBounds.centerY() - mRiverHeight / 2.0f,
arcBounds.centerX() + mRiverWidth / 2.0f, arcBounds.centerY() + mRiverHeight / 2.0f);//中心点+宽高定出绘制池塘矩形的两个点
rectF.inset(mStrokeWidth / 2.0f, mStrokeWidth / 2.0f);//画笔宽度过宽微调,正直变窄
mRiverPath.addRect(rectF, Path.Direction.CW);//顺时针方向画一个矩形
return mRiverPath;
}
这个是用虚线画的矩形,因此在画笔mPaint中做了文章,在setupPaint中使用
mPaint.setPathEffect(new DashPathEffect(new float[]{mPathFullLineSize, mPathDottedLineSize}, mPathDottedLineSize));
来使画笔为虚线,由于画笔比较粗,所以根据画笔宽度inset微调了池塘矩形(右边是不微调),这时矩形画好池塘如右边所示
2、画鱼
【鱼头定点的位置】
`private final float[] mFishHeadPos = new float[2];//初始化鱼头的位置`
作者这里并没有设置值,因为这个鱼头位置是通过pathmeasure设置进去的` mRiverMeasure.getPosTan(mRiverMeasure.getLength() * fishProgress, mFishHeadPos, null);//mRiverMeasure.getLength() * fishProgress的点放到mFishHeadPos中去
因此这里为了更好地拆解这个鱼的部分,这里给出了初始化的位置
`private final float[] mFishHeadPos = {100, 100};//初始化鱼头的位置`
在draw(Canvas canvas, Rect bounds)中
`//draw fish
int fishSaveCount = canvas.save();//记录当前图层
mPaint.setStyle(Paint.Style.FILL);//实心画笔
canvas.rotate(mFishRotateDegrees, mFishHeadPos[0], mFishHeadPos[1]);//鱼身翻转的度数
canvas.clipPath(createFishEyePath(mFishHeadPos[0], mFishHeadPos[1] - mFishHeight * 0.06f), Region.Op.DIFFERENCE);//鱼眼
canvas.drawPath(createFishPath(mFishHeadPos[0], mFishHeadPos[1]), mPaint);
canvas.restoreToCount(fishSaveCount);`
首先这里换成了实心画笔,由于鱼需要不断地翻转角度,这里通过rotate方法实现,然后就是
【画鱼眼】
` /**
* 画鱼眼
*
* @param fishEyeCenterX
* @param fishEyeCenterY
* @return
*/
private Path createFishEyePath(float fishEyeCenterX, float fishEyeCenterY) {
Path path = new Path();
path.addCircle(fishEyeCenterX, fishEyeCenterY, mFishEyeSize, Path.Direction.CW);
return path;
}`
比较简单,画了一个圆的path,然后使用Region.Op.DIFFERENCE来clip出来,接着要画鱼的身体了createFishPath(mFishHeadPos[0], mFishHeadPos[1])
传入鱼头位置开始按照鱼头位置画(鱼头位置变化鱼身位置随之变化),下面来看看鱼身这个path如何画的
` /**
* 根据鱼眼画鱼身体
*
* @param fishCenterX
* @param fishCenterY
* @return
*/
private Path createFishPath(float fishCenterX, float fishCenterY) {
Path path = new Path();
float fishHeadX = fishCenterX;
float fishHeadY = fishCenterY - mFishHeight / 2.0f;
//the head of the fish
path.moveTo(fishHeadX, fishHeadY);
//the left body of the fish
path.quadTo(fishHeadX - mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.222f, fishHeadX - mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.444f);
path.lineTo(fishHeadX - mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.666f);
path.lineTo(fishHeadX - mFishWidth * 0.5f, fishHeadY + mFishHeight * 0.8f);
path.lineTo(fishHeadX - mFishWidth * 0.5f, fishHeadY + mFishHeight);
//the tail of the fish
path.lineTo(fishHeadX, fishHeadY + mFishHeight * 0.9f);
//the right body of the fish
path.lineTo(fishHeadX + mFishWidth * 0.5f, fishHeadY + mFishHeight);
path.lineTo(fishHeadX + mFishWidth * 0.5f, fishHeadY + mFishHeight * 0.8f);
path.lineTo(fishHeadX + mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.666f);
path.lineTo(fishHeadX + mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.444f);
path.quadTo(fishHeadX + mFishWidth * 0.333f, fishHeadY + mFishHeight * 0.222f, fishHeadX, fishHeadY);
path.close();
return path;
}
`
这里定位好鱼头先通过二阶贝塞尔曲线画出鱼身的弧线,然后通过直线lineTo画鱼尾巴,画完一边再画另一边,成型图如下所示
2、动起来
首先在抽象类LoadingRenderer中封装了基本的操作,其中一个就是使用了属性动画
` private void setupAnimators() {
mRenderAnimator = ValueAnimator.ofFloat(0.0f, 1.0f);
mRenderAnimator.setRepeatCount(Animation.INFINITE);
mRenderAnimator.setRepeatMode(Animation.RESTART);//无线重复的方式
mRenderAnimator.setInterpolator(new LinearInterpolator());
mRenderAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
computeRender((float) animation.getAnimatedValue());
invalidateSelf();
}
});
}`
可以看出这里使用了0-1的渐变,然后将0-1渐变值传到抽象函数public abstract void computeRender(float renderProgress);
中按照你的需求自己实现,这里Fish继承了这个类后是这样重写的
` @Override
public void computeRender(float renderProgress) {
if (mRiverPath == null) {
return;
}
if (mRiverMeasure == null) {
mRiverMeasure = new PathMeasure(mRiverPath, false);
}
float fishProgress = FISH_INTERPOLATOR.getInterpolation(renderProgress);
mRiverMeasure.getPosTan(mRiverMeasure.getLength() * fishProgress, mFishHeadPos, null);
mFishRotateDegrees = calculateRotateDegrees(fishProgress);
}`
这个方法中信息量非常大,毕竟小鱼动起来全靠它了,我们来细细分析,首先按照river矩形得到其pathMeasure
mRiverMeasure = new PathMeasure(mRiverPath, false)
,
得到pathMeasure后通过
mRiverMeasure.getPosTan(mRiverMeasure.getLength() * fishProgress, mFishHeadPos, null);
将mRiverMeasure.getLength() * fishProgress处的坐标传到鱼头位置,这样鱼头位置在不停的变化,绘制鱼身的位置也随之变化。下面拉近镜头看看鱼头位置是怎样在变换.
秘密藏在
`float fishProgress = FISH_INTERPOLATOR.getInterpolation(renderProgress);`
插值器是自定义的,插值器本质是时间的函数,定义了动画变化的规律,需要实现getInterpolation(float input)即可,自定义插值器如下
` private class FishInterpolator implements Interpolator {
//自定义插值器
@Override
public float getInterpolation(float input) {
int index = ((int) (input / FISH_MOVE_POINTS_RATE));
if (index >= FISH_MOVE_POINTS.length) {
index = FISH_MOVE_POINTS.length - 1;
}
return FISH_MOVE_POINTS[index];
}
}`
关于插值器和估值器可以查看http://blog.csdn.net/xsf50717/article/details/50472341
可见返回的是鱼初始游经的8个点在FISH_MOVE_POINTS
数组中,这种鱼就会在这8个位置出现。出现后还要保持角度一致,这个任务就落在
mFishRotateDegrees = calculateRotateDegrees(fishProgress);
` private float calculateRotateDegrees(float fishProgress) {
if (fishProgress < FISH_MOVE_POINTS_RATE * 2) {
return 90;
}
if (fishProgress < FISH_MOVE_POINTS_RATE * 4) {
return 180;
}
if (fishProgress < FISH_MOVE_POINTS_RATE * 6) {
return 270;
}
return 0.0f;
}`
变化的角度得到后,那么鱼儿动翻转就容易了,还记得在画鱼时候canvas.rotate(mFishRotateDegrees, mFishHeadPos[0], mFishHeadPos[1]);
,这样就ok了,可以看到一开始时候鱼儿动起来的样子了
1、本质还是个动画的drawable,主要是Drawable.Callback实现invalidateDrawable(Drawable d)
,scheduleDrawable(Drawable d, Runnable what, long when)
,unscheduleDrawable(Drawable d, Runnable what)
实现回调联动。
2、作者这里为了防止不同手机分辨率的适配一开始定义了静态变量,然后在init()通过获取屏幕分辨率去适配
`/调整适配
final DisplayMetrics metrics = context.getResources().getDisplayMetrics();
final float screenDensity = metrics.density;
mWidth = DEFAULT_WIDTH * screenDensity;
mHeight = DEFAULT_HEIGHT * screenDensity;
mStrokeWidth = DEFAULT_STROKE_WIDTH * screenDensity;`
这种方式也是在自定义控件中值得学习的
3、canvas、path、paint的API还是要熟练掌握
4、OOP+设计模式可以使得代码更加优雅,省去大量冗余代码,如本例的LoadingRender抽象类