​

廢話不多說，直接進入正文，上文中我們已經看到了這篇要實現的動畫效果如下：

我們可以看到該動畫由兩個主要元素構成：

• 張合的怪物臉

• 從右向左移動的食物

關於從右向左移動的食物，相信各位親們第一眼就想到了位移動畫，那麼在Canvas繪製時，怎麼做到動畫呢？前篇的經驗已經很多了，讓圓心座標成為動點，通過 ValueAnimator改變圓心座標就好（PS：我這裡建議做成 mStartPositionX+mDistanceX的形式，通過 ValueAnimator，控制 mDistanceX從0變化到移動距離就ok，注意向左移 mDistanceX要取負值）

接下來我們重點看一下嘴張合的怪物的實現原理。

簡單觀察動畫後，我們可以擷取到下圖中的簡單座標系：

我們可以看到該動畫的形成完成依賴於角CAB的大小變化，當角CAB變成0時，怪物吃食物完成，當角CAB達到最大時(最大角度由我們自行定義，這裡假定為60度)，怪物嘴張到最大。

那麼我們就可以就可以定義需要繪製的圖形路徑為：

移動圓弧起點到A，繪製直線AB，繪製狐線BC，繪製直線CA

其中B，C兩點屬於圓上點，座標公式上文已講過，不再贅述。

這裡給出該圖形的 Path虛擬碼供大家參考：

//重置Path起點
mPath.reset();
mPath.moveTo(A點);
mPath.lineTo(B點);
mPath.addArc(圓弧BC);
mPath.lineTo(A點);
 

這樣我們就可以完成這個動畫的繪製了，請小夥伴們先自行嘗試下，有問題的小夥伴可以通過後臺回覆ArcPointLoadingView獲取完成程式碼。