Long Long Ago，微信8.0更新了壹個“炸屎”的新功能，還蠻有新意。
這兩天和朋友聊天觸發了這個功能，當時心想，誒！這文章素材不就來了嗎？！趁著周末時間，趕緊來實現壹下。
我們先來看看整體實現的效果：
本篇文章無技術含量，純屬娛樂，純屬娛樂
經過不斷試驗，反復查看了微信炸?的效果，基本上可以將其拆解成幾個小部分。
效果已經拆解了，技術方面具體實現思路如下：
Im聊天界面很簡單，壹個Recyclerview，分為左右兩個type，根據type值，分別加載左側和右側的布局。
這裏創建壹個實體類ImMsg，用於模擬聊天數據。
當然，聊天界面還需要加上輸入框，以及表情欄，這裏就不壹壹展示。
聊天界面搭建完成，接下來就開始進入正題，從扔炸彈開始。
上面已經分析了，扔炸彈的過程其實是壹個類似拋物線的過程，從右側聊天發送出去開始到碰到左側?結束。
看到扔炸彈的過程，第壹反應就是用貝塞爾曲線來解決炸彈路線的問題，炸彈的行進路線比較簡單，這裏用二階貝塞爾曲線就能實現。
我們都知道，要實現二階貝塞爾曲線，至少得知道兩個點的數據，壹個是 控制點 ，壹個是 終點 的坐標。
從上圖就可以基本知道，控制點在開始點和終點中間靠上的位置，這裏以屏幕寬和高來做計算，模擬出控制點。
終點同樣的道理，以起點為參考值，計算出坐標
有個控制點和終點的坐標，那就開始繪制二階貝塞爾曲線，實現貝塞爾曲線，Android中已經有現成的API，Path中有個 quadTo 方法，只要傳入控制點和終點的坐標，即生成貝塞爾曲線路徑。
有了path，接下來就是將炸彈按照貝塞爾曲線動起來，這裏就需要用到 屬性動畫 結合 PathMeasure ，讓炸彈?按照路徑移動。
微信的炸彈在拋物線的同時，是有個不斷翻轉的效果。
那我們實現就只需要監聽屬性動畫的更新listener，在監聽移動的過程中，設置rotation，使炸彈不斷進行翻轉。
我們來看效果：
接下來該說的就是炸彈的爆炸效果，這裏給出的方案是使用 Lottie 庫來加載。微信的爆炸效果還是蠻逼真，找了好久，都沒找到相應的素材，這裏屬實無法模擬。
於是就從 / 資源庫中找到了壹個類似爆炸效果的json文件，結合Lottie實現爆炸的效果。
Lottie的使用也很簡單，添加依賴
在layout中添加 LottieAnimationView
在炸彈執行拋物線結束時，開始播放
來看下炸彈結合爆炸的整體效果
當炸彈爆炸後，有壹個?被炸開的效果，如下圖。
從微信效果上看，存在7個?的表情，並且每個表情隨機傾斜角度，從爆炸動畫那裏為起點，由小到大彈出，形成由遠及近的效果。
實現的方案是自定義View繪制出7個相同的表情圖，利用Math.random隨機旋轉角度，且7個表情在可控範圍內隨機擺放。
至於由遠及近的效果，就需要對自定義的粑粑View進行縮放動畫。
另外，在?炸開的最後，?會向下移動並且同時漸變透明，所以在縮放動畫後開始平移動畫
translation和漸變動畫alpha。
最後使用AnimatorSet將動畫集合，開始播放。
看看效果。
基本上每個拆解的部分都已經實現，現在開始將IM界面、炸彈拋物線、爆炸效果以及最後的炸開效果合在壹起。
最後的最後，實現的效果如下：
在炸彈爆炸的瞬間，用戶頭像和表情都會有被震到抖動的效果，這裏就沒實現了，有興趣的小夥伴可以試試。
好了，本篇文章就到這了。覺得還湊合的，可以給個三連喲！
推薦閱讀：
玩會兒Compose，原神主題列表
Compose版來啦！仿自如裸眼3D效果