使用SVG自定义动画效果

SVG可以在Android的XML文件中自定义图形，并生成动画效果，对于自定义一些简单的动画效果效率比较高

1.path语法

path类似于画笔paint，用于在画布上画出想要的形状，常用的path标签使用move和line

M: moveTo(x,y)将画笔移动到指定的坐标位置(x,y)
L:lineTo(x,y)画直线到（初始x坐标+x,初始y坐标+y）

需要注意的是，坐标轴以当前View所在画布左上角(0,0)为原始坐标，X轴正方向水平向右，y轴正方向水平向下

2.自定义”确定“动画

2.1 res/drawable下创建ensure_svg.xml SVG图

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="200"
    android:viewportHeight="200">
​
    <path android:name="ensure"
        android:strokeWidth="3"
        android:strokeColor="@color/design_default_color_error"
        android:pathData="M0 100 l50 50 l100 -200"/>
​
</vector>

· vector标签代表矢量图

· 定义一个path名称为ensure的path标签，设置strokeWidth 和 strokeColor 均和画笔属性相关

· pathData是动画路径形状

首先将画笔利用path标签move到(0,100)处，接着画线到(50,150),最后连线到(200,0)

2.2 在res下创建animator文件夹并新建动画文件ensure_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="trimPathEnd"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType">
​
</objectAnimator>

该objectAnimator的各属性为：

· duration：动画时常为1000ms

· propertyName：该属性配合valueFrom、valueTo，表示截掉从起点到某个位置的部分，保留剩下的部分；使用trimStart属性,valueFrom:0 , valueTo:1 表示线条从起点缩短到终点，即初始截断部分是0%，从起点到终点100%

· repeatCount：动画的重复次数,infinite为无限次，也可以指定int型次数

· repeatMode：动画重复模式，包括reverse和restart

2.3 在res/drawable文件夹下面创建ensure_animated_vector.xml将动画和SVG关联起来

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ensure_svg">
​
    <target
        android:animation="@animator/ensure_animator"
        android:name="ensure"/>
​
</animated-vector>

· animated-vector标签指定dawable为SVG文件

· target 指定的是动画效果和SVG文件中对应的名称为"ensure"的Path

2.4使用动画效果

xml中使用ImageView并指定src

    <ImageView
        android:id="@+id/svg_imageview"
        android:layout_gravity="center"
        android:src="@drawable/ensure_animated_vector"
        android:layout_width="100dp"
        android:layout_height="100dp"/>

代码中启动动画效果

    fun startAnimation(imageview:ImageView){
        val drawable = imageview.drawable
        if (drawable is Animatable){
            (drawable as Animatable).start()
        }
    }

2.5 动画效果如下

3.自定义”加载等待“效果

3.1 在res/drawable下创建loading_svg.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="200"
    android:viewportWidth="200">
​
    <group>
​
        <path android:name="hpath1"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M0 0 l 200 0"
            />
​
        <path android:name="hpath2"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M0 200 l 200 0"
            />
​
        <path android:name="vpath1"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M0 0 l 0 200"
            />
​
        <path android:name="vpath2"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M200 0 l 0 200"
            />
        <path android:name="path1"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M100 100 l-100 -100 "/>
​
        <path android:name="path2"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M100 100 l-100,100"
            />
​
        <path android:name="path3"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M100 100 l100,-100"
            />
​
        <path android:name="path4"
            android:strokeWidth="3"
            android:strokeColor="@color/black"
            android:pathData="M100 100 l100,100"
            />
    </group>
​
​
</vector>

3.2 在res/animator 下创建loading_animator.xml文件

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="2000"
    android:propertyName="trimPathStart"
    android:repeatCount="infinite"
    android:repeatMode="reverse"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"
    >
​
</objectAnimator>

3.3 在res/drawable下创建loading_animated_vector.xml文件

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/loading_svg">
    <target
        android:name="path1"
        android:animation="@animator/loading_animator" />
​
    <target
        android:name="path2"
        android:animation="@animator/loading_animator" />
​
    <target
        android:name="path3"
        android:animation="@animator/loading_animator" />
​
    <target
        android:name="path4"
        android:animation="@animator/loading_animator" />
    
</animated-vector>

3.4 使用动画效果如下