使形状变化的背景部分与进度部分相反

Question

我为我的应用制作动画甜甜圈进度条。在此之前，我使用我的课程进行绘图，但是用户告诉我，自Android 8以来应用程序崩溃了。

我说“OK”，让我改变ProgressBar的类型。我找到了这样的解决方案（其他元素，看起来像以前）。并设置半透明颜色以查看每个层的碰撞。正如您所看到的，New中没有可用的像素（橙色和绿色之间）。橙色部分就像绿色（进度）部分的背景：

我的ProgressBar活动：

        <ProgressBar
        android:id="@+id/pb"
        android:layout_width="150dp"
        android:layout_height="150dp"
        style="?android:progressBarStyleHorizontal"
        android:progressDrawable="@drawable/circle"/>

和这个PB的形状：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="10"
            android:useLevel="false">
            <solid android:color="#55ffa500" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="true">
                <solid android:color="#5589c154" />
            </shape>
        </rotate>
    </item>
</layer-list>

简单的动画：

ProgressBar progressBar = findViewById(R.id.pb);
        ObjectAnimator progressAnimator = ObjectAnimator.ofInt(progressBar, "Progress", 0,80);
        progressAnimator.setStartDelay(500);
        progressAnimator.setDuration(1000);
        progressAnimator.start();

看起来我应该用空格（100％-progress-spaces）设置橙色部分的进度。

Answer 1

问题可以通过两条“时钟箭头”线作为分频器来解决：

可以设计为背景颜色：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="ring"
            android:thicknessRatio="10"
            android:useLevel="false">
            <solid android:color="@color/orange" />
        </shape>
    </item>
    <item>
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%">
            <shape
                android:shape="ring"
                android:thicknessRatio="10"
                android:useLevel="true">
                <solid android:color="@color/green" />
            </shape>
        </rotate>
    </item>
    <item android:left="75dp" android:gravity="center">
        <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="270">
            <shape
                android:shape="line"
                android:useLevel="false">

                <size android:width="75dp" android:height="75dp"/>
                <stroke android:width="3dp" android:color="@color/material"/>
            </shape>
        </rotate>
    </item>
    <item android:left="75dp" android:gravity="center">
        <rotate android:pivotX="0%" android:fromDegrees="270" android:toDegrees="630">
            <shape
                android:shape="line"
                android:useLevel="false">

                <size android:width="75dp" android:height="75dp"/>
                <stroke android:width="3dp" android:color="@color/material"/>
            </shape>
        </rotate>
    </item>
</layer-list>