效果視頻

目錄結構

SVG常用指令

L ：為從當前點繪制到直線給定的點，后面跟著的為x,y坐標

M ：為將畫筆移動到某一點，但只是移影片筆，并沒有繪制程序，所有沒有產生繪制動作

A ：為繪制一段弧線，允許弧線不閉合

初始化狀態

效果圖

制作靜態SVG圖型

首先在drawablw目錄中建立一個svg_pic.xml檔案夾

分別給兩條直線名為Path1和Path2

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100">

    <group>
        <path
            android:name="path1"
            android:pathData="
            M 20,80
            L 50,80 80,80"
            android:strokeColor="#cc0099"
            android:strokeLineCap="round"
            android:strokeWidth="5"/>

        <path
            android:name="path2"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="#cc0099"
            android:strokeLineCap="round"
            android:strokeWidth="5"/>
    </group>

</vector>

影片變換

在res目錄下建立一個anim檔案，在anim檔案建立兩個影片變化檔案，分別為cross_anim1.xml和cross_anim2.xml
其中的valueFrom與valueTo屬性分別對應了變換的起始坐標

cross_anim1.xml

<?xml version="1.0" encoding="utf-8"?>
<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="500"
        android:propertyName="pathData"
        android:valueFrom="M 20,80 L 50,80 80,80"
        android:valueTo="M 20,80 L 50,50 80,80"
        android:valueType="pathType"
        android:interpolator="@android:anim/bounce_interpolator">
    </objectAnimator>
</set>

cross_anim2.xml

<set
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially">
    <objectAnimator
        android:duration="500"
        android:interpolator="@android:anim/bounce_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"/>
</set>

影片黏合

最好通過animated-vector進行粘合，在drawable目錄下創建link_anim.xml檔案
drawable系結svg靜態圖型的初始狀態
target將兩條直線的樣式與變換進行系結

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_pic">
    <target android:name="path1" android:animation="@anim/cross_anim1"/>
    <target android:name="path2" android:animation="@anim/cross_anim2"/>
</animated-vector>

參考

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/link_anim"
        android:onClick="anim"/>
</LinearLayout>

 public void anim(View view) {
        ImageView imageView = (ImageView)view;
        Drawable drawable = imageView.getDrawable();
        if (drawable instanceof Animatable){
            ((Animatable)drawable).start();
        }
    }

解決低版本例外問題

在build.gradle檔案的defaultConfig中添加如下陳述句

 vectorDrawables.useSupportLibrary = true