9.SVG动画

SVG：

资料1
资料2

用法：

• VectorDrawable： 创建基于XML的SVG图形
• AnimatedVectorDrawable："胶水"，实现动画
• 语法什么的看资料。

创建vector SVG文件：

• 通过下面xml文件，根据语法画： VectorDrawable
• 网站SVG图片源码／Studio--> new--> vector Asset／ps，AI将图片转换成SVG

//res/drawable目录
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">
    <group>
        <!-- 如果指定属性为 pathData，
             则要添加一个属性 android:strokeLineCap="pathType",来告诉系统进行pathData变换-->

        <path
            android:name="path1"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        <path
            android:name="path2"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
        //中间的线，自己加上去的。    
        <path
            android:name="path3"
            android:pathData="
            M 20,50
            L 45,50 M 55,50  80,50"
            android:strokeColor="#000"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

创建animator：

// res/animtor目录
<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="pathData"
    android:valueFrom="M 20,20 L 50,20 80,20"
    android:valueTo="M 20,20 L 50,50 80,20"
    android:valueType="pathType"/>

创建 animated-vector文件：

• "胶水" 把 VectorDrawable 和 objectAnimator 连起来。

//  res/drawable目录
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    //引入vector
    android:drawable="@drawable/svg_lines">
    <target
        //此处的name必须和vector中的name一致，才能知道动画要作用到哪个path
        android:name="path1"
        //动画
        android:animation="@animator/obj_svg_path_1">
    </target>
    <target
        android:name="path2"
        android:animation="@animator/obj_svg_path_2">
    </target>
</animated-vector>

开始动画：

// xml中设置backgroud，代码中用getBackground();
// xml中设置src属性，代码中用getDrawable();
// Animatable animDrawable = (Animatable)ivSvgTarget.getBackground();
Animatable animDrawable = (Animatable) ivSvgTarget.getDrawable();
if (!animDrawable.isRunning()) {
    animDrawable.start();
    }