Android圆圈复选标记动画

Question

我试图实现类似BEMAnimationTypeStroke，它可以在iOS库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： 最后我选择了通过自定义视图手动创建动画的方法。如果任何人有一个想法，我怎样才能通过矢量绘制实现这一点，它将是一个很好的开发实践。谢谢。

Answer 1

创建复选标记的动画可以通过动画选中标记路径的trimPathEnd属性（请参阅https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html）来实现。 trimPathEnd属性的值表示末尾应该位于的路径的百分比，修剪超出该百分比的所有内容。通过动画trimPathEnd从0到1将显示从0％到100％的复选标记路径。在动画/ trim_path.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/trim_path"/> 
</animated-vector> 

然后：

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

<?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 2

我一直在寻找相同的东西，这个post几乎可以解释这一切。从该职位代码：

绘制/ 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> 

使用

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    android:visibility="visible" 
    app:srcCompat="@drawable/animated_check" /> 
mImgCheck = (ImageView) findViewById(R.id.imageView); 
((Animatable) mImgCheck.getDrawable()).start(); 

Answer 3

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

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

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