SVG --- VectorDrawable

SVG:Scalable Vector Graphics,可縮放的矢量圖形。

Vector只實現(xiàn)了SVG中的path標簽,為了提高解析效率。

Vector常用語法:

M:moveo(M X,Y):將畫筆移動到指定的坐標位置。

L:lineto(L X,Y):畫直線到指定位置。

Z:closepath():關(guān)閉路徑。

H:horizontal lineto(H,X):畫水平直線到制定x坐標。

V:vertical lineto(V,Y):畫垂直直線到制定y坐標。

SVG制作小工具:https://editor.method.ac/

如果不使用兼容器,SVG是無法在Android中直接使用的,so...轉(zhuǎn)換

1.SVG轉(zhuǎn)VectorDrawable小工具:http://inloop.github.io/svg2android/

2.AndroidStudio也提供轉(zhuǎn)換工具:Vector Asset,在Drawable目錄下右鍵菜單目錄中New目錄下有VectorAsset。

相比于.png圖片,VectorDrawable體積縮小很客觀。

android:viewportHeight="100"

android:viewportWidth="100"

是畫布寬高,定義Path路徑的時候就必須在這個畫布大小里去繪制,超出畫布范圍的則無法顯示。也可以說是將一個固定的矢量圖均分為100等分,pathData則以其為基線坐標,而不是以固定大小為坐標,當(dāng)vectorDrawable大小改變,只需用viewportHeight和viewportWidth做映射就可以,不需要改變pathData做改變。

VectorDrawable的「 兼容性 」

第一階段:Android5.0上提出VectorDrawable,兼容minSDK>=21。

第二階段:Gradle Plugin 1.5對minSDK<21版本兼容。對minSDK>=21的設(shè)備使用Vector;對minSDK<21的設(shè)備,會將Vector轉(zhuǎn)換為PNG格式(在編譯的時候自動完成),而且只能使用靜態(tài)的VectorDrawable,兼容成本大,效果不明顯。

第三階段:AppCompat23.2增加了對VectorDrawable的全版本兼容。靜態(tài)的VectorDrawable支持2.1以上的設(shè)備;動態(tài)的VectorDrawable支持3.0以上的設(shè)備。


動態(tài)VectorDrawable向下兼容:

1.pathMorphing:路徑變換動畫在Android-L以下版本是無法使用的。

2.pathInterpolation:路徑插值器,在Android-L以下版本是無法自定義的,只能使用系統(tǒng)提供的。

動態(tài)VectorDrawable向上兼容:

1.pathMorphing:路徑變換動畫在Android-L以上需要代碼配置。

環(huán)境配置:

使用VectorDrawable的一些配置
如果Gralde小于2.0

使用:

<ImageView????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????android:id="@+id/imageView"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????android:layout_width="50dp"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:layout_height="50dp"???????????????????????????????????????????????????????????????????????????????????????? ????android:layout_marginTop="8dp"? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????app:layout_constraintLeft_toLeftOf="parent" ????app:layout_constraintRight_toRightOf="parent" ????app:layout_constraintTop_toTopOf="parent"? ? ? ? ? ? ? ????app:srcCompat="@drawable/ic_truck" />

But:

如果是Button這種帶有屬性的的控件,不能直接設(shè)置srcCompat去引用一個VectorDrawable(因為兼容所帶來的犧牲)。并且如果Activity中有這樣設(shè)置Button,還需要一下操作。

需要一個Selector
使用background去引用
如果是5.0一下的設(shè)備

使用VectorDrawable不僅僅是因為它體積小 --- 動態(tài)的VectorDrawable

animated-vector:配置動畫粘合劑,將屬性動畫vector連接起來。

animated-vector

1.文件所在的位置。

2.所要操作的動畫。

3.所操作動畫的目標pathName.

4.所操作的pathName要執(zhí)行的動畫。

屬性動畫

propertyName:屬性而已,其他都是一樣的。

propertyName:表述屬性動畫的作用對象的屬性的名稱;

duration:表示動畫的時長;

valueFrom:表示屬性的起始值;

valueTo:表示屬性的結(jié)束值;

startOffset:表示動畫的延遲時間,當(dāng)動畫開始后,需要延遲多說毫秒才會真正播放此動畫;

repeatCount:表示動畫的重復(fù)次數(shù);

repeatMode:表示動畫的重復(fù)模式;

valueType:表示android:propertyName所指定的屬性的類型,有intType和floatType兩個可選項,分別表示屬性的類型為整型和浮點型。另外,如果android:propertyName所指定的屬性表示的是顏色,那么不需要指定android:valueType,系統(tǒng)會自動對顏色類型的屬性做處理。

對于一個動

注意group

有些屬性動畫的屬性并不存在于path標簽中,但存在于group標簽中(比如:translateY),可以通過group將path標簽分組。變色動畫,操作的目標就不是group而是path。

布局中的使用
代碼中的調(diào)用
軌跡動畫

VectorDrawable的使用場景:

png:三格圖,可以借助GPU去渲染,渲染效率非常高。

vectorDrawable:體積非常小,縮放不會失真,但是只能通過cpu去解析運算,無法通過GPU去做渲染的加速。

圖像復(fù)雜度----圖像更新頻率:

1.Bitmap的繪制效率并不一行會比Vector高,它們有一定的平衡點,當(dāng)Vector比較簡單時,其效率一定是Bitmap高,所以,為了保證Vector的高效率,Vector需要更加簡單,PathData更加標準、精簡,當(dāng)Vector圖像變得非常復(fù)雜就需要Bitmap來代替。

2.Vector適用于Icon、button、ImageView的圖標等小的Icon,或者是需要的動畫效果,由于Bitmap在GPU中有緩存功能,而Vector并沒有,所以Vector圖像不能做頻繁的重繪。

3.Vector圖像過于復(fù)雜時,不僅要注意繪制效率,初始化效率也是需要考慮的重要因素。

4.SVG加載速度快于PNG,但渲染速度慢于PNG,畢竟PNG有硬件加速,但平均下來,加載速度的提升彌補了繪制的速度缺陷。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容