如何在Android XML中实现三点加载动画并修改圆点颜色、验证实现思路

现有实现的问题 #

• 根节点重复声明了android命名空间，需删除多余的声明
• <target>标签的android:name属性值为path，与你定义的三个圆点path的实际名称（left_selected/center/right）不匹配，动画无法找到作用目标
• 仅配置了修改尺寸的pathData属性动画，没有新增针对fillColor属性的动画，无法实现颜色切换
• 所有动画逻辑都放在同一个target中，逻辑混乱，应该为每个圆点单独配置对应的target和动画集合

颜色修改方法 #

要在动画中修改圆点颜色，只需为对应圆点的target新增objectAnimator，按如下规则配置即可：

• android:propertyName设置为fillColor
• android:valueType设置为colorType
• android:valueFrom和android:valueTo填写动画前后对应的色值

修正后的完整代码示例 #

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:width="300dp"
            android:height="80dp"
            android:viewportWidth="300"
            android:viewportHeight="80">
            <path
                android:name="left"
                android:pathData="M30,44m-30,0a30,30 0,1 1,60 0a30,30 0,1 1,-60 0"
                android:fillColor="#757575"/>
            <path
                android:name="center"
                android:pathData="M150,40m-40,0a40,40 0,1 0,80 0a40,40 0,1 0,-80 0"
                android:fillColor="#757575"/>
            <path
                android:name="right"
                android:pathData="M270,44m-30,0a30,30 0,1 0,60 0a30,30 0,1 0,-60 0"
                android:fillColor="#757575"/>
        </vector>
    </aapt:attr>

    <!-- 中间圆点动画：从大变小，颜色保持灰色 -->
    <target android:name="center">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:duration="500"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="pathData"
                    android:repeatCount="infinite"
                    android:repeatMode="reverse"
                    android:valueFrom="M150,40m-40,0a40,40 0,1 0,80 0a40,40 0,1 0,-80 0"
                    android:valueTo="M150,44m-30,0a30,30 0,1 0,60 0a30,30 0,1 0,-60 0"
                    android:valueType="pathType" />
                <objectAnimator
                    android:duration="500"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="fillColor"
                    android:repeatCount="infinite"
                    android:repeatMode="reverse"
                    android:valueFrom="#757575"
                    android:valueTo="#757575"
                    android:valueType="colorType" />
            </set>
        </aapt:attr>
    </target>

    <!-- 右侧圆点动画：从小变大，颜色切换为高亮色 -->
    <target android:name="right">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:duration="500"
                    android:startOffset="500"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="pathData"
                    android:repeatCount="infinite"
                    android:repeatMode="reverse"
                    android:valueFrom="M270,44m-30,0a30,30 0,1 0,60 0a30,30 0,1 0,-60 0"
                    android:valueTo="M270,40m-40,0a40,40 0,1 0,80 0a40,40 0,1 0,-80 0"
                    android:valueType="pathType" />
                <objectAnimator
                    android:duration="500"
                    android:startOffset="500"
                    android:interpolator="@android:interpolator/fast_out_slow_in"
                    android:propertyName="fillColor"
                    android:repeatCount="infinite"
                    android:repeatMode="reverse"
                    android:valueFrom="#757575"
                    android:valueTo="#CBA818"
                    android:valueType="colorType" />
            </set>
        </aapt:attr>
    </target>
</animated-vector>

说明：如果需要循环切换左、中、右三个圆点的选中态，按照同样逻辑为左侧圆点新增对应的target和动画，调整startOffset和属性值即可。

内容的提问来源于stack exchange，提问作者Unii