自定义View之app更新动画

为了做一个有温度的IT男，我决定在以后的文章中给大家分享一些看到的，听到的一些东西，如果你不喜欢请留言让我知道，如果你喜欢请点个赞。你也可留言写下自己想分享的东西，温暖你我他。这次分享的是一首歌，毛不易的《消愁》，分享这首歌主要是这首歌的歌词，借用薛之谦的评价：“我是研究歌词的人，我研究了十几年，但是你写到我想给你跪！”，下面贴部分歌词供大家欣赏

一杯敬朝阳，一杯敬月光
唤醒我的向往，温柔了寒窗
于是可以不回头的逆风飞翔
不怕心头有雨，眼底有霜
一杯敬故乡，一杯敬远方
守着我的善良，催着我成长
所以南北的路从此不再漫长
灵魂不再无处安放

好了，言归正传，本篇文章是实现项目中的更新功能，效果如下

app更新动画

观察动画，可以分为几个阶段：

  • 初始化阶段 显示立即升级按钮,在点击立即升级按钮后，执行放大再缩小至消失动画
  • 准备阶段 进度条背景从中间向两端扩散，然后进度提示图片显示，进度提示文字显示0%
  • 更新阶段 进度更新时，进度提示图片和文字旋转向前移动，如果一定时间内进度没更新的话，进度提示图片和文字要置回水平状态
  • 成功阶段，进度提示图片缩放消失，进度条背景从两端向中间缩小至消失
  • 安装阶段 马上安装图片放大显示

1.首选看初始化阶段，我们要判断用户是否点击了立即升级按钮，我们通过监听onTouchEvent事件判断手指是否落在可点击区域

//如果点击生效，执行动画
if (rectClickRange.contains(event.getX(), event.getY()))
startBtnDisappear();//立即更新按钮消失动画

其中rectClickRange是我们定义的可点击区域，也就是立即更新图片的显示区域

rectClickRange = new RectF(getWidth() / 2 - startDrawable.getWidth() / 2, getHeight() / 2 - startDrawable.getHeight() / 2, getWidth() / 2 + startDrawable.getWidth() / 2, getHeight() / 2 + startDrawable.getHeight() / 2);//startDrawable是立即更新图片

点击生效后我们执行立即更新按钮消失动画，代码如下

    /**
     * 点击立即升级的时候，立即升级按钮执行消失动画
     * 动画效果是按钮放大一点之后缩小至消失
     * 根据效果选择插值器AnticipateInterpolator（开始的时候向后然后向前甩）
     * 将bitmapscale设置到立即升级图片上
     * 动画结束后状态更新为准备状态
     */

    private void startBtnDisappear() {
        initStateData();
        ValueAnimator va = ValueAnimator.ofInt(0, 1);
        va.setInterpolator(new AnticipateInterpolator());
        va.setDuration(800);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                bitmapScale = 1 - animation.getAnimatedFraction();
                invalidate();
            }
        });
        va.addListener(new MyAnimationListener() {
            @Override
            public void onAnimationEnd(Animator animation) {
                cancleValueAnimator(va_List);
                state = PREPARE;
                toPrepare();
            }
        });
        va.start();
        va_List.add(va);
    }

然后在onDraw里面绘制立即升级按钮动画，代码如下：

                matrix.reset();
                matrix.setScale(bitmapScale, bitmapScale);//缩放图片
                matrix.preTranslate(0, 0);
                matrix.postTranslate(width / 2 - startDrawable.getWidth() / 2 * bitmapScale, height / 2 - startDrawable.getHeight() / 2 * bitmapScale);//不断的改变缩放的中心点
                canvas.drawBitmap(startDrawable, matrix, bitmapPaint);

2.接着我们看一下准备阶段，我们通过画path，并不断的改变path的起点和终点达到所需要的动画效果，代码如下：

    /**
     * PREPARE状态
     * 进度条从中间向两端扩散
     * 具体做法是不断改变path的起点和终点坐标
     * 动画结束的时候开始下载更新
     */

    private void toPrepare() {
        final ValueAnimator va = ValueAnimator.ofFloat(0, width / 2 - pbPaint.getStrokeWidth() * 3 - pbProgerssDrawable.getWidth());
        va.setInterpolator(new LinearInterpolator());
        va.setDuration(200);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (Float) animation.getAnimatedValue();
                startX = (int) (width / 2 - value);
                endX = (int) (width / 2 + value);
                if (animation.getAnimatedFraction() == 1) prepareDone = true;
                invalidate();
            }
        });
        va.addListener(new MyAnimationListener() {
            @Override
            public void onAnimationEnd(Animator animation) {
                if (startDownLoadListener != null && !isSetListener) {
                    isSetListener = true;
                    postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            state = UPDATEING;                 
                            startDownLoadListener.downLoad();//动画结束，通知界面开始下载apk
                            text = progress * 100 / max + "%";
                        }
                    }, 200);
                }
            }
        });
        va.start();
        va_List.add(va);
    }

具体的绘制代码如下

                pbPath.reset();
                pbPath.moveTo(startX, height / 2);
                pbPath.lineTo(endX, height / 2);
                canvas.drawPath(pbPath, pbPaint);//绘制path
                //进度条完全显示后，画进度提示图片和文字
                if (prepareDone) {
                    canvas.drawBitmap(pbProgerssDrawable, startX - pbProgerssDrawable.getWidth() / 2, height / 2 - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth(), bitmapPaint);
                    String text = "0%";
                    textPaint.getTextBounds(text.toCharArray(), 0, text.toCharArray().length, textRect);
                    canvas.drawText(text, startX - textRect.right / 2, height / 2 - pbProgerssDrawable.getHeight() / 2 - pbPaint.getStrokeWidth() + textRect.bottom, textPaint);
                }

3.这个时候界面就开始下载apk（代码不贴了），然后通知view来更新进度，更新的动画是图片和文字旋转向前移动（我们的做法是将画布旋转），如果一定时间进度没有变化，更新的图片和文字置回正常状态（我们通过启动线程不断的将画布旋转回来并更新view，如果这个阶段进度有更新的话，我们把线程remove掉），绘制代码如下

                pbPath.reset();
                pbPath.moveTo(startX, height / 2);
                pbPath.lineTo(endX, height / 2);
                pm.setPath(pbPath, false);
                //不断截取进度到pbPathSec并绘制
                if (progressOffsetX >= pm.getLength()) {
                    pm.getSegment(0, pm.getLength(), pbPathSec, true);
                    pm.getPosTan(pm.getLength(), POS, null);
                } else {
                    pm.getSegment(0, progressOffsetX, pbPathSec, true);
                    pm.getPosTan(progressOffsetX, POS, null);
                }
                matrix.reset();
                matrix.setTranslate(POS[0] - pbProgerssDrawable.getWidth() / 2, POS[1] - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth());
                canvas.drawPath(pbPath, pbPaint);
                canvas.drawPath(pbPathSec, pbUpdatePaint);
                canvas.save();
                //如果进度没有到达100%，并且进度在更新的时候，画布旋转，然后画进度提示图片和文字
                if (progressOffsetX < pm.getLength() && !isRotate) {
                    canvas.rotate(-15, POS[0], POS[1] - pbPaint.getStrokeWidth() / 2);
                }
                canvas.drawBitmap(pbProgerssDrawable, matrix, bitmapPaint);
                if (progressOffsetX >= pm.getLength())
                    progressOffsetX = pm.getLength();
                text = (int) (progressOffsetX * 100 / pm.getLength()) + "%";
                textPaint.getTextBounds(text.toCharArray(), 0, text.toCharArray().length, textRect);
                canvas.drawText(text, progressOffsetX + startX - textRect.right / 2, height / 2 - pbProgerssDrawable.getHeight() / 2 - pbPaint.getStrokeWidth() + textRect.bottom, textPaint);
                //我们启动一个线程，如果300毫秒进度没有更新，将画布旋转回来画进度提示图片和文字
                if (progressOffsetX < pm.getLength()) postDelayed(rotateRunnable, 300);
                else toSucc();
                canvas.restore();

其中rotateRunnable的代码如下


    //每隔一段时间刷新界面，如果进度没有更新，将画布旋转回来
    private Runnable rotateRunnable = new Runnable() {
        @Override
        public void run() {
            isRotate = true;
            invalidate();
        }
    };

4.当进度达到100%的时候，我们将进度提示图片缩放至消失，并且进度背景执行两端向中间缩小动画，也是改变path的起始点，代码如下

 //下载进度达到100时，进度提示图片进行缩放
    private void toSuccBitmapScale() {
        cancleValueAnimator(va_List);
        ValueAnimator va = ValueAnimator.ofFloat(1, 0);
        va.setInterpolator(new AccelerateInterpolator());
        va.setDuration(100);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                bitmapScale = (Float) animation.getAnimatedValue();
                state = SUCCESS;
                invalidate();
            }
        });
        va.start();
        va.addListener(new MyAnimationListener() {
            @Override
            public void onAnimationEnd(Animator animation) {
                toSuccPathAnim();
            }
        });
        va_List.add(va);
    }

    //成功后进度条缩放动画
    private void toSuccPathAnim() {
        cancleValueAnimator(va_List);
        ValueAnimator va = ValueAnimator.ofInt(0, (endX - startX) / 2);
        va.setInterpolator(new AccelerateInterpolator());
        va.setDuration(300);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                transx = (int) animation.getAnimatedValue();
                state = SUCCESS;
                invalidate();
            }
        });
        va.start();
        va.addListener(new MyAnimationListener() {
            @Override
            public void onAnimationEnd(Animator animation) {
                toInstall();
            }
        });
        va_List.add(va);
    }

绘制代码如下

                pbPath.reset();
                pbPath.moveTo(startX + transx, height / 2);//不断的改变起点
                pbPath.lineTo(endX - transx, height / 2);//改变终点
                pm.setPath(pbPath, false);
                pm.getSegment(0, (endX - startX), pbPathSec, true);
                pm.getPosTan(endX - startX, POS, null);
                matrix.reset();
                matrix.preTranslate(POS[0] - pbProgerssDrawable.getWidth() / 2, POS[1] - pbProgerssDrawable.getHeight() - pbPaint.getStrokeWidth());
                matrix.postScale(bitmapScale, bitmapScale, POS[0], POS[1] - pbPaint.getStrokeWidth());
                canvas.drawPath(pbPath, pbUpdatePaint);//path缩放动画
                canvas.drawBitmap(pbProgerssDrawable, matrix, bitmapPaint);//bitmap缩放动画

5.最后就是显示马上安装图片动画了，一个简单的缩放

  //显示马上安装图片动画
    private void toInstall() {
        cancleValueAnimator(va_List);
        ValueAnimator va = ValueAnimator.ofInt(0, 1);
        va.setInterpolator(new LinearInterpolator());
        va.setDuration(400);
        va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                bitmapScale = animation.getAnimatedFraction();
                state = INSTALL;
                invalidate();
            }
        });
        va.start();
        va_List.add(va);
    }


      //绘制代码如下
                matrix.reset();
                matrix.setScale(bitmapScale, bitmapScale);
                matrix.preTranslate(0, 0);
                matrix.postTranslate(width / 2 - succDrawable.getWidth() / 2 * bitmapScale, height / 2 - succDrawable.getHeight() / 2 * bitmapScale);
                canvas.drawBitmap(succDrawable, matrix, bitmapPaint);

回过头来看看，其实当我们把动画不断的分解之后，发现其实每个动画并没有那么难，我们这里用到的有path绘制及截取，getPosTan（获取路径上某点的坐标及其切线的坐标），利用Matrix做动画，使用属性动画ValueAnimator。本篇还有好多功能没有实现，比如下载失败动画，失败后恢复至初始化动画，不过任何轮子都不一定能完全适合你，学习到知识之后自己造一个适合自己的才是最重要。

好了，本篇代码已经上传github，欢迎star
github地址：https://github.com/MrAllRight/BezierView

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

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,561评论 25赞 707
  • 源码众享最新教程 - 草稿
    ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程，因...
    小菜c阅读 6,194评论 0赞 17
  • 爱情💓
    只要心中有那样一个想念的人 你就不再是孤独一个人。 你是否心里有了那样一个他 尽管自己得不到 却也不想让其他人拥有...
    樱栎阅读 219评论 0赞 0