开源项目: circular-progress-button

带进度条显示的按钮, 其效果如下所示:

其由三部分动画组成: 初始状态->圆环状态->完成状态.

0. 实现从初始到圆环的简单实现:

继承自button 类, 设置其背景

public class CircleButton extends Button implements View.OnClickListener {
    private StateListDrawable mIdleStateDrawable;
    private StrokeGradientDrawable background;
    public CircleButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        background = new StrokeGradientDrawable();
//        init();
//        setBackground(mIdleStateDrawable);
        setBackground(background.getGradientDrawable());
        setOnClickListener(this);
    }
//.......
}

其中的StrokeGradientDrawable(照搬源码) 如下:

public class StrokeGradientDrawable {
    private int mStrokeColor;   //描边颜色
    private int mStrokeWidth;   //描边宽度
    public int getStrokeColor() {
        return mStrokeColor;
    }
    public void setStrokeColor(int strokeColor) {
        mStrokeColor = strokeColor;
        mGradientDrawable.setStroke(getStrokeWidth(), strokeColor);
    }
    public int getStrokeWidth() {
        return mStrokeWidth;
    }
    public void setStrokeWidth(int strokeWidth) {
        mStrokeWidth = strokeWidth;
        mGradientDrawable.setStroke(strokeWidth, getStrokeColor());
    }
    public StrokeGradientDrawable() {
        mGradientDrawable = new GradientDrawable();
        mGradientDrawable.setColor(0xff99cc00);
        mStrokeWidth = 5;
    }
    public GradientDrawable getGradientDrawable() {
        return mGradientDrawable;
    }
    public void setmGradientDrawable(GradientDrawable mGradientDrawable) {
        this.mGradientDrawable = mGradientDrawable;
    }
    private GradientDrawable mGradientDrawable;
}

其中的GradientDrawable 为动画的关键所在

在该类中,可以设置其圆角, 填充颜色, 描边, 尺寸等. 因此,当点击按钮时,可通过动画的方式渐变到目的状态, 其实现如下(源码见MorphingAnimation 类):

  @Override
    public void onClick(View v) {
        final GradientDrawable gradientDrawable = background.getGradientDrawable();
        final int mFromWidth = getWidth();
        final int mToWidth = getHeight();
        //宽度动画
        ValueAnimator widthAnimation = ValueAnimator.ofInt(mFromWidth, mToWidth);
        widthAnimation.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                Integer value = (Integer) animation.getAnimatedValue();
                int leftOffset;
                int rightOffset;
                int padding;
                if (mFromWidth > mToWidth) {
                    leftOffset = (mFromWidth - value) / 2;
                    rightOffset = mFromWidth - leftOffset;
                } else {
                    leftOffset = (mToWidth - value) / 2;
                    rightOffset = mToWidth - leftOffset;
                }
                gradientDrawable.setBounds(leftOffset, 0, rightOffset, getHeight());
            }
        });
        //填充颜色
        ObjectAnimator bgColorAnimation = ObjectAnimator.ofInt(gradientDrawable, "color", 0xff99cc00, Color.WHITE);
        bgColorAnimation.setEvaluator(new ArgbEvaluator());
        //描边
        ObjectAnimator strokeColorAnimation =
                ObjectAnimator.ofInt(background, "strokeColor", 0xff99cc00,  Color.GRAY);
        strokeColorAnimation.setEvaluator(new ArgbEvaluator());
        //圆角
        ObjectAnimator cornerAnimation =
                ObjectAnimator.ofFloat(gradientDrawable, "cornerRadius", 0, 30);
        AnimatorSet animatorSet = new AnimatorSet();
        animatorSet.setDuration(2000);
        animatorSet.playTogether(bgColorAnimation, cornerAnimation, widthAnimation,strokeColorAnimation);
        animatorSet.start();
    }