Android svg矢量图实现心跳动画

要实现的效果如下：

将svg转化为xml文件

阿里巴巴矢量图标库iconfont：https://www.iconfont.cn/

我们需要的心跳图标如下所示：

下载需要的svg图标，右键drawable->new->Vector Asset->选择下载的svg图标->生成xml文件

生成的xml文件如下：

给每个path添加name，并修改描边颜色和宽度以及设置为圆角（round）

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:name="arc1"
        android:pathData="M952.64,501.12l-49.28,-41.28A245.44,245.44 0,0 0,960 304a240.64,240.64 0,0 0,-423.68 -155.52l-24.32,29.12 -24.32,-29.12A240.64,240.64 0,0 0,64 304a245.44,245.44 0,0 0,56.64 155.84l-49.28,41.28A307.52,307.52 0,0 1,0 304a304.64,304.64 0,0 1,512 -222.4,304.64 304.64,0 0,1 512,224 307.52,307.52 0,0 1,-71.36 195.52z"
        android:strokeWidth="5"
        android:strokeColor="#d81e06"
        android:strokeLineCap="round" />
    <path
        android:name="arc2"
        android:pathData="M485.12,754.56l-106.24,-230.08 -38.4,83.52H0v-64h299.52l79.04,-172.48 99.2,214.08 128.96,-361.92L725.12,544H1024v64H680.32L608,411.2l-122.88,343.36z"
        android:strokeWidth="5"
        android:strokeColor="#d81e06"
        android:strokeLineCap="round" />
    <path
        android:name="arc3"
        android:pathData="M558.72,1024h-93.44l-265.6,-314.88 48.64,-41.28 246.4,292.16h34.56l246.08,-292.16 48.96,41.28 -265.6,314.88z"
        android:strokeWidth="5"
        android:strokeColor="#d81e06"
        android:strokeLineCap="round" />
</vector>

给每个path设置动画

定义一个属性动画

<?xml version="1.0" encoding="utf-8"?><!-- 属性动画 -->
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:propertyName="trimPathStart"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"/>

新建xl_anim.xml文件，将每个svg的path指定属性动画：

<?xml version="1.0" encoding="utf-8"?><!--把控制动画文件 和矢量图文件 绑定的文件--><!--android:drawable="@drawable/search_bar" 设置矢量图文件-->
<!-- 属性矢量动画 -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/ic_heart"
    tools:targetApi="lollipop">
    <!-- android:drawable="@drawable/searchbar"  矢量图片 -->

    <!-- 指定动画 -->
    <target
        android:name="arc1"
        android:animation="@animator/anim_searchbar" />

    <target
        android:name="arc2"
        android:animation="@animator/anim_searchbar" />

    <target
        android:name="arc3"
        android:animation="@animator/anim_searchbar" />

</animated-vector>

在布局文件中使用xl_anim：

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/xl_anim" />

点击图标开始svg动画：

 imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AnimatedVectorDrawable animatedVectorDrawable
                        = (AnimatedVectorDrawable) imageView.getDrawable();
                animatedVectorDrawable.start();

            }
        });

Github：https://github.com/345166018/AndroidUI/tree/master/HxSvg