前几天在群里看到过一个朋友发过一个比较炫酷的效果图[gif找不到了]，当时思考了一下实现思路，本着能简则简的原则模仿了一下，先来看下效果图。[终于找到了制作gif的好方法，还是Photoshop给力！！！]

狗哥

先来小小的分析一下过程，动画分为两段：①外实内空；②外空内实。主要是根据水波纹填充的区域不同，第一个是填充区域之外的空间是一个二狗子的形状，第二个是填充区域是一个二狗子的形状。想到这里立马茅塞顿开，两张含有透明区域的图片搞定，图片如下：

狗子对比图

实现思路

---

• 1.先对canvas裁切成一个圆形；
• 2.绘制水波纹；
• 2.把狗子图片盖在最上层，根据状态判断显示哪张图片即可；

实现过程

召唤二狗子

/**
 * 二狗子图片
 */
private Bitmap bitmap1 = null;
private Bitmap bitmap2 = null;

bitmap1 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.icon_dog_1);
bitmap2 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.icon_dog_2);

这里主要就是把drawable转换成bitmap，后面我们直接用canvas.drawBitmap把二狗子绘制出来即可，再者就是一些参数的初始化和画笔的初始化等等，就不列举了。

裁切画布

/**
 * 需要裁剪的Path
 */
private Path path = new Path();
//添加一个圆
path.addCircle(w / 2, h / 2, w / 2, Path.Direction.CW);

/**
 * 裁切canvas
 *
 * @param canvas
 */
private void clipCicle(Canvas canvas) {
    canvas.clipPath(path);
    canvas.drawPath(path, mPaintClipPath);
}

绘制水波纹

关于绘制的原理可参考此篇文章，或者翻看高中数据正弦函数 [手动滑稽]
自定义View_做一个与众不同的🥕

/**
 * 填充颜色，绘制水波纹
 */
private void fillWater(Canvas canvas) {
    φ -= mWaterSpeed / 100;
    float y;
    pathWater.reset();
    pathWater.moveTo(0, mCurrentProgressY);
    for (float x = 0; x <= getWidth(); x++) {
        y = (float) (A * Math.sin(ω * x + φ) + K);
        pathWater.lineTo(x, y + mCurrentProgressY);
    }
    pathWater.lineTo(getWidth(), getHeight());
    pathWater.lineTo(0, getHeight());
    pathWater.close();
    canvas.drawPath(pathWater, paintWater);
}

再次召唤二狗子

canvas.drawBitmap(status ? bitmap1 : bitmap2, 0, 0, mPaint);

状态处理及动画控制

/**
 * 开启动画
 */
public void start() {
    if (mValueAnimator != null) {
        mValueAnimator.cancel();
        mValueAnimator = null;
    }
    mValueAnimator = ValueAnimator.ofFloat(getHeight(), -2 * A);
    mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
    mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
    mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            mCurrentProgressY = (float) valueAnimator.getAnimatedValue();
            invalidate();
        }
    });
    mValueAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationRepeat(Animator animation) {
            super.onAnimationRepeat(animation);
            status = !status;
        }
        @Override
        public void onAnimationCancel(Animator animation) {
            super.onAnimationCancel(animation);
            status = false;
        }
    });
    mValueAnimator.setDuration(4000);
    mValueAnimator.start();
}
/**
 * 停止动画并恢复初始状态
 */
public void stop() {
    if (mValueAnimator != null) {
        mValueAnimator.cancel();
        mValueAnimator = null;
    }
    mCurrentProgressY = getHeight();
    invalidate();
}

完整代码

public class DogView extends View {
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * 记录进度条上升的距离
     */
    private float mCurrentProgressY;
    /**
     * 用来控制bitmap的展示
     */
    private boolean status;

    /**
     * 用来绘制水波纹的画笔
     */
    private Paint paintWater;
    /**
     * 用来绘制最外层圆圈的画笔
     */
    private Paint mPaintCircleLine;
    /**
     * 用来绘制图片bitmap的画笔
     */
    private Paint mPaint;
    /**
     * 用来裁剪canvas
     */
    private Paint mPaintClipPath;
    /**
     * 需要裁剪的Path
     */
    private Path path = new Path();

    /**
     * 二狗子图片
     */
    private Bitmap bitmap1 = null;
    private Bitmap bitmap2 = null;
    /**
     * 振幅
     */
    private int A;
    /**
     * 偏距
     */
    private int K;

    /**
     * 初相
     */
    private float φ;

    /**
     * 角速度
     */
    private double ω;
    /**
     * 波形移动的速度
     */
    private float mWaterSpeed = 50f;
    /**
     * 水波纹Path
     */
    private Path pathWater = new Path();
    /**
     * 绘制动画
     */
    private ValueAnimator mValueAnimator = null;

    public DogView(Context context) {
        this(context, null);
    }

    public DogView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DogView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        initView();
    }

    private void initView() {
        A = dip2px(mContext, 5);

        K = A;

        bitmap1 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.icon_dog_1);
        bitmap2 = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.icon_dog_2);

        mPaint = new Paint();
        mPaint.setAntiAlias(true);

        mPaintClipPath = new Paint();
        mPaintClipPath.setAntiAlias(true);
        mPaintClipPath.setColor(Color.WHITE);

        paintWater = new Paint();
        paintWater.setAntiAlias(true);
        paintWater.setColor(Color.RED);

        mPaintCircleLine = new Paint();
        mPaintCircleLine.setAntiAlias(true);
        mPaintCircleLine.setColor(Color.RED);
        mPaintCircleLine.setStyle(Paint.Style.STROKE);
        mPaintCircleLine.setStrokeWidth(dip2px(mContext, 2));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        //设置bitmap的尺寸
        bitmap1 = resizeImage(bitmap1, w, h);
        bitmap2 = resizeImage(bitmap2, w, h);

        ω = 8 * Math.PI / w;
        mCurrentProgressY = h;
        path.addCircle(w / 2, h / 2, w / 2, Path.Direction.CW);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //裁剪
        clipCicle(canvas);
        //画水波纹
        fillWater(canvas);
        //画狗
        canvas.drawBitmap(status ? bitmap1 : bitmap2, 0, 0, mPaint);
        //画圆圈
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2 - dip2px(mContext, 1), mPaintCircleLine);

    }

    /**
     * 填充颜色，绘制水波纹
     */
    private void fillWater(Canvas canvas) {

        φ -= mWaterSpeed / 100;

        float y;

        pathWater.reset();
        pathWater.moveTo(0, mCurrentProgressY);

        for (float x = 0; x <= getWidth(); x++) {
            y = (float) (A * Math.sin(ω * x + φ) + K);
            pathWater.lineTo(x, y + mCurrentProgressY);
        }

        pathWater.lineTo(getWidth(), getHeight());
        pathWater.lineTo(0, getHeight());
        pathWater.close();
        canvas.drawPath(pathWater, paintWater);

    }


    /**
     * 裁剪canvas
     *
     * @param canvas
     */
    private void clipCicle(Canvas canvas) {
        canvas.clipPath(path);
        canvas.drawPath(path, mPaintClipPath);
    }

    /**
     * 开启动画
     */
    public void start() {
        if (mValueAnimator != null) {
            mValueAnimator.cancel();
            mValueAnimator = null;
        }
        mValueAnimator = ValueAnimator.ofFloat(getHeight(), -2 * A);
        mValueAnimator.setRepeatCount(ValueAnimator.INFINITE);
        mValueAnimator.setRepeatMode(ValueAnimator.RESTART);
        mValueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                mCurrentProgressY = (float) valueAnimator.getAnimatedValue();
                invalidate();
            }
        });

        mValueAnimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
                status = !status;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
                status = false;
            }
        });
        mValueAnimator.setDuration(4000);
        mValueAnimator.start();
    }

    /**
     * 停止动画并恢复初始状态
     */
    public void stop() {
        if (mValueAnimator != null) {
            mValueAnimator.cancel();
            mValueAnimator = null;
        }
        mCurrentProgressY = getHeight();
        invalidate();
    }

    /**
     * 缩放bitmap
     *
     * @param bitmap
     * @param w
     * @param h
     * @return
     */
    public Bitmap resizeImage(Bitmap bitmap, int w, int h) {
        Bitmap BitmapOrg = bitmap;
        int width = BitmapOrg.getWidth();
        int height = BitmapOrg.getHeight();
        int newWidth = w;
        int newHeight = h;

        float scaleWidth = ((float) newWidth) / width;
        float scaleHeight = ((float) newHeight) / height;

        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        Bitmap resizedBitmap = Bitmap.createBitmap(BitmapOrg, 0, 0, width,
                height, matrix, true);
        return resizedBitmap;
    }

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    private int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }

}

狗哥奉上

狗哥