《Android5.0+高級動畫開發》講的是如何藉助VectorDrawable技術,貝賽爾曲線技術,PathMeasure技術實現酷炫動畫。相比之前學習過的幀動畫,補間動畫,屬性動畫,它們有哪些值得我們學習的地方呢?Android為什麼在5.0以後推出了VectorDrawable技術?徐大神為什 ...
《Android5.0+高級動畫開發》講的是如何藉助VectorDrawable技術,貝賽爾曲線技術,PathMeasure技術實現酷炫動畫。相比之前學習過的幀動畫,補間動畫,屬性動畫,它們有哪些值得我們學習的地方呢?Android為什麼在5.0以後推出了VectorDrawable技術?徐大神為什麼要推薦和分享這些技術?廢話到此結束,接下來記錄下學習[初識矢量圖SVG與VectorDrawable]這一小節的重點知識點。
知識點1:
網路上使用的圖片一般有兩種類型,一種是柵格圖(.jpeg .gif .png),一種是矢量圖(SVG),其是柵格圖放大會失真,矢量圖放大不會失真,如下圖:
知識點2:
SVG -全稱Scalable Vector Graphics,是一種W3C推薦的用來描述兩維矢量圖形的語言。目的是提供一種靈活而實用的圖形格式,併在 XML 中表示出來。SVG 的特性集包括嵌套式轉換、剪輯路徑、羽化遮罩、光柵過濾器效果、模板對象,可擴展性等,支持動畫、縮放視圖、各種圖形原語、分組、超鏈接、結構化元數據、CSS、DOM 擴展集,並可以輕易地嵌入到其他 XML 文檔中。一般用於Web端。
rect標簽:代表畫一個矩形,circle標簽:代表畫一個圖形,polyline標簽:代表畫一條折線,line標簽:代表畫一條直線
知識點3:
VectorDrawable是Android中的矢量圖,只抽取了SVG中的Path標簽來畫所有圖形,提高了矢量圖在Android系統中的載入與解析效率。VectorDrawable常用語法:
M=moveto(M X,Y):將畫筆移動到指定坐標位置
L = lineto(L X,Y):畫直線到指定的坐標位置
Z=closepath():關閉路徑
H=horizontal lineto(H X) :畫水平線到指定的X 坐標位置
V=vertical lineto(V Y):畫垂直線到指定的Y坐標位置
知識點4:
矢量圖SVG線上製作工具-SVG Editor(http://editor.method.ac)
SVG轉VectorDrawable 線上工具(https://inloop.github.io/svg2android/)
AndroidStudio中也提供了轉化工具,而且SVG之所以可以轉化為VectorDrawable是因為SVG語法比較固定,所有SVG圖形歸根到底都是Path,而VectorDrawable正是提取了SVG中的Path。