當前位置:編程學習大全網 - 編程語言 - 安卓開發中矢量圖的繪制及動畫

安卓開發中矢量圖的繪制及動畫

矢量圖也稱為面向對象的圖像或繪圖圖像,是根據幾何特性來繪制的圖形,在安卓開發中可以使用失量圖代替原來的圖片資源,矢量圖具有占用空間小和可以隨意縮放但不失真的優勢,在我的多個項目中都有運用。

通過學習和實踐,我總結了壹些與矢量圖相關的知識,方便今後更好的使用矢量圖,同時也可以供大家查閱參考。

繪制矢量圖之前需要先定義畫布的寬高,後續的繪制效果都展示在這個畫布上。在繪制過程中需要輸入的坐標就是這個畫布上的點。

安卓的矢量圖常見於 drawable 文件夾下,是壹個xml文件,由 vector 標簽包裹,在 vector 標簽中可包含多個 path 標簽,依次疊加顯示。

在矢量圖中最重要的就是 path 屬性,圖像的樣式就是由 path 屬性中的數據繪制而成,這些數據由不同的命令組合而成,下面就介紹壹些矢量圖的繪制命令。

將前面的命令示例連接起來就可以生成壹個完整的圖像,它大概長這個樣子:

畫布的尺寸為500x500,圖上的頂點是200,10的位置,也是我們開始作圖的起點。通過這個圖片可以更好的理解每壹個繪圖命令。

安卓中可以為矢量圖添加動畫效果,這樣用戶就可以看到壹個動的圖片,可以壹定程度的提高app的交互效果。矢量圖動畫是圖形內部的變化,可以做到View動畫無法實現的效果。

這種動畫針對的是矢量圖中 path 字段的值,通過連續改變 path 字段的值而達到產生動畫的效果。

註:pathData動畫所需的AnimatedVectorDrawable最低要求API等級為25

實現壹個矢量圖動畫需要以下幾步:

1. 準備起始狀態和結束狀態的矢量圖兩張。

2. 創建動畫配置文件。

3. 創建動畫矢量圖文件。

4. 啟動動畫。

基於這種要求,我準備了兩個矢量圖:

控制動畫運行的是壹個 objectAnimator ,此處把 objectAnimator 包裹在壹個 set 中也是可以的,說白了就是執行這個動畫文件。

duration 用來指定動畫的持續時間。

propertyName 中的pathData指的就是矢量圖中的pathData。

valueFrom 和 valueTo 壹個是起始路徑,壹個是結束路徑,可以想到,這個動畫就是在持續修改pathData,從而達到展示動畫的效果。而 valueFrom 和 valueTo 的值是直接從先前準備的矢量圖中復制過來的,所以那個結束狀態的矢量圖中唯壹有用的東西就是pathData屬性,沒有那個文件也無所謂。

valueType 這裏必須填寫pathType,這是專門用來計算path的類型。

此時,文件的最外層由 animated-vector 包裹,同時需要添加壹個 drawable 參數,這個 drawable 用於指定動畫應用於那個矢量圖上,我們是要從未啟用狀態變成啟用狀態,所以是在未啟用狀態開始執行動畫,在動畫未開始的時候展示的也是未啟用狀態。此處我們指定為 @drawable/icon_filter_off 。

內部有壹個 target 標簽,這個標簽可以有多個,分別對應不同的動畫,但同壹個 path 只能應用壹個動畫。

name 用於指定要執行動畫的 path 。status正是我們為右下角小圖標path設置的名稱。

animation 用於指定需要執行的動畫。此處引用我們剛剛創建的動畫資源 @animator/filter_turn_on 。

當我們創建好動畫矢量圖之後,頁面中引用的資源就不再是之前的靜態矢量圖了,需要把 ImageView 的圖片替換成 @drawable/animated_filter_on

經過這麽多的步驟,我們終於做出了壹個矢量圖動畫,而且是壹個。說實話,有點累,然而我這個狀態切換的動畫壹套就要兩個,所以我又加了壹個回來的動畫和對應的動畫矢量圖,壹***六個文件,完成了篩選狀態的兩個切換動畫。這還是比較簡單的實現方式,對於兩種狀態切換的動畫,網上還有壹種使用selector的方式,這種方式更麻煩,而且使用方法並沒有簡單壹些,所以我的選擇是在需要切換狀態的時候更改 ImageView 的圖片資源,然後再執行動畫。

trimPath動畫相當於是改變了矢量圖繪制的位置,是從頭開始畫還是從80%的位置開始畫,然後再動態的修改這個百分比,從而達到動畫的效果。理解起來倒不是很難。

先放壹個我使用trimPath動畫做的loading效果,這個動畫效果被我用在LoadingDialog中,在界面加載的時候會重復播放這個動畫。

android:name="load" 不用多說,這個是我們做動畫時路徑名稱。這裏為了讓心電圖路徑更清晰,我設置了描邊寬度為20( android:strokeWidth="20" ),同時還要設置描邊的顏色才能展示出來。後面的 android:trimPathStart="0" 和 android:trimPathEnd="0" 是本次trimPath動畫的重點。

這兩個屬性都設置為0是因為動畫的起始幀都為0,然後通過 objectAnimator 慢慢把這兩個屬性變為1,這樣壹個慢慢增長的動畫就形成了。

網絡上壹個橫線變成搜索按鈕的示例是將這兩個屬性分別應用到了兩個 path 上,而我是將兩個屬性同時應用到壹個 path 上,原理都是壹樣的。

在配置文件中,我將兩個動畫都設置為3秒且循環播放,起始點的動畫慢於終點的動畫1秒,達到只畫中間1秒間隔線段的效果。和路徑變形動畫的區別是 android:valueType="floatType" ,我們只需要計算從0到1的數字,然後應用到 trimPathStart 和 trimPathEnd 字段上。至此,loading的動畫就配置完了。

這壹步已經沒什麽可說的了,就是將指定的矢量圖中指定的路徑設置壹個指定的動畫。

通過幾天的學習,已經大致掌握了矢量圖的展示及動畫的制作,但這壹套流程下來成本比較高,是程序員方式的動畫制作流程。除了制作成本,創意成本也是相當高的,壹個好的創意能極大的提升用戶體驗,而好多時候我們的創意能夠被實現也是很困難的。希望以後能實現壹些更好的效果,讓用戶使用起來更舒服。

SVG—最簡單的SVG動畫

SVG路徑(path)中的圓弧(A)指令的語法說明及計算邏輯

Android中的矢量圖

Android高級動畫(2)

  • 上一篇:西安科技大學成人繼續教育有哪些專業?
  • 下一篇:vc++6.0操作方法
  • copyright 2024編程學習大全網