SVG，Vector（二）

SVG，Vector（二）

---

动画效果

第一步：布局文件引用一个图片

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.athp.svgdemo.MyDemo">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/iv"/>

</android.support.constraint.ConstraintLayout>

第二步：@drawable/iv这个资源文件

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                 android:drawable="@drawable/path_tick" >
    <target
        android:name="tickCrossGroup"
        android:animation="@animator/anim_path_tick2cross" />
</animated-vector>

android:drawable=”…”：一个静态的vector图片资源
android:animation=”…”：你想要到动画效果
android:name=”…”:与vector图片中的android:name=“”保持一致

第三步：android:drawable=”@drawable/path_tick”这张图片

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="120dp"
        android:width="120dp"
        android:viewportWidth="24"
        android:viewportHeight="24">
    <group>
        <path
            android:name="tickCrossGroup"
            android:pathData="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6"
            android:strokeColor="#000"
            android:strokeWidth="2"/>
    </group>
</vector>

第四步： android:animation=”@animator/anim_path_tick2cross” 动画效果

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M19.6,7 L10.4,16.2 M4.8,13.4 L9,17.6"
        android:valueTo="M17.6,6.4 L6.4,17.6 M6.4,6.4 L17.6,17.6"
        android:valueType="pathType"/>
</set>

首先我们要明白这是一个属性动画，
android:propertyName=”pathData”拿到图片的pathData这个属性
android:valueType=”pathType”顾名思义 类型是pathType
代码下载