前言

上一篇我们聊了聊如何实现圆形的进度条，已经了解了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)，已经为我想实现的效果打下了坚实的基础，那么下一篇就来把这两个按钮合二为一吧。