需要在android中自定义进度条

Question

我想实现这样的目标 视频 - https://drive.google.com/file/d/1Ep78y0fecNY8GVOCWFEo_unSSPnPfSUt/view?usp=sharing

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/progressBar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:elevation="8dp"
    android:focusable="true"
    android:visibility="visible"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:visibility="visible">

    <ProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:indeterminateDrawable="@drawable/progress_icon"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />
</FrameLayout>

将 indeterminateDrawable 设置为 progress_icon

progress_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="300" />
    </item>
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="360" />
    </item>
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="420" />
    </item>
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="480" />
    </item>
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="540" />
    </item>
    <item>
        <rotate
            android:drawable="@drawable/ic_sparkspinner_css"
            android:fillAfter="true"
            android:fromDegrees="-60"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="600" />
    </item>

</layer-list>

使用上面的代码，它就像： https://drive.google.com/file/d/1GhdzlTTUmigwpL2MvswRrQxGitA32BL9/view?usp=sharing

ic_sparkspinner_css.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="44dp"
    android:height="44dp"
    android:viewportWidth="44"
    android:viewportHeight="44">
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
  <path
      android:fillColor="#FF000000"
      android:pathData="M21.9878,0C20.3224,0 19,0.9453 19,2.0896L20.0286,13.7562C20.1265,14.4527 20.9837,15 21.9878,15C23.0163,15 23.8735,14.4527 23.9959,13.7562L25,2.0896C25,0.9453 23.6776,0 21.9878,0Z"
      android:strokeWidth="1"
      android:fillType="evenOdd"
      android:strokeColor="#00000000"/>
</vector>

它没有按要求出现，我是 android 动画的新手，最好的方法是什么？如果有人可以帮助解决这个问题。

Answer 1

与其尝试创建对新手来说有点困难的自定义进度条，不如使用 lottie 库。他们收集了大量的进度条和加载动画

Github 库：https://github.com/airbnb/lottie-android 要使用的抽签文件：https://lottiefiles.com/