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