加载SVG动画

收集参考备录，方便自己查阅，仅供学习参考
SVG基础

动画示例

android SVG动画

文件准备

1.在res/drawable 文件夹下编写svg文件：

toutiao_svg.xml

<?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="200"

    android:viewportWidth="200">

    <path

        android:name="tt_1"

        android:fillColor="#C2BFBF"

        android:pathData="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:name="tt_2"

        android:pathData="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:name="tt_3"

        android:pathData="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

    <path

        android:pathData="

            M0,0

            L200,0

            M200,0

            L200,200

            M200,200

            L0,200

            M0,200

            L0,0"

        android:strokeColor="#C2BFBF"

        android:strokeLineCap="round"

        android:strokeWidth="6"/>

</vector>

2.对path：tt_1,tt_2,tt_3 设置变换路径动画：

tt_path_one.xml:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially"> //依次执行 pathData 位置变换

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"

        android:valueTo="

            M100,30

            L180,30

            M180,30

            L180,90

            M180,90

            L100,90

            M100,90

            L100,30" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M100,30

            L180,30

            M180,30

            L180,90

            M180,90

            L100,90

            M100,90

            L100,30"

        android:valueTo="

            M100,120

            L180,120

            M180,120

            L180,180

            M180,180

            L100,180

            M100,180

            L100,120"/>

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M100,120

            L180,120

            M180,120

            L180,180

            M180,180

            L100,180

            M100,180

            L100,120"

        android:valueTo="

            M20,120

            L100,120

            M100,120

            L100,180

            M100,180

            L20,180

            M20,180

            L20,120" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L100,120

            M100,120

            L100,180

            M100,180

            L20,180

            M20,180

            L20,120"

        android:valueTo="

            M20,30

            L100,30

            M100,30

            L100,90

            M100,90

            L20,90

            M20,90

            L20,30"/>

</set>

tt_path_two.xml:

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:valueTo="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:valueTo="

            M20,120

            L80,120

            M20,150

            L80,150

            M20,180

            L80,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L80,120

            M20,150

            L80,150

            M20,180

            L80,180"

        android:valueTo="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueFrom="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90"

        android:valueTo="

            M120,30

            L180,30

            M120,60

            L180,60

            M120,90

            L180,90"

        android:valueType="pathType" />

</set>

tt_path_three：

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180"

        android:valueTo="

            M20,30

            L80,30

            M20,60

            L80,60

            M20,90

            L80,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L80,30

            M20,60

            L80,60

            M20,90

            L80,90"

        android:valueTo="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M20,30

            L180,30

            M20,60

            L180,60

            M20,90

            L180,90"

        android:valueTo="

            M120,120

            L180,120

            M120,150

            L180,150

            M120,180

            L180,180" />

    <objectAnimator

        android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="pathData"

        android:valueType="pathType"

        android:valueFrom="

            M120,120

            L180,120

            M120,150

            L180,150

            M120,180

            L180,180"

        android:valueTo="

          M20,120

            L180,120

            M20,150

            L180,150

            M20,180

            L180,180" />

</set>

3.关联动画：

toutiao_anim.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/toutiao_svg"

    tools:targetApi="lollipop">

    //路径tt_1的动画

    <target

        android:animation="@animator/tt_path_one"

        android:name="tt_1"/>



    //路径tt_2的动画

    <target

        android:animation="@animator/tt_path_two"

        android:name="tt_2"/>



    //路径tt_3的动画

    <target

        android:animation="@animator/tt_path_three"

        android:name="tt_3"/>

</animated-vector>

代码执行动画：

val animatedVectorDrawable = AnimatedVectorDrawableCompat.create(this, R.drawable.toutiao_anim)

        svg_iv.setImageDrawable(animatedVectorDrawable)

        val animatable = svg_iv.drawable as Animatable

        animatable.start()

或者

在布局文件设置：

android:src="@drawable/toutiao_anim"

在代码中：

val animatable = svg_iv.drawable as AnimatedVectorDrawable

or

val animatable = svg_iv.drawable as Animatable

    animatable.start()

多属性组合改变

tt_path_color.xml： 改变颜色

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android"

    android:ordering="sequentially">

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#C2BFBF"

        android:valueTo="#C2BF"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#C2BF"

        android:valueTo="#FF00"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#F00"

        android:valueTo="#0F0"/>

    <objectAnimator android:duration="600"

        android:interpolator="@android:interpolator/decelerate_cubic"

        android:propertyName="strokeColor"

        android:valueType="colorType"

        android:valueFrom="#0F0"

        android:valueTo="#00F"/>

</set>

在toutiao_anim.xml中直接和上述动画关联一样即可

<target

        android:animation="@animator/tt_path_one"

        android:name="tt_1"/>

<target

        android:animation="@animator/tt_path_color"

        android:name="tt_1"/>

这样在改变路径的同时也改变线框的颜色