Android使用Canvas和Path自定義繪製動畫

1. 動畫類型

在 開發中，完成設計師設計的動畫的途徑有很多種。

(1). 屬性動畫（Property Animtion）

Creates an animation by modifying an object"s property values over a set period of time with an Animator.

通過使用 類修改 的屬性來實現動畫。 注意屬性動畫可以為所有的 類來作動畫。

(2). 視圖動畫（View Animation）

Tween animation: Creates an animation by performing a series of transformations on a single image with an Animation

Frame animation: or creates an animation by showing a sequence of images in order with an AnimationDrawable.

補間動畫：通過使用 類對單個 作一系列變形來實現動畫。

幀動畫：通過使用 來創建動畫來順序展示一連串的圖片。

(3). lottie庫

庫是Airbnb開源的支持 , , 的動畫庫，設計師利用 上插件導出 文件，研發人員即可使用，可以省去研發人員的大量事件，但缺點是目前還不能完成所有的動畫。

(4). gif

Fresco 是一個強大的圖片載入組件。使用它之後，你不需要再去關心圖片的載入和顯示這些繁瑣的事情！ 支持 Android 2.3 及以後的版本。Fresco 支持 GIF 和 WebP 格式的動畫圖片。

(5). 使用 canvas 自定義繪製

使用canvas繪製動畫的簡單姿勢：

提前創建好 對象

重寫 ，控制不同的狀態，繪製不同的代碼。

今天主要介紹利用 來繪製一個 動畫。

2. 開發步驟

本節將以一團火圍繞一個愛心旋轉為例來說明如何使用 做動畫。

效果如下：

GIF

將video 轉成gif，推薦一個工具：GIF Brewery by Gfycat

2.1 如何畫出「愛心」

有很多繪製圖形的API，對於簡單的圖形，可以直接找到對應的API。具體可以查閱 canvas, 不過對於一些自定義的圖形，可以使用

或者 ,本例中的「愛心」，就是利用 來繪製。

可以拆成兩個弧和一條線，具體見：

是使用一個橢圓來描述弧形的。

, , , 描述的是這個弧形所在的橢圓；

是弧形的起始角度（x 軸的正向，即正右的方向，時針3點的位置是 0 度的位置；順時針為正角度，逆時針為負角度)

是弧形划過的角度；

表示是否連接到圓心，如果不連接到圓心，就是弧形，如果連接到圓心，就是扇形。

2.2 如何畫出 「光點」

「光點」的繪製則是利用 來完成的。該API 有很多重載方法

由於我們在繪製過程中要對「光點」進行平移和旋轉，所以選擇通過變換 來繪製變換的 。

2.3 如何控制「光點」的移動速度、位置和角度

2.3.1 「光點」的移動速度

我們利用計算「愛心」路徑的長度和合適的時長來計算每次「光點」移動的步長。

「愛心」路徑的長度：

如果在 函數中沒有大量的耗時操作，就認為16ms執行一次，可以根據總運行時間，來推算要執行多少次，從而推算出步長是多少。

2.3.2 「光點」的位置和角度

我們希望在動畫過程中能知道該「光點」在屏幕的位置和角度，可以利用API

boolean getPosTan (float distance, float[] pos, float[] tan)

該API 就是獲取在路徑長度為 時，該點的位置和角度。其中 表示此時的坐標位置，而 表示計算 角度的 值和 值

2.3.3 繪製「光點」的位置和角度

通過上一節，知道了不同時刻的位置和角度，那麼畫在屏幕上，利用 來做變換，代碼很簡單，不做其它解釋了。

3. 源碼

最後放出整個效果的源碼，祝大家520快樂。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！