Android Java 实现弯曲进度条动画：完整代码及详细解析

Android Java 实现弯曲进度条动画：完整代码及详细解析

本文将详细讲解如何使用 Android Java 实现弯曲的进度条动画，并提供完整的代码示例。我们将一步步创建自定义控件 ProgressView，使用 ValueAnimator 控制动画效果，最终实现一个视觉上引人注目的弯曲进度条。

1. 在 Layout 文件中添加自定义控件 ProgressView

首先，在你的布局文件中添加 ProgressView 控件，该控件将用于展示弯曲的进度条。

<com.example.progressbar.ProgressView
    android:id='@+id/progressView'
    android:layout_width='200dp'
    android:layout_height='200dp'
    android:layout_centerInParent='true' />

2. 创建自定义控件 ProgressView

接下来，我们需要创建一个自定义控件 ProgressView，该控件将继承自 View 类，并负责绘制弯曲的进度条。

public class ProgressView extends View {

    private Paint mPaint;
    private RectF mRectF;
    private float mSweepAngle;
    private ValueAnimator mAnimator;

    public ProgressView(Context context) {
        this(context, null);
    }

    public ProgressView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setColor(Color.parseColor('#FF4081'));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(20); // 进度条宽度

        mRectF = new RectF();
        mRectF.set(10, 10, 190, 190); // 进度条区域

        mAnimator = ValueAnimator.ofFloat(0, 360);
        mAnimator.setDuration(2000);
        mAnimator.setInterpolator(new DecelerateInterpolator());
        mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mSweepAngle = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        mAnimator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawArc(mRectF, -90, mSweepAngle, false, mPaint);
    }
}

代码解释：

1. 初始化 Paint 对象: 在构造方法中，我们初始化了 Paint 对象，并设置了颜色、样式和宽度。

   • mPaint.setColor(Color.parseColor('#FF4081')): 设置进度条颜色为粉色。
   • mPaint.setStyle(Paint.Style.STROKE): 设置绘制样式为描边。
   • mPaint.setStrokeWidth(20): 设置进度条宽度为 20 像素。

2. 初始化进度条区域 RectF: 创建 RectF 对象，用于定义进度条绘制的区域。

   • mRectF.set(10, 10, 190, 190): 设置进度条区域的左上角坐标为 (10, 10)，右下角坐标为 (190, 190)。

3. 创建 ValueAnimator 对象: 创建 ValueAnimator 对象，用于控制动画效果。

   • mAnimator = ValueAnimator.ofFloat(0, 360): 设置动画的起始值和结束值，分别为 0 和 360 度。
   • mAnimator.setDuration(2000): 设置动画时长为 2 秒。
   • mAnimator.setInterpolator(new DecelerateInterpolator()): 设置动画插值器为减速插值器，使动画在结束时逐渐减速。
   • mAnimator.addUpdateListener(...): 添加动画更新监听器，在动画更新时调用 onAnimationUpdate() 方法。

4. onAnimationUpdate() 方法: 在 onAnimationUpdate() 方法中，我们获取当前动画的值，并将其赋值给 mSweepAngle 变量。然后调用 invalidate() 方法，重新绘制 View。

5. onDraw() 方法: 在 onDraw() 方法中，我们使用 canvas.drawArc() 方法绘制弧形进度条。

   • canvas.drawArc(mRectF, -90, mSweepAngle, false, mPaint): 绘制一个从 -90 度开始，扫过 mSweepAngle 度的弧形，绘制样式为描边，使用 mPaint 对象进行绘制。

总结

通过以上步骤，我们成功地创建了一个自定义的 ProgressView 控件，并使用 ValueAnimator 实现了一个弯曲的进度条动画。你可以根据自己的需求修改代码，例如更改进度条颜色、宽度、动画时长等，以创建出更加个性化的进度条效果。