1. 程式人生 > >Android SVG、Vector和VectorDrawable向量圖及動畫

Android SVG、Vector和VectorDrawable向量圖及動畫

Vector影象,第三方Sharp庫,阿里巴巴的SVG圖。
阿里巴巴向量相簿(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

-- 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"
  }
}