📅  最后修改于: 2023-12-03 14:52:39.386000             🧑  作者: Mango
Heart Fill动画是一种常见的动画效果,它能够吸引用户的眼球,让用户的体验更加优秀。本文将介绍如何在Android中制作Heart Fill动画。
1.创建项目并添加相关资源文件
我们需要创建一个Android项目,并在res文件夹下创建一个drawable文件夹,用来存放动画相关的资源文件。在该文件夹下创建一个heart_fill.xml动画资源文件。
heart_fill.xml的内容如下(注意修改包名):
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/ic_heart_blank">
<target android:name="heart_blank_path">
<animate
android:attributeName="android:pathData"
android:fromData="@string/ic_heart_blank_path"
android:toData="@string/ic_heart_fill_path"
android:duration="100"
android:startOffset="3000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse" />
</target>
<target android:name="heart_outline_path">
<animate
android:attributeName="android:pathData"
android:fromData="@string/ic_heart_outline_path"
android:toData="@string/ic_heart_fill_path"
android:duration="100"
android:startOffset="3000"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
android:repeatCount="infinite"
android:repeatMode="reverse" />
</target>
</animated-vector>
2.添加path资源
在drawable文件夹下创建一个ic_heart_blank.xml和一个ic_heart_outline.xml文件,并将其内容分别设置为:
ic_heart_blank.xml:
<path
android:name="heart_blank_path"
android:pathData="M33.46,10.65c7.15-7.15,18.78-7.15,25.93,0s7.15,18.78,0,25.93L58.39,48.2,29.19,77.4c-7.15,7.15-18.78,7.15-25.93,0s-7.15-18.78,0-25.93L32.23,35.28Z"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:strokeWidth="1"
android:fillColor="@android:color/white" />
ic_heart_outline.xml:
<path
android:name="heart_outline_path"
android:pathData="M33.46,10.65c7.15-7.15,18.78-7.15,25.93,0s7.15,18.78,0,25.93L58.39,48.2,29.19,77.4c-7.15,7.15-18.78,7.15-25.93,0s-7.15-18.78,0-25.93L32.23,35.28Z"
android:strokeLineCap="round"
android:strokeLineJoin="round"
android:strokeWidth="1"
android:fillColor="transparent"
android:strokeColor="@android:color/white" />
3.代码实现
1.在你需要添加动画效果的布局文件中添加一个ImageView
<ImageView
android:id="@+id/iv_heart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:src="@drawable/ic_heart_fill" />
2.在Activity中获取到ImageView并设置我们上面写的heart_fill.xml作为它的src属性值,具体代码如下:
ImageView btnHeart = findViewById(R.id.iv_heart);
btnHeart.setImageResource(R.drawable.heart_fill);
((Animatable) btnHeart.getDrawable()).start();
完成上述操作后,你的Heart Fill动画就已经实现了。
本文主要介绍了如何在Android中制作Heart Fill动画,其中涉及到了创建项目、添加资源文件以及代码实现的相关细节。希望本文能够为大家提供一定的帮助。