Android动画篇（二）：颜色和形状改变的ChangeShapeAndColorButton

前言

上一篇我们聊了聊如何实现圆形的进度条，已经了解了ValueAnimator的用法，其实我最终的要实现的效果是这样的：

这是github上开源的一款框架，效果很棒，大家可以参考学习：
https://github.com/dmytrodanylyk/circular-progress-button

从动图的效果上看，圆形的进度条这个难关我们已经攻克了，今天我们来看看如果改变形状、颜色、和大小。

正文

今天的重点还是ValueAnimator，算是一个加强的练习。

首先我们去拆分动画，忽略掉圆形进度条的部分：

1、颜色动画，从一种颜色过度到另外一种颜色
2、圆角动画，圆角从大到小，或者是从小变大
3、形状大小动画，从小到达，或从大到小。

那就从第一步开始：

/**     * 普通状态的背景色     */    private int mNormalBgColor = Color.parseColor("#0000ff");    /**     * 成功状态的颜色     */    private int mSuccessBgColor = Color.parseColor("#00ffff");@Override    protected void onDraw(Canvas canvas) {       canvas.drawColor(mPaintColor);        // 这里是画文字的部分，我们不管        super.onDraw(canvas);    }/**     * 颜色动画     */    private ValueAnimator getColorAnim(int fromColor, int toColor) {    // 注意这里，我们需要一个颜色计算器ArgbEvaluator，否则颜色过度会出现一些问题        ValueAnimator colorAnim = ValueAnimator.ofObject(new ArgbEvaluator(), fromColor, toColor);        colorAnim.setDuration(mDuration);        colorAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override            public void onAnimationUpdate(ValueAnimator valueAnimator) {                mPaintColor = (int) valueAnimator.getAnimatedValue();                invalidate();            }        });        return colorAnim;    }

代码比较多，我把比较重要的贴出来，颜色的过度动画我们需要借助ArgbEvaluator，因为颜色的计算和其他的计算不太一样，否则过度会出现很怪异的情况。这样颜色动画就结束了，so easy，再也不用担心我的学习。

然后是圆角的动画，也是同样的道理：

@Override    protected void onDraw(Canvas canvas) {        if (mRectF == null) {            mRectF = new RectF(0，0，getWidth(), getHeight());        }        // 开始画后面的背景        mPaint.setColor(mPaintColor);        canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);        // 这里是画文字的部分，我们不管        super.onDraw(canvas);    }/**     * 圆角动画     */    private ValueAnimator getRadiusAnim(int fromRadius, int toRadius) {        {            ValueAnimator radiusAnim = ValueAnimator.ofFloat(fromRadius, toRadius);            radiusAnim.setDuration(mDuration);            radiusAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator valueAnimator) {                    mRadius = (float) valueAnimator.getAnimatedValue();//                    invalidate();                }            });            return radiusAnim;        }    }/**     * 开启动画效果     */    private void starteAnimSet(int fromColor, int toColor, int fromRadius, int roRadius, int fromPadding, int toPadding) {        isAnim = true;        // 动画集合        AnimatorSet animatorSet = new AnimatorSet();        // 设置动画播放模式:同时播放        animatorSet.playTogether(getColorAnim(fromColor, toColor), getRadiusAnim(fromRadius, roRadius));        animatorSet.addListener(new Animator.AnimatorListener() {            @Override            public void onAnimationStart(Animator animator) {            }            @Override            public void onAnimationEnd(Animator animator) {                isAnim = false;            }            @Override            public void onAnimationCancel(Animator animator) {            }            @Override            public void onAnimationRepeat(Animator animator) {            }        });        animatorSet.start();    }

如果要是画圆角的话，我们需要再借助两个工具：Paint 和 RectF，代码也很简单，就是画圆角矩形，然后慢慢改变圆角的大小，不停的重绘。为了和之前的颜色动画一起播放，我们使用了AnimatorSet，这是Animator的动画集合，注意是Animator，不是Animation，这两个不要弄混了。

AnimatorSet是属性动画的动画集合。
AnimationSet是视图动画，例如TranslationAnimation，注意后缀单词。

然后就是最后一步了，形状大小动画，这个稍微有点难度，因为可能与一部分朋友不了解一个重要的方法：

canvas.clipRect(mRectF);
在canvas画布上，参见指定为的形状进行绘画。经常使用SurfaceView的小伙伴肯定认识。

注意：仅仅选择画布某个区域，但是并没有改变画布的大小。
有了它，我们仅仅是改变了绘制背景的区域，但是并没有改变控件的大小。

首先我们来明确几个需求：

1、结束的时候是一个圆，圆的大小是Math.min(width, height);
2、我需要计算RectF的位置，所以需要边距，边距要有最大和最小的检查机制。

看看代码要怎么写呢？

 @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int width = getMeasuredWidth();        int height = getMeasuredHeight();        // 计算最大间距，除以2是因为要均分间距，才能居中绘制        maxPadding = Math.abs(width - height) / 2;        // 最小是宽或高        minSize = width > height ? height : width;    }@Override    protected void onDraw(Canvas canvas) {        if (mRectF == null) {            mRectF = new RectF();        }        // 判断宽高        int width = getWidth();        int height = getHeight();    // 计算左右的间距，并且检查值的合法性        int paddingLR = width - mCurrentPadding * 2 < minSize ? (width - minSize) / 2 : mCurrentPadding;        // 计算上下的间距，并且检查值的合法性        int paddingTB = height - mCurrentPadding * 2 < minSize ? (height - minSize) / 2 : mCurrentPadding;    // 找到指定位置的绘制区        mRectF.set(paddingLR, paddingTB, getWidth() - paddingLR, getHeight() - paddingTB);        // 开始画后面的背景        mPaint.setColor(mPaintColor);        // 在canvas上截取我们设置的区域        canvas.clipRect(mRectF);        // 绘制        canvas.drawRoundRect(mRectF, mRadius, mRadius, mPaint);        // 这里是画文字的部分，我们不管        super.onDraw(canvas);    }/**     * 形状动画     */    private ValueAnimator getShapeAnim(int fromPadding, int toPadding) {        {            ValueAnimator shapeAnim = ValueAnimator.ofInt(fromPadding, toPadding);            shapeAnim.setDuration(mDuration);            shapeAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {                @Override                public void onAnimationUpdate(ValueAnimator valueAnimator) {                    // 改变了间距                    mCurrentPadding = (int) valueAnimator.getAnimatedValue();                    // 其他动画有调用invalidate()，所以这里就省略了;                }            });            return shapeAnim;        }    }

代码里注释关键点都写了，我简单的设置最小大小是宽高中最小的，在onDraw里面检查间距的合法性，如果过大肯定就变形了，保证不能小于最小的大小。

具体的运行效果，大家可以直接下载demo，就不贴图了。
https://github.com/li504799868/CircleProgressBar

总结

今天又复习了一遍ValueAnimator的用法，并且认识了新的类和方法：ArgbEvaluator和 canvas.clipRect(mRectF)，已经为我想实现的效果打下了坚实的基础，那么下一篇就来把这两个按钮合二为一吧。