Android圆圈loading-CFANZ编程社区

Android 圆圈 Loading 动画的实现与原理

在移动应用开发中，良好的用户体验是至关重要的。为了提示用户正在加载数据或者执行某项操作，开发者通常会使用加载动画。本文将以 Android 平台上的圆圈 loading 动画为例，介绍其实现方法及原理。

一、圆圈 Loading 动画的概念

圆圈 loading 动画是一种常见的加载指示器，它通常以一个旋转的圆圈来表示应用正在进行某项操作，用户可以根据这个指示器判断操作的进度。圆圈 loading 动画在用户界面中起到了提示和美化效果。

二、基本实现思路

在 Android 开发中，圆圈 loading 动画的实现主要依赖于 ProgressBar 控件。为了实现一个圆圈 loading 动画，我们可以使用继承自 ProgressBar 的自定义控件，并通过 XML 和 Java/Kotlin 代码来控制其外观和动画。

1. 创建自定义 ProgressBar

首先，我们需要创建一个自定义的 ProgressBar 类，来实现圆圈 loading 动画。

// CircleProgressBar.java
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.animation.ValueAnimator;

public class CircleProgressBar extends View {
    private Paint paint;
    private float strokeWidth = 10f;
    private float sweepAngle = 0f;
    
    public CircleProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();
        paint.setColor(0xFF6200EE); // 紫色
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(strokeWidth);
        paint.setAntiAlias(true);
        startAnimation();
    }

    private void startAnimation() {
        ValueAnimator animator = ValueAnimator.ofFloat(0f, 360f);
        animator.setDuration(2000);
        animator.setRepeatCount(ValueAnimator.INFINITE);
        animator.addUpdateListener(animation -> {
            sweepAngle = (float) animation.getAnimatedValue();
            invalidate(); // 促使重绘
        });
        animator.start();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float cx = getWidth() / 2;
        float cy = getHeight() / 2;
        float radius = Math.min(cx, cy) - strokeWidth / 2;
        canvas.drawArc(cx - radius, cy - radius, cx + radius, cy + radius, -90, sweepAngle, false, paint);
    }
}

这个自定义的 CircleProgressBar 类利用 ValueAnimator 动画不断更新 sweepAngle，并在 onDraw 方法中将其绘制为一个半圆形。

2. 在 XML 布局中使用

接下来，我们要在布局 XML 中使用这个自定义的圆圈进度条。

<!-- activity_main.xml -->
<RelativeLayout xmlns:android="
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.example.myapp.CircleProgressBar
        android:id="@+id/circleProgressBar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerInParent="true"/>
</RelativeLayout>

三、动画交互流程

为了更好地理解圆圈 loading 动画的交互流程，以下是一个简单的序列图，展示了用户与圆圈 loading 动画之间的交互。

sequenceDiagram
    participant User
    participant App
    User->>App: 点击加载数据
    App->>CircleProgressBar: 开始动画
    App->>DataLoader: 请求数据
    DataLoader->>App: 返回数据
    App->>CircleProgressBar: 停止动画
    App->>User: 展示数据