SVG矢量动画

前言

Android5.X之前，使用SVG基本是通过引入第三方库实现，Android5.X之后，Android中增加了对<path>标签的支持。

SVG编辑器

SVG矢量动画优点

任意缩放，且不易失真。
文件小，下载快。
使用xml语言来绘制图形。
相较于png、jpeg具有更高清的显示效果。
万维网联盟标准。

< path >标签说明

指令中大小写可切换，大写表示相对定位，小写表示绝对定位，绘制起点为（0,0），X轴水平向左，Y轴水平向下。同一个指令可出现多次，可无视空格。

M = moveto(M X,Y)：将画笔移动到指定的坐标位置，但未发生绘制。
L = lineto(L X,Y)：画直线到指定的位置。
H = horizontal lineto( H X)：画水平线到指定的X坐标位置。
V = vertical lineto(V Y )：画垂直线到指定的Y坐标。
C = curveto(C ,X1,Y1,X2,Y2,ENDX,ENDY)：三次贝塞尔曲线。
S = smooth curveto(S X2,Y2,ENDX,ENDY)：三次贝塞尔曲线。
Q = quadratic Belzier curve(Q X Y,ENDX,ENDY)：二次贝塞尔曲线。
T = smooth quadratic Belzier curvrto(T,ENDX,ENDY)：映射前面路径的重点。
A = elliptical Are(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线。
Z = closepath()：关闭路径。

SVG 在 Android 中最为常见的指令为：

“ L ”表示绘制直线，代表从当前点绘制直线到给定点。

“ M ”代表画笔移动到某一点，但并不发生绘图动作。

“ A ”指令是用来绘制一条弧线，且允许弧线不闭合，共有七个指令：

RX，RY指绘制的椭圆的半轴大小。

XROTATION 指椭圆的X轴和水平方向顺时针方向的夹角。

FLAG1 有两个值，1表示大角度弧度，0为小角度弧度。

FLAG2 有两个值，起点到终点的方向，1顺时针，0逆时针。

X，Y为终点坐标。

< Vector >标签说明

vector：用于定义整个画布。
width：画布的宽度。
height：画布的高度。
viewportWidth：将具体的宽度划分成相对的单位单元。
viewportHeight：将具体的高度划分成相对的单元单位。
path：用于画出具体的图案。
graoup：组，内部可包含path。
name：声明一个标记用于动画的时候可以找到该节点。
pathData：矢量图SVG 的描述。
strokeWidth：画笔的宽度。
strokeColor：画笔的颜色。
strokeAlpha：透明度。
strokeLineCap：画出线条的结束点的形状。正方向或圆角矩形。

1、SVG动画实例

在drawable目录下新建trick.xml。

<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="@android:color/holo_green_dark"
            android:strokeLineCap="round"
            android:strokeWidth="5" />

        <path
            android:name="path2"
            android:pathData="
            M 20,20
            L 50,20 80,20"
            android:strokeColor="@android:color/holo_green_dark"
            android:strokeLineCap="round"
            android:strokeWidth="5" />
    </group>
</vector>

在animator目录下新建anim_path1.xm。

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    android:interpolator="@android:anim/bounce_interpolator"
    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" />

在animator目录下新建anim_path2.xm。

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="5000"
    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" />

在drawable目录下新建anim_vector.xml

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

使用如下：

ImageView image = (ImageView) findViewById(R.id.imageview );
Drawable drawable = image.getDrawable();
if (drawable instanceof Animatable) {
    ((Animatable) drawable).start();
}

前言

SVG矢量动画优点

< path >标签说明

SVG 在 Android 中最为常见的指令为：

< Vector >标签说明

1、SVG动画实例

2、SVG动画实例

猜你喜欢