自定义View_狗哥玩转进度条🐶

前几天在群里看到过一个朋友发过一个比较炫酷的效果图[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);
    }

}

狗哥奉上

狗哥
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 225,677评论 6赞 524
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 96,772评论 3赞 408
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 173,108评论 0赞 370
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 61,378评论 1赞 303
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 70,394评论 6赞 403
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 53,807评论 1赞 315
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 42,127评论 3赞 432
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 41,136评论 0赞 281
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 47,693评论 1赞 328
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,703评论 3赞 349
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,810评论 1赞 357
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 37,400评论 5赞 352
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 43,130评论 3赞 341
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 33,532评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,707评论 1赞 278
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 50,412评论 3赞 383
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 46,892评论 2赞 368