Android动画篇（一）：圆形进度条CircleProgressBar

前言

最近看框架和源码比较多，很久没有写动画了，相信很多的朋友都对动画感兴趣，我也不例外，毕竟做前端还是要靠动画特效吃饭的，并且比写功能模块更有成就感。

今天我们就来个稍微简单一点的CircleProgressBar热个身。

首先需要对ValueAnimator动画，还有Canvas，Paint画图的相关的类和API都有一定的了解，所以这部分还比较薄弱的朋友可以先去学习一下基础知识，否则可能会有些吃力。

正文

先看一下效果图，我不会录屏，就百度了一张图片：

大概是这样的效果，首先我们不考虑效果，先画出这个圆形的进度条，新建文件CircleProgressBar：

/**     * 进度     */    private float mProgress = 50;    /**     * 最大进度     */    private int mMaxProgress = 100;/**     * 绘制进度条     */    private void drawProgress(Canvas canvas) {        // 开始画进度条        // 首先画出背景圆        mPaint.setColor(mBackgroundColor);        mPaint.setStyle(Paint.Style.FILL);        // 这里减去了边框的宽度        canvas.drawCircle(mWidth / 2, mHeight / 2, mRadius - mBorderWidth, mPaint);        // 画出进度条        mPaint.setColor(mProgressBorderColor);        mPaint.setStyle(Paint.Style.STROKE);        mPaint.setStrokeWidth(mBorderWidth);        // 计算圆弧划过的角度        float angle = CIRCULAR / mMaxProgress * mProgress;        // 这里要画圆弧        canvas.drawArc(mContentRectF, -90, angle, false, mPaint);        // 画出补全部分的进度条        mPaint.setColor(mBorderColor);        mPaint.setStrokeWidth(mBorderWidth);        // 这里要画圆弧        canvas.drawArc(mContentRectF, -90 + angle, CIRCULAR - angle, false, mPaint);    }

先话出背景色的圆，然后画出进度条的颜色的边框，再画出进度条以外的部分，为了显示的明显，我分别用了三个颜色，最终的效果：

最初的样子已经出来了，但是有一个小细节要注意：

这里贴出mMaxProgress = 100，为什么不是1000，10000呢？当然也可以，但是我不推荐这个数字过大，大家可以去看看系统自带的ProgressBar，他的注释有提醒开发者，不要使用过大的max，最好是100，感兴趣的可以去看一看。

现在就差动画了，接下来我们来分析一下动画：

1、首先进度会飞快的上涨，以顺时针为方向，伸长的部分是头部。
2、然后进度会飞速的下降，以顺时针为方向，缩短的部分是尾部。

首先我们来完成第一部分：

/**     * 开始过度动画     */    private void startIntermediateAnim() {        if (valueAnimator == null) {            valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress);            valueAnimator.setDuration(DURATION);            valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator valueAnimator) {                // 设置进度                    float value = (float) valueAnimator.getAnimatedValue();                    setProgress(value);                }            });        valueAnimator.setRepeatCount(-1);        valueAnimator.start();    }

也是没什么太多的技术含量，但是有几点需要说明一下：

我们使用ValueAnimator().ofFloat，是为了动画的流畅性，如果你使用了int，你会发现动画会有一些细微的卡顿，因为int型舍弃了小数部分，这样就会出现误差，视觉上就会出现卡顿。

伸长的动画已经成型了，那缩短的动画不就简单了，直接动画reverse不就好了？我激动得设置了：

valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress，0);或者是valueAnimator.setRepeatMode(ValueAnimator.REVERSE);

我迫不及待的运行了代码，卧草草，竟然不行？仔细观察效果，我们发现了问题：

如果是缩短，还是从顺时针的头部缩短，而不是从尾部，这是为什么呢？其实从api也可以理解，因为我们是从起始位置开始画弧，只要起始位置不变，尾部肯定不会发生变化。

虽然明白了这个道理，但是心情非常的压抑，难道就要放弃了？突然灵光一闪，我发现了一个神奇的办法，不知道机智的小伙伴是不是也想到了：

还记得我之前的绘图步骤吗？
先绘制进度部分，然后剩余部分不全。

既然进度部分只能头部伸长，尾部也是一样，那我让补全部分伸长，那进度部分的尾部不就是缩短了吗？

那如何让补全部分伸长呢？

1、把progress在伸长结束时，开始让补全部分使用progress，从而让他伸长，但是这样会改变原有的功能逻辑，非常危险，工作量也大。

2、最简单的办法，把进度的颜色不补全部分的颜色交换，然后把位置也互换，不就OK了？

经过简单的修改之后：

if (valueAnimator == null) {            valueAnimator = new ValueAnimator().ofFloat(0, mMaxProgress);            valueAnimator.setDuration(DURATION);            valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator valueAnimator) {                    float value = (float) valueAnimator.getAnimatedValue();                    setProgress(value);                }            });            valueAnimator.addListener(new Animator.AnimatorListener() {                @Override                public void onAnimationStart(Animator animator) {                }                @Override                public void onAnimationEnd(Animator animator) {            // 因为是循环动画，所以这里不会回调                }                @Override                public void onAnimationCancel(Animator animator) {                }                @Override                public void onAnimationRepeat(Animator animator) {                    // 互换两者的颜色                    int color = getProgressBackgroundColor();                    setProgressBackgroundColor(getProgressColor());                    setProgressColor(color);                }            });        }        valueAnimator.setRepeatCount(-1);        valueAnimator.start();

ok，还有谁？最关键的部分已经全部完成了，还差最后一点点，仔细的观察效果图，发现进度条是有最小进度的，没有完全消失，所以我们再设置一个最小进度，并且每次设置进度的时候，我们都稍微旋转一下角度，这样就会一边伸长缩短一边旋转了：

/**     * 开始过度动画     */    private void startIntermediateAnim() {        if (valueAnimator == null) {            valueAnimator = new ValueAnimator().ofFloat(mMinProgress, mMaxProgress - mMinProgress);            valueAnimator.setDuration(DURATION);            valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());            valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator valueAnimator) {                    float value = (float) valueAnimator.getAnimatedValue();                    setProgress(value);                    // 每次旋转2度                    mStartAngle += 2;                }            });            valueAnimator.addListener(new Animator.AnimatorListener() {                @Override                public void onAnimationStart(Animator animator) {                }                @Override                public void onAnimationEnd(Animator animator) {                }                @Override                public void onAnimationCancel(Animator animator) {                }                @Override                public void onAnimationRepeat(Animator animator) {                // 因为有了最小进度，所以每次都要位置设置到补全部分的位置                    mStartAngle = mStartAngle - CIRCULAR / mMaxProgress * mMinProgress;                    // 互换两者的颜色                    int color = getProgressBackgroundColor();                    setProgressBackgroundColor(getProgressColor());                    setProgressColor(color);                }            });        }        valueAnimator.setRepeatCount(-1);        valueAnimator.start();    }

最终的效果，就想一开始的效果图一样，这里不贴了。

总结

看上去稍微有点复杂的动画，经过我们的分析拆解，就变得很简单了。如果是利用Translation, Rotate 这样的动画，那实现起来真是太难了，ValueAnimator就是从他们中分离出来的专门用来计算差值的强大武器，有了它我们开发一些高级的效果，就简单多了。

我对demo进行了一些修改，即可以是普通的圆形进度条，也可以是loading的动画，就想progressBar一样，大家可以下载下来，参考一下。

github下载地址

ok，今天就到这里了，明天就是周末了，祝大家浪起来~