Android svg VectorDrawable 动画效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zl18603543572/article/details/78495578

Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画

1 创建svg静态图形（VectorDrawable）

res/drawable/rectangle.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">

    <path
        android:name="rect_vector"
        android:fillColor="#04f91d"
        android:pathData="M 100 100 L 300 100 L 300 300 L 100 300 z"
        android:strokeColor="#f76f07"
        android:strokeWidth="5" />

</vector>

在这里创建的是一个矩形

2 创建属性动画

res/animator/changecolor.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="5000"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_green_light"
    android:valueType="colorType">
</objectAnimator>

propertyName 定义为fillColor，也就是动态的改变图形的填充颜色
duration 定义执行时间为 5000 毫秒
valueFrom 定义开始的颜色
valueTo 定义为将要过渡到的颜色
valueType 定义改变的属性的类型

3 使用animated-vector连接vectordrawable和属性动画，命名为change_color.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/rectangle"
    tools:targetApi="lollipop">

    <target
        android:animation="@animator/changecolor"
        android:name="rect_vector"/>

</animated-vector>

animated-vector 节点下 drawable定义加载 静态VectorDrawable图形
target 节点用来关联属性动画与 静态VectorDrawable图形 
target 节点下 animation定义加载将要执行的动画文件
target 节点下 name 定义对应的属性动画将要执行在 哪个路径上

4 代码中加载使用

private AnimatedVectorDrawable mDrawable;
//获取AnimatedVectorDrawable
mDrawable = (AnimatedVectorDrawable) getResources().getDrawable(R.drawable.change_color);
//关联imageView
imageView.setImageDrawable(mDrawable);
//开启动画
mDrawable.start();