安卓 SVG 矢量动画详解

我们都知道 SVG动画是在 Android 5.0之后提供的可伸缩矢量图形。在讲如何如何在 Android 5.x 中使用 SVG 之前，我们先了解一下 SVG 中的 <path> 便签。

• <path> 标签所支持的指令
  • M = moveto(X,Y) ：将画笔移动到指定的坐标位置，但未发生绘制
  • L = lineto(X,Y) ：画直线到指定的坐标位置
  • H = horizontal lineto(X):画水平线到指定的X坐标位置
  • V = verticak lineto(Y):画垂直线到指定的Y坐标位置
  • C = curveto(X1,Y1,X2,Y2,ENDX,ENDY):三次贝塞尔曲线
  • S = smooth curveto(X2,Y2,ENDX,ENDY):三次贝塞尔曲线
  • Q = quadratic belzier curve(X,Y,ENDX,ENDY):二次贝塞尔曲线
  • T = smooth quadratic belzier curveto(ENDX,ENDY):映射前面路径后的终点
  • A = elliptical Arc(RX,RY,XROTATION,FLAG1,FLAG2,X,Y) : 弧线
  • Z = closepath():关闭路径
    在使用上面指令时，需要注意：

坐标轴以（0，0）为中心，�X轴水平向右，Y轴水平垂直向下
所有指令大小写不同。大写绝对定位，参照全局坐标系；小写相对定位，参考父容器坐标系。
指令和数据间的空格可以省略。
同一指令出现多次可以只用一个。
SVG 的指令使用固定而且复杂，为了方便，我们可以通过网上的在线生成SVG 编辑器就可以完成上述的SVG 代码。 在线编辑SVG链接地址

• Android 中使用 SVG 的方法
  • VectDrawable
  • AnimatedVectorDrawable

vector.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">

    <group
        android:name="test"
        android:rotation="0">
        <path
            android:fillColor="#000505"
            android:pathData="M -1 -1 H 201 V 201 H -1 V -1 Z" />
        <path
            android:fillColor="#fc072c"
            android:pathData="M71.14751,161.07251l0,-75.00001l68,75.00001l-68,0z"
            android:strokeWidth="1.5" />
    </group>
    
</vector>

image.png

avd.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/vector"
    tools:targetApi="lollipop">
    <target
        android:name="test"
        android:animation="@animator/rotation" />
</animated-vector>

rotation.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

在布局文件中给需要显示的控件设置背景

  <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/avd" />

需要显示动画的时候，代码调用

 ImageView image = findViewById(R.id.image);
 ((Animatable)image.getDrawable()).start();