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)，已经为我想实现的效果打下了坚实的基础，那么下一篇就来把这两个按钮合二为一吧。