Android SVG矢量图、Vector和VectorDrawable矢量图及动画,减少App Size

SVG、Vector和VectorDrawable矢量图,减少App Size。SVG,Vector,Sharp。

Vector图像,第三方Sharp库,阿里巴巴的SVG图。

- Vector; SVG 全称 Scalable Vector Graphics ,翻译一下即为 可缩放的矢量图形。
-- 阿里巴巴矢量图库- http://www.iconfont.cn/
Android矢量图(一)--VectorDrawable基础- https://www.jianshu.com/p/0972a0d290e9
android下一些绘制、动画、矢量图学习- https://github.com/gjnm/AndroidDraw
VectorDemo- https://github.com/xuyisheng/VectorDemo
android中利用矢量图VectorDrawable打造酷炫动画- https://blog.csdn.net/gjnm820/article/details/78590313
W3C SVG- http://www.w3.org/TR/SVG/paths.html
Android Vector曲折的兼容之路- https://blog.csdn.net/eclipsexys/article/details/51838119
android vector矢量图- https://blog.csdn.net/qq_30889373/article/details/74283367

--  阿里的iconfont,海量在线矢量图- https://www.iconfont.cn/
 可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是一种基于可扩展标记语言(XML),用于描述二维矢量图形的图形格式。SVG由W3C制定,是一个开放标准。
- .svg格式相对于.jpg、.png甚至.webp具有较多优势,我认为核心有两点:
 1.省时间。图像与分辨率无关,收放自如,适配安卓机坑爹的分辨率真是一劳永逸;
 2.省空间。体积小,一般复杂图像也能在数KB搞定,图标更不在话下。

  VectorDrawable是Google从Android 5.0开始引入的一个新的Drawable子类,能够加载矢量图。到现在通过support-library已经至少能适配到Android 4.0了(通过AppBrain统计的Android版本分布来看,Android 4.1以下(api<15)几乎可以不考虑了)。Android中的VectorDrawable只支持SVG的部分属性,相当于阉割版。
Android使用矢量图(SVG, VectorDrawable)实践篇- https://www.jianshu.com/p/0555b8c1d26a

矢量图适配,灵活的尺寸设置以及着色等功能的TextView- https://github.com/woxingxiao/VectorCompatTextView

--  Android5.0 的时候,Google已经提供对vector矢量图的支持。Android 5.x 之后提供了对 SVG 的支持,通过
VectorDrawable、AnimatedVectorDrawable 的结合可以实现一些稍微复杂的动画,但是问题和前2个类似。
  解决问题的同时,又带来了新坑,暂总结如下:

 1.在Android4.x中,是无法解析vector的路径变换动画

 2.在Android4.x中,只能使用系统自带的插值器,不能自定义

 3.制作动态vector动画,并不容易。制作静态vector路径,再实现动态vector的路径变化值,很繁琐的一个过程。

- Airbnb 动画库Lottie与矢量图
Render After Effects animations natively on Android and iOS, Web, and React Native-
https://github.com/airbnb/lottie-android

-- SVG和Vector的区别:
SVG,即Scalable Vector Graphics 矢量图,这种图像格式在前端中已经使用的非常广泛了。
Vector,在Android中指的是Vector Drawable,也就是Android中的矢量图,
SVG:通常在前端中使用,是一套语法规范,GPU根据该规范绘制图片。SVG中会有很多标签用于绘制图片,如:rest、circle、polyline、line、path等。

Vector:通常在Android中使用,只实现了SVG语法中的path标签,可以视为简单化的矢量图。

SVG在加载过程中,效率比较低,而android的Vector只采用了SVG的path标签,如此设计就是为了提高SVG加载的效率
 同样一张图片,PNG格式的5.6K,而SVG的2.6K,经过压缩后的Vector格式的图片只有1.5K,这是实用Vector图片的第二个好处,除了支持随意放大缩小之外,还极大减小占用体积。
  利用Android Studio的Vector Asset,可以非常方便的创建Vector图像,甚至可以直接通过本地的SVG图像来生成Vector图像。
Vector中利用不同字母来代表不同含义,实现图片的绘制,下面我们简单看一下这三个指令:

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():关闭路径

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportHeight="500.0"
        android:viewportWidth="500.0">
        <path
            android:fillColor="#FF000000"
            android:pathData="M100,100 L400,100 L100,400 Z" />
    </vector>

  简单图形手写pathData还行,可是比较复杂的图形怎么办呢,当然有绘制工具了,这里介绍一个SVG Editor:http://editor.method.ac/,我们可以在这行面绘制复杂的数量图形,然后导出SVG格式的图像,而android中无法直接使用SVG格式的图,所以我们可以通过http://inloop.github.io/svg2android/来进行SVG到Vector的转化,是不是很方便呢。。
  VectorDrawable是在android L中提出来的,也就是说VectorDrawable只兼容minSDK>=21的版本,这个限制是非常大的,我们知道,目前市面上的Android版本比较混乱,各种版本的android手机都存在,这就导致VectorDrawable系统兼容性非常差。
   VectorDrawable可以为我们的应用带来很多好处,Google也非常重视VectorDrawable的发展,后来在Gradle Plugin1.5中,Google为VectorDrawable做了兼容,主要实现是这样的:
     
当手机设备系统版本>=21 —> 实用Vector;  
当手机设备系统版本<21  —>将Vector转化为PNG格式显示,而这一步转化是在编译时自动完成的;
  而VectorDrawable真正的春天要等到AppCompat23.2的到来,Google在AppCompat23.2中增加了VectorDrawable全版本兼容,它使得静态的VectorDrawable可以支持到android2.1+,而动态的VectorDrawable可以支持到android3.0+的设备,这两个版本几乎已经包含了市面上90%+的android手机设备。
<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/ic_face_black_24dp”/>

1,SVG何以可以任意缩放而不会失真,drawable-(m|h|xh|xxh|xxxh)dpi和mipmap-(m|h|xh|xxh|xxxh)dpi这俩货就可以省省了;2,SVG文件一般都比较小,省去很去资源达到apk缩包的目的;3,SVG占用内存非常小,性能高。但是SVG明显的缺点是没有位图表达的色彩丰富。

增加对Vector兼容性的支持,使用Gradle Plugin 2.0以上:
android {
    defaultConfig {
        vectorDrawables.useSupportLibrary = true
    }
}
增加对Vector兼容性的支持,使用Gradle Plugin 2.0以下,Gradle Plugin 1.5以上:
android {
  defaultConfig {
    // Stops the Gradle plugin’s automatic rasterization of vectors
    generatedDensities = []
  }
  // Flag to tell aapt to keep the attribute ids around
  aaptOptions {
    additionalParameters "--no-version-vectors"
  }
}

> vector矢量图

Android使用矢量图(SVG, VectorDrawable)实践篇- https://www.jianshu.com/p/0555b8c1d26a
矢量图- https://www.iconfont.cn/search/index?q=%E4%B8%89%E8%A7%92%E5%BD%A2
Android vector pathData命令介绍- https://blog.csdn.net/n4167/article/details/79184286

Android Vector曲折的兼容之路- https://blog.csdn.net/u012702708/article/details/53081055
Vector Path指令解析如下所示,支持的指令:
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():关闭路径

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100.0"
    android:viewportWidth="100.0">
    <path
        android:pathData=""
        android:strokeColor="#0077e6"
        android:strokeWidth="0.3" />
</vector>

没有更多推荐了,返回首页