android SVG动画

介绍:
SVG是什么?(可伸缩矢量图形:Scalable Vector Graphics)
1,定义用于网络的基于矢量的图形
2,使用XML格式定义图形
3,万维网联盟的标准
4,与诸如DOM和XSL之类的W3C标准是一个整体
5,图像在放大或改变尺寸的情况下其图形质量不会有所损失.

SVG可以实现什么东西呢,就像很多应用的的菜单按钮点击的时候,3条横线点击会变成一个箭头的样子就是SVG来实现的.

SVG在Web上的应用非常广泛，在Android 5.X之前的Android版本上，大家可以通过一些第三方开源库来在Android中使用SVG。而在Android 5.X之后，Android中添加了对SVG的<path>标签支持。从而让开发者可以使用SVG来创建更加丰富的动画效果。
由于SVG是用xml格式来定义的.所以要先了解下有什么标签格式:

 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 curveto(T ENDX,ENDY)：映射前面路径后的终点
 A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
 Z = closepath()：关闭路径

有几点要注意：
坐标轴为以(0,0)为中心，X轴水平向右，Y轴水平向下。
所有指令大小写均可。大写绝对定位，参照全局坐标系；小写相对定位，参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

Google在Android 5.X中提供了两个新API来帮助支持SVG: VectorDrawable 和AnimatedVectorDrawable
其中，VectorDrawable让你可以创建基于XML的SVG图形，并结合AnimatedVectorDrawable来实现动画效果。

提供一个在线的SVG图形生成网站 http://editor.method.ac/ .

那么如何绘制SVG图形呢;我们可以在drawable目录右键点击NEW->Vector Asset

1.png

本地文件的话可以让设计将图转化成SVG格式给你.

选择一个图片生成出来的xml就是这样子的.

  <vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FF000000"
    android:pathData="M12,7.77L18.39,18H5.61L12,7.77M12,4L2,20h20L12,4z"/>
 </vector>

2.png

viewportHeight，viewportWidth表示SVG图形划分比例。后面在绘制path时所使用的参数，就是根据这两个值来进行转换，比如上面的代码，将24dp划分为24份，如果在绘制图形时使用坐标(12,12)，则意味着该坐标位于该SVG图形正中间。所以，如果width，height的比例与viewportHeight，viewportWidth的比例不一致，就会使图形发生压缩，形变。

pathData 就是绘制SVG图形所用到的指令。
fillColor 这个属性表明绘制出来的是一个填充的图形，我在这个属性里设了一个白色，如果想要绘制一个非填充的图形，可以使用 strokeColor 。
然后在布局就可以直接引用drawable了.

 <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/ic_change_history_black_24dp"
      />

AnimatedVectorDrawable 的作用是给 VectorDrawable 提供动画效果。在XML文件中通过<animated-vector>标签来声明对 AnimatedVectorDrawable 的使用，并指定其作用的<path>或<group>。

举个例子，旋转动画:
我们先在drawable目录下创建一个静态的 VectorDrawable ,取名为test_vector.xml

   <?xml version="1.0" encoding="utf-8"?>
     <vector xmlns:android="http://schemas.android.com/apk/res/android"
         android:height="200dp"
         android:width="200dp"
         android:viewportHeight="100"
       android:viewportWidth="100"
     >
     <group android:name="test"
          android:rotation="0">

       <path android:strokeColor="#ff0000"
             android:strokeWidth="2"
             android:pathData="M 25 50 a 25,25 0 1, 0 50,0"/>
      </group>
  </vector>

在preview里面是这样子：

3.png

然后在res目录下新建animator目录新建一个objectAnimator文件,名为anim_path1.xml,

    <?xml version="1.0" encoding="utf-8"?>
     <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
         android:duration="4000"
         android:propertyName="rotation"
         android:valueFrom="0"
         android:valueTo="360"
      >
 </objectAnimator>

最后写一个 animated-vector ,把 VectorDrawable 和 objectAnimator 连起来,在drawable中新建一个名为ic_animated_test.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/test_vector"
         tools:targetApi="lollipop">

      <target
          android:name="test"
          android:animation="@animator/anim_path1"
       />
   </animated-vector>

这样整个动画就写完了，接下来在布局文件中引用 VectorDrawable

    <ImageView
       android:id="@+id/vector_animator_img"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:src="@drawable/ic_animated_test"
      />

然后在activity中通过((Animatable)imageview.getDrawable()).start(); 就可以启动动画了.

4.gif