Question

我正在努力实现与 BEMAnimationTypeStroke 类似的功能，可以在iOS库BEMCheckBox中找到。

我尝试使用动画矢量drawable来实现这一点，但我不知道如何设置圆圈内的复选标记从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 最后，我选择了通过自定义视图手动创建动画的方法。如果有人知道如何通过矢量绘制实现这一点，它将是一个很好的开发实践。谢谢。

Answer 1

我一直在寻找同样的东西，post几乎解释了这一切。该帖子的代码：

<强>抽拉/ check_mark.xml

CSS
#header{
   height:700px;
   width:1600px;
   border-color: #00FF00;
}


HTML
   <header>
     <h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1>
     <p>A landing page for your app with focus</p>
   </header>

<强>绘制-V21 / animated_check.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>

<强>动画/ check_animation.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>

<强>用法

布局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>

Java Class

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

Answer 2

您可以使用Airbnb的{{3}}库来做到这一点。

它具有大型图标集和动画，可以使用两种Android开发语言轻松集成，即Java和Kotlin。

这是您想要的滴答动画的Lottie。

要使用此图标，您需要下载此图标的json文件，并将其添加到assets文件夹中，并按照link中的说明进行操作。

Answer 3

创建复选标记的动画可以通过设置复选标记路径trimPathEnd属性的动画来实现（请参阅https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html）。 trimPathEnd属性的值表示结束的路径百分比，修剪超出该百分比的所有内容。通过将trimPathEnd从0设置为1，可以显示复选标记路径的0％到100％。

在下面的AnimatedVectorDrawable定义中，我们引用了一个名为trim_path的动画：

<?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/trim_path"/>
</animated-vector>

然后在anim / trim_path.xml中：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:duration="1000"
            android:propertyName="trimPathEnd"
            android:valueFrom="0"
            android:valueTo="1"/>
</set>

这应该会生成AnimatedVectorDrawable，其复选标记从0％增加到100％。同样，您也可以在圈子上为trimPathEnd设置动画。请注意，您可能需要复制圆形路径，因此一个圆圈为灰色且静态，另一个圆圈为蓝色且顶部为动画。

Answer 4

它对我有用。只需按照上面@ s-hunter的xml代码。在你的活动中修改代码。如下所示：

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

您可以添加rippleBackground以获得更好的外观。

Answer 5

此解决方案用一个xml文件编写：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="lollipop">
    <aapt:attr name="android:drawable">
        <vector
            android:width="50dp"
            android:height="50dp"
            android:viewportWidth="24.0"
            android:viewportHeight="24.0">
            <group android:name="check">
                <path
                    android:name="done"
                    android:pathData="M6,11 l0,0 l0,0"
                    android:strokeWidth="1"
                    android:strokeColor="@color/black" />
            </group>

        </vector>
    </aapt:attr>
    <target android:name="done">
        <aapt:attr name="android:animation">
            <set
                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>
        </aapt:attr>
    </target>

Android圈子复选标记动画

5 个答案: