Android SVG

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

*如何引用SVG

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

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

image.png

在drawable目录下会生成triangle.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="M3,4l9,16 9,-16L3,4zM6.38,6h11.25L12,16 6.38,6z"/>
</vector>

在layout文件中引入

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent">
    <View
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/triangle"
        />
</LinearLayout>

image.png

*静态VectorDrawable在XML中的定义

VectorDrawable 官方介绍

官方给的例子

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:name="triangle"//定义矢量图的名称
     android:height="64dp"//drawable的固定高度，支持所有的尺寸单位，一般使用dp
     android:width="64dp"//drawable的固定宽度，支持所有的尺寸单位，一般使用dp
     android:viewportHeight="600"//视图的高度，可以理解为画布的高度
     android:viewportWidth="600" >//视图的宽度，下面的pathData中的内容便会在600宽高的画布内操作
     <group //定义一个组，可以包含path 及子group, 同时可以定义转换信息，如旋转，伸缩，位移
         android:name="rotationGroup"//组名
         android:pivotX="300.0"//X坐标中心点，默认为0
         android:pivotY="300.0"//Y坐标中心点，默认为0
         android:rotation="45.0" >//旋转角度，顺时针
         <path
             android:name="v"//路径的名称
             android:fillColor="#000000"//填充颜色
             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />//路径的数据
     </group>
 </vector>

效果：

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指令

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

image.png

l 0,-70

image.png

l 70,70

image.png

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

l -70,70

image.png

6.z 闭合

image.png

7.设置填充颜色

        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />

image.png

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

    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0">
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>

image.png

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

    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0">
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,0 V140 l70,-70z" />
    </group>

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

svg.gif

*动态AnimatedVectorDrawable

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

svg.gif

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/animate_vector" />
</LinearLayout>

R.drawable.animate_vector：

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/triangle">
    <!--target：针对name的目标做动画 name在上面svg文件中定义-->
    <!--透明度动画作用在group及path上不起作用-->
    <target
        android:animation="@animator/alpha"
        android:name="triangle" />
    <target
        android:animation="@animator/scalex"
        android:name="group" />
    <target
        android:animation="@animator/scaley"
        android:name="group" />
    <target
        android:animation="@animator/rotate"
        android:name="group" />
    <target
        android:animation="@animator/translate"
        android:name="group" />
</animated-vector>

R.drawable.triangle:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:name="triangle"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <!--scale,translate, rotate动画的path需要添加到group标签中才有效果-->
    <!--scale,rotate动画的pivot 在group中设置-->
    <group
        android:name="group"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:pivotX="12"
        android:pivotY="12">
        <path
            android:name="path"
            android:strokeColor="@color/colorPrimary"
            android:strokeWidth="0.2"
            android:fillColor="#FF000000"
            android:pathData="M3,4l9,16 9,-16L3,4zM6.38,6h11.25L12,16 6.38,6z"/>
    </group>
</vector>

  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

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="150dp"
        android:height="24dp"
        android:viewportHeight="24"
        android:viewportWidth="150">
    <path
        android:name="search"
        android:pathData="M141,17 A9,9 0 1,1 142,16 L149,23"
        android:strokeAlpha="0.8"
        android:strokeColor="#000000"
        android:strokeLineCap="round"
        android:strokeWidth="2"/>
    <path
        android:name="bar"
        android:pathData="M0,23 L149,23"
        android:strokeAlpha="0.8"
        android:trimPathStart="1"
        android:strokeColor="#000000"
        android:strokeLineCap="square"
        android:strokeWidth="2"/>
</vector>

布局文件

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="startAnim"
        app:srcCompat="@drawable/searchbar"/>

接下来动态处理动画

        //获得相应的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

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/searchbar">

    <target
        android:name="search"
        android:animation="@animator/anim_searchbar_0_1"/>

    <target
        android:name="bar"
        android:animation="@animator/anim_searchbar_1_0"/>

</animated-vector>

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

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/searchbar">

    <target
        android:name="search"
        android:animation="@animator/anim_searchbar_1_0"/>

    <target
        android:name="bar"
        android:animation="@animator/anim_searchbar_0_1"/>

</animated-vector>

anim_searchbar_0_1.xml

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="trimPathStart"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType"/>

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

<objectAnimator
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:propertyName="trimPathStart"
    android:valueFrom="1"
    android:valueTo="0"
    android:valueType="floatType"/>

5.0之后系统ProgressBar

progress.gif

progress_medium_material.xml

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_drawable_progress_bar_medium" >

    <target
        android:name="progressBar"//progressBar的动画效果
        android:animation="@anim/progress_indeterminate_material" />

    <target
        android:name="root"//同时也在自旋转
        android:animation="@anim/progress_indeterminate_rotation_material" />

</animated-vector>

vector_drawable_progress_bar_medium.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="48dp"
        android:width="48dp"
        android:viewportHeight="48"
        android:viewportWidth="48"
        android:tint="?attr/colorControlActivated">//根据当前主题的colorControlActivated所设置的颜色来着色
   
    <group
        android:name="root"
        android:translateX="24.0" //将画布原点移动到中心位置
        android:translateY="24.0" >
        <path
            android:name="progressBar"
            android:fillColor="#00000000"
            //顺时针画两个半圆， 这里巧用了画布的平移。逻辑清晰，计算简单
            android:pathData="M0, 0 m 0, -18 a 18,18 0 1,1 0,36 a 18,18 0 1,1 0,-36"
            android:strokeColor="#ffffff"
            android:strokeLineCap="square"
            android:strokeLineJoin="miter"
            android:strokeWidth="4"
            android:trimPathEnd="0"//svg此时什么都不显示
            android:trimPathOffset="0"
            android:trimPathStart="0" />
    </group>
</vector>

效果图

progress_indeterminate_material.xml

<set xmlns:android="http://schemas.android.com/apk/res/android" >
    //以下两个动画都是从valueFrom:0到valueTo：0.75，但由于指定了不同的Interpolator
    //最后显示的结果progressbar时长时短。
    <objectAnimator
        android:duration="1333"
        android:interpolator="@interpolator/trim_start_interpolator"
        android:propertyName="trimPathStart"
        android:repeatCount="-1"
        android:valueFrom="0"
        android:valueTo="0.75"
        android:valueType="floatType" />
    <objectAnimator
        android:duration="1333"
        android:interpolator="@interpolator/trim_end_interpolator"
        android:propertyName="trimPathEnd"
        android:repeatCount="-1"
        android:valueFrom="0"
        android:valueTo="0.75"
        android:valueType="floatType" />

    <objectAnimator
        android:duration="1333"
        android:interpolator="@android:anim/linear_interpolator"
        android:propertyName="trimPathOffset"
        android:repeatCount="-1"
        android:valueFrom="0"
        android:valueTo="0.25"
        android:valueType="floatType" />

</set>

progress_indeterminate_rotation_material.xml

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="4444"
    android:interpolator="@android:anim/linear_interpolator"
    android:propertyName="rotation"
    android:repeatCount="-1"
    android:valueFrom="0"
    android:valueTo="720"
    android:valueType="floatType" />

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

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)

shapeshifter.gif

*参考

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

最后编辑于：2019.07.16 11:56:47

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,530评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 86,403评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,120评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,770评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,758评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,649评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,021评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,675评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,931评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,659评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,751评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,410评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,004评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,969评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,203评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,042评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,493评论 2赞 343

Android SVG

Android SVG

*如何引用SVG

*静态VectorDrawable在XML中的定义

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

*动态AnimatedVectorDrawable

*高级动画(trimPath)

1. trimPathStart

2.trimPathOffset

3. trimPathEnd

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

5.0之后系统ProgressBar

兼容性问题

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

动态AnimatedVectorDrawable

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

*相关资源

*参考

推荐阅读更多精彩内容