拆轮子之Fish动画分析
来源:互联网 发布:摩托罗拉gp328编程 编辑:程序博客网 时间:2024/05/13 15:23
概述
最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码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思想要注意掌握。
FishLoadingRender
在前面说了,关键是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继承了这个类后是这样重写的
` @Overridepublic 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抽象类
- 拆轮子之Fish动画分析
- 【拆轮子系列】RxJava2 源码简要分析
- 拆轮子之动态加载DynamicLoadApk
- 拆轮子之热修复框架AndFix
- 拆轮子之动态加载DynamicLoadApk
- 拆轮子之动态加载DynamicLoadApk
- 拆轮子系列之剖析EventBus源码
- 拆轮子之动态加载DynamicLoadApk
- 【拆轮子系列】Universal Image Loader 源码分析
- 【拆轮子系列】Retrofit 源码的简要分析
- Android 动画分析之Tween动画分析
- Android 动画分析之Tween动画分析
- Fish
- fish
- android之动画分析
- 造轮子之我见
- 拆解轮子之XRecyclerView
- 拆解轮子之XRecyclerView
- Spark中组件Mllib的学习30之逻辑回归LogisticRegressionWithLBFGS
- 文本分析常用R包的安装(Rweibo、wordcloud、tm、tmcn、Rwordseg、Rcharts、xlsx、XLConnect)
- Eclipse下新建一个tld文件
- R语言--数值和字符处理函数
- Tomcat的四种基于HTTP协议的Connector性能比较
- 拆轮子之Fish动画分析
- Eclipse Android 工程无法查看帮助文档
- 实习入职第五天:ListView方法要揽
- IOS之路--OC之继承
- Vector源码剖析
- 多周期CPU设计
- 第九周项目二-我的数组类
- Jmeter+Ant快速构建
- Qt5+MinGW 调用ffmpeg