Android圆圈复选标记动画
我试图实现类似BEMAnimationTypeStroke,它可以在iOS库BEMCheckBox中找到。Android圆圈复选标记动画
我试过使用动画矢量绘制来实现这一点,但我不知道如何动画从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: 最后我选择了通过自定义视图手动创建动画的方法。如果任何人有一个想法,我怎样才能通过矢量绘制实现这一点,它将是一个很好的开发实践。谢谢。
创建复选标记的动画可以通过动画选中标记路径的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
。请注意,您可能需要复制圆形路径,因此一个圆形是灰色和静态的,另一个圆形是蓝色,顶部是动画。
我一直在寻找相同的东西,这个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();
这不会做任何动画 –
不知道为什么它不适合你,但它对我来说 –
没有为我工作! –
这对我的作品。只需按照上面的@ s-hunter的xml代码。在你的活动中修改代码。如下所示:
mImgCheck = (ImageView) findViewById(R.id.imageView);
Drawable drawable = mImgCheck.getDrawable();
((Animatable) drawable).start();
您可以添加rippleBackground以获得更好的外观。
仍然不能正常工作 –
显示您的代码。使用您的解决方案可以很容易地建议 –
与上面的@ s-hunter完全相同的代码。 –
它不起作用。不为我制作动画。 – kdas
'mCpuImageView.getDrawable()'给了我一个可绘制的VectorDrawable实例,而不是'Animatable' – kdas