Android 圆形复选标记动画

我正在尝试实现类似的目标BEM动画类型描边可以在 iOS 库中找到BEM复选框 https://github.com/Boris-Em/BEMCheckBox.

我尝试使用动画矢量可绘制对象来实现此目的，但我不知道如何对圆内的复选标记进行动画处理，从 0 起始点到最终位置。 （圆圈可以是静态的，我希望使复选标记具有动画效果）。 这是我为此尝试的实现：

可绘制/vector_drawable_ic_check_circle_white_48px.xml

    <path
            android:name="check"
            android:fillColor="#FFFFFF"
            android:pathData="M37.1,13.6L18.4,32.3h1.7l-8.5-8.5L10,25.5l8.5,8.5l0.8,0.8l0.8-0.8l18.7-18.7L37.1,13.6L37.1,13.6z"/>
    <path
            android:name="circle"
            android:fillColor="#FFFFFF"
            android:pathData="M24,48c13.3,0,24-10.7,24-24S37.3,0,24,0S0,10.7,0,24S10.7,48,24,48L24,48z
M24,45.6
C12.1,45.6,2.4,35.9,2.4,24S12.1,2.4,24,2.4S45.6,12.1,45.6,24S35.9,45.6,24,45.6L24,45.6z"/>
</vector>

动画/transform.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:duration="1000"
            android:propertyName="fillColor"
            android:valueFrom="@color/transparent"
            android:valueTo="@color/white"/>
</set>

可绘制/animation.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawable="@drawable/vector_drawable_ic_check_circle_white_48px">
    <target
            android:name="check"
            android:animation="@anim/change_color"/>
</animated-vector>

设置布局后，我使用以下命令启动动画：

ImageView mCpuImageView = (ImageView) findViewById(R.id.animated_check);
Drawable drawable = mCpuImageView.getDrawable();
if (drawable instanceof Animatable) {
    ((Animatable) drawable).start();
}

谁能帮我这个？有没有更简单的方法来实现这一点（自定义视图或现有库）？

我的想法是，我想要在一个圆圈中有一个复选标记，并且我想要为复选标记的路径设置动画。当它显示时，只有圆圈可见，然后以动画方式创建复选标记。如果其他自定义（例如在对复选标记进行动画处理的同时对圆圈进行动画处理）很容易实现，那就更好了，但首先我只想对复选标记进行动画处理。

LE:最后，我选择采用通过自定义视图手动创建动画的方法。如果有人知道我如何通过矢量绘制来实现这一点，那将是一个很好的开发实践。谢谢。

我一直在寻找同样的，这个post https://medium.com/@ali.muzaffar/understanding-vectordrawable-pathdata-commands-in-android-d56a6054610e几乎可以解释这一切。该帖子中的代码：

可绘制/check_mark.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24.0"
    android:viewportWidth="24.0">
    <group android:name="background">
        <path
            android:name="circle"
            android:fillColor="@color/colorPrimary"
            android:pathData="M12,12m-10,0a10,10 0,1 1,20 0a10,10 0,1 1,-20 0" />
    </group>
    <group android:name="check">
        <path
            android:name="tick"
            android:pathData="M6,11 l0,0 l0,0"
            android:strokeColor="@color/colorAccent"
            android:strokeWidth="1" />
    </group>

</vector>

可绘制-v21/animated_check.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/check_mark">
    <target
        android:name="tick"
        android:animation="@anim/check_animation" />
</animated-vector>

动画/check_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:ordering="sequentially"
    android:shareInterpolator="false">
    <!-- Step 1 -->
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="pathData"
        android:valueFrom="M6,11 l0,0 l0,0"
        android:valueTo="M6,11 l3.5,4 l0,0"
        android:valueType="pathType" />
    <!-- Step 2 -->
    <objectAnimator
        android:duration="@android:integer/config_shortAnimTime"
        android:propertyName="pathData"
        android:valueFrom="M6,11 l3.5,4 l0,0"
        android:valueTo="M6,11 l3.5,4 l8,-7"
        android:valueType="pathType" />
</set>

Usage

布局XML

<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:visibility="visible"
    app:srcCompat="@drawable/animated_check" />

Java类

mImgCheck = (ImageView) findViewById(R.id.imageView);
((Animatable) mImgCheck.getDrawable()).start();