介紹:
SVG是什么?(可伸縮矢量圖形:Scalable Vector Graphics)
1,定義用于網(wǎng)絡(luò)的基于矢量的圖形
2,使用XML格式定義圖形
3,萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
4,與諸如DOM和XSL之類的W3C標(biāo)準(zhǔn)是一個整體
5,圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失.
SVG可以實現(xiàn)什么東西呢,就像很多應(yīng)用的的菜單按鈕點擊的時候,3條橫線點擊會變成一個箭頭的樣子就是SVG來實現(xiàn)的.
SVG在Web上的應(yīng)用非常廣泛，在Android 5.X之前的Android版本上，大家可以通過一些第三方開源庫來在Android中使用SVG。而在Android 5.X之后，Android中添加了對SVG的<path>標(biāo)簽支持。從而讓開發(fā)者可以使用SVG來創(chuàng)建更加豐富的動畫效果。
由于SVG是用xml格式來定義的.所以要先了解下有什么標(biāo)簽格式:
M = moveto(M X,Y) ：將畫筆移動到指定的坐標(biāo)位置
L = lineto(L X,Y) ：畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X)：畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y)：畫垂直線到指定的Y坐標(biāo)位置
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()：關(guān)閉路徑
有幾點要注意：
坐標(biāo)軸為以(0,0)為中心，X軸水平向右，Y軸水平向下。
所有指令大小寫均可。大寫絕對定位，參照全局坐標(biāo)系；小寫相對定位，參照父容器坐標(biāo)系
指令和數(shù)據(jù)間的空格可以省略
同一指令出現(xiàn)多次可以只用一個
Google在Android 5.X中提供了兩個新API來幫助支持SVG: VectorDrawable 和AnimatedVectorDrawable
其中，VectorDrawable讓你可以創(chuàng)建基于XML的SVG圖形，并結(jié)合AnimatedVectorDrawable來實現(xiàn)動畫效果。
提供一個在線的SVG圖形生成網(wǎng)站 http://editor.method.ac/ .
那么如何繪制SVG圖形呢;我們可以在drawable目錄右鍵點擊NEW->Vector Asset
本地文件的話可以讓設(shè)計將圖轉(zhuǎn)化成SVG格式給你.
選擇一個圖片生成出來的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="M12,7.77L18.39,18H5.61L12,7.77M12,4L2,20h20L12,4z"/>
</vector>
viewportHeight，viewportWidth表示SVG圖形劃分比例。后面在繪制path時所使用的參數(shù)，就是根據(jù)這兩個值來進行轉(zhuǎn)換，比如上面的代碼，將24dp劃分為24份，如果在繪制圖形時使用坐標(biāo)(12,12)，則意味著該坐標(biāo)位于該SVG圖形正中間。所以，如果width，height的比例與viewportHeight，viewportWidth的比例不一致，就會使圖形發(fā)生壓縮，形變。
pathData 就是繪制SVG圖形所用到的指令。
fillColor 這個屬性表明繪制出來的是一個填充的圖形，我在這個屬性里設(shè)了一個白色，如果想要繪制一個非填充的圖形，可以使用 strokeColor 。
然后在布局就可以直接引用drawable了.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ic_change_history_black_24dp"
/>
AnimatedVectorDrawable 的作用是給 VectorDrawable 提供動畫效果。在XML文件中通過<animated-vector>標(biāo)簽來聲明對 AnimatedVectorDrawable 的使用，并指定其作用的<path>或<group>。
舉個例子，旋轉(zhuǎn)動畫:
我們先在drawable目錄下創(chuàng)建一個靜態(tài)的 VectorDrawable ,取名為test_vector.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="200dp"
android:width="200dp"
android:viewportHeight="100"
android:viewportWidth="100"
>
<group android:name="test"
android:rotation="0">
<path android:strokeColor="#ff0000"
android:strokeWidth="2"
android:pathData="M 25 50 a 25,25 0 1, 0 50,0"/>
</group>
</vector>
在preview里面是這樣子：
然后在res目錄下新建animator目錄新建一個objectAnimator文件,名為anim_path1.xml,
<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="4000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360"
>
</objectAnimator>
最后寫一個 animated-vector ,把 VectorDrawable 和 objectAnimator 連起來,在drawable中新建一個名為ic_animated_test.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:drawable="@drawable/test_vector"
tools:targetApi="lollipop">
<target
android:name="test"
android:animation="@animator/anim_path1"
/>
</animated-vector>
這樣整個動畫就寫完了，接下來在布局文件中引用 VectorDrawable
<ImageView
android:id="@+id/vector_animator_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_animated_test"
/>
然后在activity中通過((Animatable)imageview.getDrawable()).start(); 就可以啟動動畫了.
