Android自定义View专题六-PathMeasure实战，仿小红书动态标签

1分析小红书的效果

首先看一下这个效果


reabook.gif

可能看着有一些卡顿，这是由于上传gif大小有限制，压缩过度造成的卡顿。实际上是很流畅的。
要实现一些效果，我们首先要分析这个效果的组成部分。就像我们平时写程序是一样的，一个模块的整体功能是由若干个小功能构成的。只要分析出了这个动画的组成部分接下来就好做了。
1）首先我们可以看见这个动画展开以后，中间有一个小圆的大小是不变的，这个比较简单直接画出来就行了。
2）展开以后会有一个渐变的圆，圆起始半径和中间的小圆一样，这个圆半径变大的同时透明度也在不断的变化。并且这个动画是不断的循环的。这个动画可以用属性动画，使圆的半径不断的变化，然后不断的重绘。
3）还有就是路径的动画，路径是不断变化的，如果有什么方法可以实时改变路径长度就好了？这时候就要用到我们上一篇博客中提到的PathMeasure。
4）在动画结束的时候将文字显示出来。
分析了整个效果的组成，那么接下来就开始实现吧！

2.实现

  • 画笔路径的初始化
    /**
     * 中心圆的画笔
     */
    private Paint mPaint;
    /**
     * 渐变圆的画笔
     */
    private Paint mPaint1;
    /**
     * 路径的画笔
     */
    private Paint mPaint2;
    /**
     * 文字的画笔
     */
    private Paint mPaintText;
    /**
     * 初始化路径，这个路径没有真正的绘制
     */
    private Path mInitPath;
    /**
     * 用getSegment获取的路径片段
     */
    private Path mPath;

    public ReadBook1(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);

        mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint1.setColor(Color.WHITE);

        mPaint3 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint3.setStyle(Paint.Style.STROKE);
        mPaint3.setColor(Color.WHITE);
        mPaint3.setStrokeWidth(4);


        mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintText.setStyle(Paint.Style.STROKE);
        mPaintText.setColor(Color.WHITE);
        mPaintText.setAlpha(0);
        mPaintText.setTextAlign(Paint.Align.CENTER);

        mInitPath = new Path();
        mPath = new Path();

    }

画笔的初始化千万不要放到onDraw()方法中进行，因为onDraw方法会被调用很多次，会new出大量不必要的对象。
接下来是绘制中间的圆

canvas.drawCircle(mWidth / 2, mHeight / 2, 10, mPaint1);
  • 绘制渐变的圆
canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaint);

public void startCircleAnim() {
        mAnimatorCircle = ValueAnimator.ofFloat(10, 50);
        final float per = 255f / 40f;
        mAnimatorCircle.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                mRadius = (int) animatedValue;
                int a = (int) ((40 - (animatedValue - 10)) * per);
                mPaint.setAlpha(a);
                invalidate();
            }
        });
        mAnimatorCircle.setRepeatMode(ValueAnimator.RESTART);
        mAnimatorCircle.setRepeatCount(ValueAnimator.INFINITE);
        mAnimatorCircle.setDuration(3000);
        mAnimatorCircle.start();
    }

我这里讲渐变半径设置为10-50， final float per = 255f / 40f;同时根据半径的大小设置透明度。

  • 绘制路径
    首先要初始化一个路径，来给PathMeasure测量，就好像指定一条路一样，
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mInitPath.moveTo(mWidth / 2, mHeight / 2);
        mInitPath.lineTo(mWidth / 2 + 100, mHeight / 2 - 100);
        mInitPath.lineTo(mWidth / 2 + 300, mHeight / 2 - 100);
        pathAnimStartOrStop();
    }
      然后用PathMeasure中的方法进行测量路径的长短，
      mPathMeasure = new PathMeasure(mInitPath, false);
      float length = mPathMeasure.getLength();

     将测量得到的值交给属性动画，需要判断展开还是，收缩
     ValueAnimator animator;
        if (flag) {
            animator = ValueAnimator.ofFloat(length, 0);
        } else
            animator = ValueAnimator.ofFloat(0, length);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animatedValue = (Float) animation.getAnimatedValue();
            }
        });

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //动画展开式时候
                if (!flag) {
                    mPaint.setAlpha(255);
                    mPaint1.setAlpha(255);
                    startCircleAnim();
                    System.out.println("动画展开的时候");
                }
                ReadBook1.this.setEnabled(false);
            }

            @Override
            public void onAnimationEnd(Animator animation) {

                if (flag) {
                    mPaintText.setAlpha(0);
                    mPaint.setAlpha(0);
                    mPaint1.setAlpha(0);
                    System.out.println("动画关闭的时候");
                    mAnimatorCircle.cancel();
                } else {
                    System.out.println("动画展开的时候");
                    mPaintText.setAlpha(255);
                }
                flag = !flag;
                ReadBook1.this.setEnabled(true);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        animator.setDuration(3000);
        animator.start();
        最后在onDraw方法中调用getSegment方法，得到实时路径的长短，然后绘制
        mPath.reset();
        // 硬件加速的BUG，需要设置到0,0
        mPath.lineTo(0, 0);
        float stop = animatedValue;
        float start = 0;
        mPathMeasure.getSegment(start, stop, mPath, true);
        canvas.drawPath(mPath, mPaint2);

这里面比较关键的地方就是float length = mPathMeasure.getLength();测量得到路径的长短，然后根据属性动画动态改变这个值，最后调用 mPathMeasure.getSegment(start, stop, mPath, true);这个方法，得到实时的路径长短。
总结：
1）需要判断动画是展开还是收缩，根据这个设置属性动画的值，
2）监听动画的开始和结束，根据这个显示和隐藏中间的圆
3）动画展开结束时显示文字。

最后不断循环的动画会造成内存泄露，作为一个严谨的程序员千万不能忘记。

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mAnimatorCircle != null)
            mAnimatorCircle.cancel();
    }

全部代码如下

public class ReadBook1 extends View {
    /**
     * 中心圆的画笔
     */
    private Paint mPaint;
    /**
     * 渐变圆的画笔
     */
    private Paint mPaint1;
    /**
     * 路径的画笔
     */
    private Paint mPaint2;
    /**
     * 文字的画笔
     */
    private Paint mPaintText;
    /**
     * 初始化路径，这个路径没有真正的绘制
     */
    private Path mInitPath;
    /**
     * 用getSegment获取的路径片段
     */
    private Path mPath;
    /**
     * 中心圆的半径
     */
    private int mRadius = 10;
    /**
     * 圆渐变的动画
     */
    private ValueAnimator mAnimatorCircle;
    /**
     * 测量路径的类
     */
    private PathMeasure mPathMeasure;

    private Float animatedValue = 0f;

    private int mWidth;
    private int mHeight;

    //判断是展开是回收
    private boolean flag;

    public void setFlag(boolean flag) {
        this.flag = flag;
    }

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

    public ReadBook1(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ReadBook1(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.WHITE);

        mPaint1 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint1.setStyle(Paint.Style.FILL);
        mPaint1.setColor(Color.WHITE);

        mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setStyle(Paint.Style.STROKE);
        mPaint2.setColor(Color.WHITE);
        mPaint2.setStrokeWidth(4);


        mPaintText = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintText.setStyle(Paint.Style.STROKE);
        mPaintText.setColor(Color.WHITE);
        mPaintText.setAlpha(0);
        mPaintText.setTextAlign(Paint.Align.CENTER);

        mInitPath = new Path();
        mPath = new Path();

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        mInitPath.moveTo(mWidth / 2, mHeight / 2);
        mInitPath.lineTo(mWidth / 2 + 100, mHeight / 2 - 100);
        mInitPath.lineTo(mWidth / 2 + 300, mHeight / 2 - 100);
        pathAnimStartOrStop();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(mWidth / 2, mHeight / 2, 10, mPaint1);
        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius, mPaint);
        mPath.reset();
        // 硬件加速的BUG，需要设置到0,0
        mPath.lineTo(0, 0);
        float stop = animatedValue;
        float start = 0;
        mPathMeasure.getSegment(start, stop, mPath, true);
        canvas.drawPath(mPath, mPaint2);
        canvas.drawText("Hello World", mWidth / 2 + 200, mHeight / 2 - 104, mPaintText);
    }
    public void startCircleAnim() {
        mAnimatorCircle = ValueAnimator.ofFloat(10, 50);
        final float per = 255f / 40;
        mAnimatorCircle.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float animatedValue = (float) animation.getAnimatedValue();
                mRadius = (int) animatedValue;
                int a = (int) ((40 - (animatedValue - 10)) * per);
                mPaint.setAlpha(a);
                invalidate();
            }
        });
        mAnimatorCircle.setRepeatMode(ValueAnimator.RESTART);
        mAnimatorCircle.setRepeatCount(ValueAnimator.INFINITE);
        mAnimatorCircle.setDuration(3000);
        mAnimatorCircle.start();
    }

    public void pathAnimStartOrStop() {
        mPathMeasure = new PathMeasure(mInitPath, false);
        float length = mPathMeasure.getLength();
        ValueAnimator animator;
        if (flag) {
            animator = ValueAnimator.ofFloat(length, 0);
        } else
            animator = ValueAnimator.ofFloat(0, length);

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                animatedValue = (Float) animation.getAnimatedValue();
            }
        });

        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //动画展开式时候
                if (!flag) {
                    mPaint.setAlpha(255);
                    mPaint1.setAlpha(255);
                    startCircleAnim();
                    System.out.println("动画展开的时候");
                }
                ReadBook1.this.setEnabled(false);
            }

            @Override
            public void onAnimationEnd(Animator animation) {

                if (flag) {
                    mPaintText.setAlpha(0);
                    mPaint.setAlpha(0);
                    mPaint1.setAlpha(0);
                    System.out.println("动画关闭的时候");
                    mAnimatorCircle.cancel();
                } else {
                    System.out.println("动画展开的时候");
                    mPaintText.setAlpha(255);
                }
                flag = !flag;
                ReadBook1.this.setEnabled(true);
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });

        animator.setDuration(3000);
        animator.start();
    }


    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mAnimatorCircle != null)
            mAnimatorCircle.cancel();
    }

}

3.实现的效果

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

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,453评论 25赞 707
  • 自定义View之案列篇（三）：仿QQ小红点
    光棍节快到了，提前祝愿广大的单身猿猴，早日脱单，尽快找到另一半。 一直觉得 QQ 的小红点非常具有创新，新颖。要是...
    文淑阅读 1,027评论 4赞 11
  • [Android] 自定义View之仿QQ讨论组头像
    转载文章作者：一息尚存 原文链接：http://www.jianshu.com/p/349aa6153fcc 效...
    木木00阅读 971评论 1赞 20
  • 写给你 3
    你问我甜不甜呀甜不甜 我问你咸不咸呀咸不咸 难得无事两个人两只碗 对坐吃饭谈谈天 我问你咸不咸呀咸不咸 你问我甜不...
    黄梁一阅读 182评论 0赞 0
  • 疯子的爱情（记梦）
    镜花山，苍翠青郁的皮肤下埋藏着一颗褶皱干瘪的灵魂。 目的地在哪里？陈静并不清楚，她只是浑浑噩噩地买车票，不断前行，...
    古来古来阅读 566评论 2赞 8