Android SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 使用 XML 格式定义图像。

*如何引用SVG

---

1. 先创建一个SVG资源，这里我们用AS自带的一些资源。

   
   
   

   image.png

2. 这里我们选择一个简单的图形，命名为triangle

   
   
   

   image.png

3. 在drawable目录下会生成triangle.xml文件。

4. 在layout文件中引入

image.png

---

*静态VectorDrawable在XML中的定义

---

VectorDrawable 官方介绍

官方给的例子

 //视图的宽度，下面的pathData中的内容便会在600宽高的画布内操作
     //旋转角度，顺时针
         //路径的数据
     
 

效果：

image.png

我们来解析一下数据：M300,70 l 0,-70 70,70 0,0 -70,70z

先来了解一下相关的指令：
M = moveto 相当于 android Path 里的moveTo(),用于移动起始点
L = lineto 相当于 android Path 里的lineTo()，用于画线
H = horizontal lineto 用于画水平线
V = vertical lineto 用于画竖直线
C = curveto 相当于cubicTo(),三次贝塞尔曲线
S = smooth curveto 同样三次贝塞尔曲线，更平滑
Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线
T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑
A = elliptical Arc 相当于arcTo()，用于画弧
Z = closepath 相当于closeTo(),关闭path

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

(1). M指令
(2). l 指令（小写的L） (l 0, -70 70,70 0,0 -70,70z 相当于 l 0,-70 l 70,70 l 0,0 l -70,70z)
(3). z指令

1. M300, 70 : 坐标移动到(300, 70)这个点上

   
   
   

   image.png

2. l 0,-70

   
   
   

   image.png

3. l 70,70

   
   
   

   image.png

4. l 0, 0 (没有移动，如果动画的propertyXName="pathType"时这步操作起占位作用)

5. l -70,70

   
   
   

   image.png

6.z 闭合

image.png

7.设置填充颜色

image.png

8 以中心点顺时针旋转45度

image.png

9.完成
需要说明,同一形状实现的方式很多，以上例子只是官方给的例子，在这只做分析，不论是否合理。
以下方式实现效果一样，自己脑补吧。

ps:文章一开始从系统引入的svg实现步骤如下图。

svg.gif

---

*动态AnimatedVectorDrawable

---

我们来看看怎么让SVG动起来， 还以上面三角形为例，先看效果

svg.gif

以上GIF展示了简单的旋转，伸缩，平移，透明度的动画。代码如下：
Activity布局文件：

R.drawable.animate_vector：

R.drawable.triangle:

  ImageView mImageView = (ImageView) findViewById(R.id.imageView);
  Drawable background = mImageView.getDrawable();
  if(background instanceof Animatable){
      ((Animatable) background).start();//启动动画
  }
  //添加事件监听
  AnimatedVectorDrawableCompat drawable= (AnimatedVectorDrawableCompat) background;
  drawable.registerAnimationCallback(new Animatable2Compat.AnimationCallback() {
    @Override
    public void onAnimationStart(Drawable drawable) {
        super.onAnimationStart(drawable);
        Toast.makeText(MainActivity.this, "start", Toast.LENGTH_SHORT).show();
    }
    @Override
    public void onAnimationEnd(Drawable drawable) {
        super.onAnimationEnd(drawable);
        Toast.makeText(MainActivity.this, "end", Toast.LENGTH_SHORT).show();
        compat.unregisterAnimationCallback(this);
    }
  });           

---

*高级动画(trimPath)

---

1. trimPathStart

android:trimPathStart="0.1"
从path的0%开始去除掉0%位置到10%位置的path

2.trimPathOffset

android:trimPathStart="0.1"
android:trimPathOffset="0.5"
把path的原点移动到50%的位置,再以此为原点去除掉0%位置到10%位置的path

3. trimPathEnd

android:trimPathEnd="0.9"
android:trimPathOffset="0.5"
把path的原点移动到50%的位置,再以此为原点去除掉90%位置到100%位置的path

SearchBar 拿个人觉得比较实用的网上一例子，个人修改了一下，看着更符合实际情况：

searchbar.gif

首先准备VectorDrawable,两个Path：一个放大镜，一条线（通过trimPathStart="1"隐藏）
searchbar.xml

布局文件

接下来动态处理动画

        //获得相应的AnimatedVectorDrawableCompat
        AnimatedVectorDrawableCompat unfocus = AnimatedVectorDrawableCompat.create(this, R.drawable.searchbar_unfocus);
        AnimatedVectorDrawableCompat focus = AnimatedVectorDrawableCompat.create(this, R.drawable.searchbar_focus);

        private static final int UNFOCUS = 300;
        private static final int FOCUS = 948;
        int state = UNFOCUS;//默认状态为unfocus

        public void startAnim(View view) {
                if (view instanceof AppCompatImageView) {
                    if (state == UNFOCUS) {
                        state = FOCUS;
                        focus((AppCompatImageView) view);
                    } else if (state == FOCUS) {
                        state = UNFOCUS;
                        unfocus((AppCompatImageView) view);
                    }
                }
        }

        private void unfocus(AppCompatImageView view) {
            view.setImageDrawable(unfocus);
            unfocus.start();
        }

        private void focus(ImageView view) {
            view.setImageDrawable(focus);
            focus.start();
        }

searchbar_focus.xml

searchbar_unfocus.xml(searchbar_focus.xml的逆操作)

anim_searchbar_0_1.xml

anim_searchbar_1_0.xml (放大镜与底线的trimPathStart是此消彼长的关系)

5.0之后系统ProgressBar

progress.gif

progress_medium_material.xml

vector_drawable_progress_bar_medium.xml

//根据当前主题的colorControlActivated所设置的颜色来着色
   
    
        
    

效果图

progress_indeterminate_material.xml

    //以下两个动画都是从valueFrom:0到valueTo：0.75，但由于指定了不同的Interpolator
    //最后显示的结果progressbar时长时短。
    
    

    

progress_indeterminate_rotation_material.xml

网上效果不错的例子：
模拟三球仪

earth.gif

---

兼容性问题

---

Vector图像刚发布的时候，是只支持Android 5.0+的设备
不过自从AppCompat 23.2之后，我们只需要引入com.android.support:appcompat-v7:23.2.0以上的版本 的兼容包，Vector可以使用于Android 2.1以上的所有系统。

经测试静态VectorDrawable在5.0前后运行都正常，只不过5.0之前的版本图片有点模糊

compileSdkVersion 24
buildToolsVersion "25.0.2"
compile 'com.android.support:appcompat-v7:25.3.1'
未使用 vectorDrawables.useSupportLibrary = true
未使用
static {
    AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
}

动态AnimatedVectorDrawable

5.0后正常

5.0前异常
XmlPullParserException: Binary XML file line #2: invalid drawable tag animated-vector
android.content.res.Resources$NotFoundException: File res/drawable/animatevector.xml from drawable resource ID #0x7f020053

解决方法：
    compile 'com.android.support:appcompat-v7:XXX'
    defaultConfig {
      vectorDrawables.useSupportLibrary = true
    }
    android:src=""改为app:srcCompat=""
    下面代码用不用都可以
    static {
        AppCompatDelegate.setCompatVectorFromResourcesEnabled(true);
    }

Activity需要继承AppCompatActivity: ImageView变为AppCompatImageView(support-v7), AnimatedVectorDrawable变为AnimatedVectorDrawableCompat(animated-vector-drawable)， VectorDrawable变为VectorDrawableCompat(support-vector-drawable)

---

*相关资源

---

Android SVG to VectorDrawable
Online SVG Editor
IconFont
VectAlign 比较牛
在线SVG动画编辑

shapeshifter.gif

---

*参考

---

AnimatedVectorDrawable的一些碎碎念 兼容性
Android Vector曲折的兼容之路
android中的SVG图像的各个属性意义
【Android 进阶】SVG 的使用以及绘制动画
github AnimatedSvgView
AnimatedVectorDrawable实现可爱的图钉跳跃动画
github vector-compat