拆轮子之Fish动画分析

概述

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