【原创】猫眼下拉刷新动画

一、前言

最近关注了一下《爱情公墓》的票房，所以下载了猫眼app，发现他的下拉刷新动画甚是好看：

maoyan_refresh.gif

所以想着仿着做一个，最终实现效果：

maoyan_refresh_copy.gif

二、分析

猫眼的下拉头部动画是最具有美感的一个动画效果。拆开来看，是由四个弧形，加一个中间的图片组成，下拉的时候，有一个水位上涨的效果，水位到顶后，开启动画，外面的圈旋转，里面的图片保持不动。

画圆弧画图片很简单，但是这个水位上涨和旋转的动画有点麻烦。

如果不想在一个View里面处理两个动画，实际上可以用一个组合的FrameLayout解决，底下是圆弧的View，上面是图片Logo的ImageView，功能能实现，但是不够优雅，这里就是用一个自定义View解决两个动画问题。

三、代码实现

3.1 自定义View的模板

public class RefreshImageView extends View {
    public RefreshImageView(Context context) {
        this(context, null);
    }

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

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

3.2 onMeasure 处理

自定义第一步，你要知道自己的这个View需要多大的手机屏幕面积，也就是告诉手机我这个View的宽高。一般来说，是有固定的写法的，先判断是不是wrap_content的，是的话有两种处理

1.给一个默认的值
2.看子View需要多大空间计算得出 (当然这里View没有子类)

所以这里简化一点，不考虑wrap_content的情况了，直接认为使用的时候要么是match_parent的要么就是100dp这种确认的值，所以计算代码如下：

public class RefreshImageView extends View {
    private int width;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        setMeasuredDimension(width, width);
    }

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

这样得到的View就是一个正方形。

3.3 圆弧Rect计算

我们知道，画一段圆弧，一定要知道圆弧所在的正方形区域，而且，圆弧是画在View的边框上的，如果圆弧的宽度特别大的时候，实际上有一半的弧形是画到边界外面的，所以这里我们需要计算圆弧的区域。

public class RefreshImageView extends View {
    private int width;
    private int borderWidth = 10;
    private RectF rectF;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
        setMeasuredDimension(width, width);
    }

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

在确认了View的宽度width之后，直接在View内部减去一个弧形宽度的正方形区域内画圆弧，这样是不会超出View边界的。

3.4 onDraw 画弧形

public class RefreshImageView extends View {
    private int width;
    private int borderWidth = 10;
    private RectF rectF;
    private Paint borderPaint;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStrokeCap(Paint.Cap.ROUND);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(Color.parseColor("#999999"));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
        setMeasuredDimension(width, width);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        for (int i = 0; i < 4; i++) {
            canvas.drawArc(rectF, -40 + 90 * i, 80, false, borderPaint);
        }
    }
}

四段弧形，直接一个for循环，默认是每画80度灰色弧形，开一个10度的弧形空隙，继续下一个弧形，这样图案就出来了：

Screenshot_2018-08-20-19-08-41-369_com.rjp.maoyan.png

3.5 onDraw 画水位

这里是根据进度来确定水位的高度的，所以需要从使用的地方传递进来一个浮点型progress。重要的一点是怎么给进度以下的部分上色？这里需要了解图像混合模式

我们在View的底部绘制一个逐渐上涨的水位矩形图，但是由于设置了图像混合模式，只会显示两个图案并集的部分，于是就实现了这种逐渐渲染的效果：

Screenshot_2018-08-20-19-23-02-902_com.rjp.maoyan.png

public class RefreshImageView extends View {
    private int width;
    private int borderWidth = 10;
    private RectF rectF;
    private Paint borderPaint;
    private float progress = 0.5f;
    private Paint progressPaint;
    private PorterDuffXfermode mXfermode;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStrokeCap(Paint.Cap.ROUND);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(Color.parseColor("#999999"));

        progressPaint = new Paint();
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(Color.parseColor("#eb1c42"));

        //最重要的一点，选择合适的图片重叠模式
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
        setMeasuredDimension(width, width);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int sc = canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
        for (int i = 0; i < 4; i++) {
            canvas.drawArc(rectF, -40 + 90 * i, 80, false, borderPaint);
        }
        progressPaint.setXfermode(mXfermode);
        canvas.drawRect(0, width - width * progress, width, width, progressPaint);
        progressPaint.setXfermode(null);
        canvas.restoreToCount(sc);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }
}

首先我们需要在离屏缓存的canvas上绘制两者混合的图案，否则没有混合的效果。初始我们定的progress为50%，效果已经出来了：

Screenshot_2018-08-20-19-23-26-296_com.rjp.maoyan.png

3.6 绘制Logo

中间的logo的矩形应该比border的矩形更小，否则会重合border，这里需要通过勾股定理计算，也不复杂，不理解可以画一个图形帮助理解：

example.png

public class RefreshImageView extends View {
    private int width;
    private int borderWidth = 10;
    private RectF rectF;
    private Paint borderPaint;
    private float progress = 0.5f;
    private Paint progressPaint;
    private PorterDuffXfermode mXfermode;
    private RectF bitmapRectF;
    private Paint bitmapPaint;
    private Bitmap srcBitmap;
    private int innerWidth;
    private int offset;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStrokeCap(Paint.Cap.ROUND);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(Color.parseColor("#999999"));

        progressPaint = new Paint();
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(Color.parseColor("#eb1c42"));

        //最重要的一点，选择合适的图片重叠模式
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

        bitmapPaint = new Paint();
        bitmapPaint.setAntiAlias(true);
        srcBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.riv_test);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
        setMeasuredDimension(width, width);

        //此处计算logo的矩形位置
        int innerCircleRadius = width / 2 - borderWidth * 2;
        innerWidth = (int) (Math.sqrt(2) * innerCircleRadius);
        offset = width / 2 - innerWidth / 2;
        bitmapRectF = new RectF(offset, offset, width - offset, width - offset);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int sc = canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
        for (int i = 0; i < 4; i++) {
            canvas.drawArc(rectF, -40 + 90 * i, 80, false, borderPaint);
        }
        progressPaint.setXfermode(mXfermode);
        canvas.drawRect(0, width - width * progress, width, width, progressPaint);
        progressPaint.setXfermode(null);
        canvas.restoreToCount(sc);

        canvas.drawBitmap(srcBitmap, null, bitmapRectF, bitmapPaint);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }
}

3.7 border 动画

如果没有logo图案，可以让View rotate实现旋转，但是有了logo这样导致logo也在旋转，不合理，所以需要不断的改变border的起始绘制位置，这样就很容易想到属性动画，0到360度的数值变化：

    public void startAnim() {
        progress = 1;
        animator = ValueAnimator.ofInt(0, 360);
        animator.setDuration(1000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dAngle = (Integer) animation.getAnimatedValue();
                invalidate();
            }
        });
    }

    public void stopAnim() {
        if (animator != null) {
            animator.cancel();
            dAngle = 0;
            progress = 0;
            invalidate();
        }
    }

开启动画之前，设置progress为1，确保水位是满的，0度到360度的变化，增加一个变量dAngle，记录变化的角度，所以onDraw的代码也要做出变化：

    for (int i = 0; i < 4; i++) {
        canvas.drawArc(rectF, -40 + 90 * i + dAngle, 80, false, borderPaint);
    }

每一段弧形加上变化的角度。

四、总结

到这里就全部结束了，剩下的就是代码的优化了，将border宽度和颜色什么的都写到属性文件里，可以在xml里方便的设置上。

附上完整代码

public class RefreshImageView extends View {
    private int width;
    private int borderWidth = 10;
    private RectF rectF;
    private Paint borderPaint;
    private float progress;
    private Paint progressPaint;
    private PorterDuffXfermode mXfermode;
    private RectF bitmapRectF;
    private Paint bitmapPaint;
    private Bitmap srcBitmap;
    private int innerWidth;
    private int offset;
    private ValueAnimator animator;
    //变化的角度
    private int dAngle;
    private int borderColor;
    private int borderCoverColor;
    private int gapAngle;

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

    public RefreshImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        if (attrs != null) {
            TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RefreshImageView);
            borderWidth = (int) array.getDimension(R.styleable.RefreshImageView_refresh_iv_border_width, 10);
            borderColor = array.getColor(R.styleable.RefreshImageView_refresh_iv_border_color, Color.GRAY);
            borderCoverColor = array.getColor(R.styleable.RefreshImageView_refresh_iv_cover_color, Color.RED);
            gapAngle = array.getInt(R.styleable.RefreshImageView_refresh_iv_gap_angle, 10);
            int srcId = array.getResourceId(R.styleable.RefreshImageView_refresh_iv_src, R.drawable.riv_test);
            srcBitmap = BitmapFactory.decodeResource(getResources(), srcId);
        }

        borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStrokeWidth(borderWidth);
        borderPaint.setStrokeCap(Paint.Cap.ROUND);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(borderColor);

        progressPaint = new Paint();
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(borderCoverColor);

        //最重要的一点，选择合适的图片重叠模式
        mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP);

        bitmapPaint = new Paint();
        bitmapPaint.setAntiAlias(true);
        srcBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.riv_test);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        width = MeasureSpec.getSize(widthMeasureSpec);
        rectF = new RectF(borderWidth, borderWidth, width - borderWidth, width - borderWidth);
        setMeasuredDimension(width, width);

        int innerCircleRadius = width / 2 - borderWidth * 2;
        innerWidth = (int) (Math.sqrt(2) * innerCircleRadius);
        offset = width / 2 - innerWidth / 2;
        bitmapRectF = new RectF(offset, offset, width - offset, width - offset);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        int sc = canvas.saveLayer(0, 0, width, width, null, Canvas.ALL_SAVE_FLAG);
        for (int i = 0; i < 4; i++) {
            int sweepAngle = 90 - gapAngle;
            canvas.drawArc(rectF, -sweepAngle / 2 + 90 * i + dAngle, sweepAngle, false, borderPaint);
        }
        progressPaint.setXfermode(mXfermode);
        canvas.drawRect(0, width - width * progress, width, width, progressPaint);
        progressPaint.setXfermode(null);
        canvas.restoreToCount(sc);

        canvas.drawBitmap(srcBitmap, null, bitmapRectF, bitmapPaint);
    }

    public void setProgress(float progress) {
        this.progress = progress;
        invalidate();
    }

    public void startAnim() {
        progress = 1;
        animator = ValueAnimator.ofInt(0, 360);
        animator.setDuration(1000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.setInterpolator(new LinearInterpolator());
        animator.start();
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                dAngle = (Integer) animation.getAnimatedValue();
                invalidate();
            }
        });
    }

    public void stopAnim() {
        if (animator != null) {
            animator.cancel();
            dAngle = 0;
            progress = 0;
            invalidate();
        }
    }
}

附上github地址

最后编辑于：2018.08.21 12:15:37

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