拆轮子之Fish动画分析

版权声明:如有转载请注明出处 http://blog.csdn.net/xsf50717,谢谢~ https://blog.csdn.net/XSF50717/article/details/51494266

概述

最近发现一个很好玩的动画库,纯代码实现的而不是通过图片叠加唬人的,觉得很有意思看了下源码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继承了这个类后是这样重写的

`    @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抽象类

阅读更多

没有更多推荐了,返回首页