📜  如何在Android中制作Heart Fill动画(1)

📅  最后修改于: 2023-12-03 14:52:39.386000             🧑  作者: Mango

在Android中制作Heart Fill动画

简介

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动画,其中涉及到了创建项目、添加资源文件以及代码实现的相关细节。希望本文能够为大家提供一定的帮助。