Long Long Ago汗菜，微信8.0更新了一個(gè)“炸屎”的新功能让禀，還蠻有新意。

這兩天和朋友聊天觸發(fā)了這個(gè)功能陨界，當(dāng)時(shí)心想巡揍，誒胚膊！這文章素材不就來(lái)了嗎省咨？！趁著周末時(shí)間石咬，趕緊來(lái)實(shí)現(xiàn)一下俏扩。

我們先來(lái)看看整體實(shí)現(xiàn)的效果：

boom.gif

本篇文章無(wú)技術(shù)含量糜工，純屬娛樂，純屬娛樂

思路

經(jīng)過不斷試驗(yàn)动猬，反復(fù)查看了微信炸??的效果啤斗，基本上可以將其拆解成幾個(gè)小部分表箭。

• 選擇炸彈表情赁咙，發(fā)送后炸彈會(huì)以拋物線的形式向?qū)Ψ桨l(fā)送，同時(shí)??會(huì)進(jìn)行翻轉(zhuǎn)免钻；
• 在??碰到??表情的時(shí)候彼水，出現(xiàn)爆炸動(dòng)畫；
• 在動(dòng)畫爆炸的同時(shí)极舔，出現(xiàn)大概7個(gè)??表情凤覆，隨機(jī)朝向，做放大效果拆魏，最后下移并漸漸消失盯桦。

效果已經(jīng)拆解了，技術(shù)方面具體實(shí)現(xiàn)思路如下：

• IM聊天界面渤刃，主要以Recyclerview分為發(fā)送方和接收方兩種type拥峦；
• 以貝塞爾曲線實(shí)現(xiàn)炸彈拋物線的效果，這里用二階貝塞爾曲線即可卖子；
• 炸彈拋過去的同時(shí)略号，使用動(dòng)畫進(jìn)行旋轉(zhuǎn)；
• Lottie實(shí)現(xiàn)爆炸效果；
• 縮放玄柠、平移突梦、漸變動(dòng)畫實(shí)現(xiàn)7個(gè)??的炸出效果。

具體實(shí)現(xiàn)

IM聊天界面

Im聊天界面很簡(jiǎn)單羽利，一個(gè)Recyclerview宫患，分為左右兩個(gè)type，根據(jù)type值这弧，分別加載左側(cè)和右側(cè)的布局撮奏。

class ImAdapter  : BaseDelegateMultiAdapter<ImMsg?, BaseViewHolder>(){
    companion object {
        private const val TAG = "ImMsgAdapter"
        private const val TYPE_LEFT = 0
        private const val TYPE_RIGHT = 1
    }

    init {
        setMultiTypeDelegate(object : BaseMultiTypeDelegate<ImMsg?>() {
            override fun getItemType(data: List<ImMsg?>, position: Int): Int {

                if (data[position]?.type == 0) {
                    return TYPE_LEFT
                }
                return TYPE_RIGHT
            }
        })
        Objects.requireNonNull(getMultiTypeDelegate())!!
            .addItemType(TYPE_LEFT, R.layout.item_im_left)
            .addItemType(TYPE_RIGHT, R.layout.item_im_right)
    }

    override fun convert(holder: BaseViewHolder, item: ImMsg?) {

        if (holder.itemViewType == TYPE_LEFT) {
            holder.setText(R.id.tv_chat_left_msg,item?.msg)
        } else {
            holder.setText(R.id.tv_chat_right_msg,item?.msg)
        }

    }
}

這里創(chuàng)建一個(gè)實(shí)體類ImMsg，用于模擬聊天數(shù)據(jù)当宴。

data class ImMsg(val type:Int,val msg:String)


//初始化聊天信息畜吊，模擬數(shù)據(jù)
val msgList = mutableListOf<ImMsg>()
msgList.add(ImMsg(0, "Hello！"))
msgList.add(ImMsg(0, "我們來(lái)測(cè)試一下"))
msgList.add(ImMsg(0, "微信爆炸效果"))
msgList.add(ImMsg(1, "歐了户矢！"))
msgList.add(ImMsg(0, "\uD83D\uDE14"))
msgList.add(ImMsg(0, "\uD83D\uDCA9"))
msgList.add(ImMsg(0, "\uD83D\uDCA9"))
msgList.add(ImMsg(0, "\uD83D\uDCA9"))

val adapter = ImAdapter()
imRv.adapter = adapter
adapter.addData(msgList)

當(dāng)然玲献，聊天界面還需要加上輸入框，以及表情欄梯浪，這里就不一一展示捌年。

發(fā)送炸彈??

聊天界面搭建完成，接下來(lái)就開始進(jìn)入正題挂洛，從扔炸彈開始礼预。

上面已經(jīng)分析了，扔炸彈的過程其實(shí)是一個(gè)類似拋物線的過程虏劲，從右側(cè)聊天發(fā)送出去開始到碰到左側(cè)??結(jié)束托酸。

掘金-付十一.png

看到扔炸彈的過程，第一反應(yīng)就是用貝塞爾曲線來(lái)解決炸彈路線的問題柒巫，炸彈的行進(jìn)路線比較簡(jiǎn)單励堡，這里用二階貝塞爾曲線就能實(shí)現(xiàn)。

我們都知道堡掏，要實(shí)現(xiàn)二階貝塞爾曲線应结，至少得知道兩個(gè)點(diǎn)的數(shù)據(jù)，一個(gè)是控制點(diǎn)泉唁，一個(gè)是終點(diǎn)的坐標(biāo)鹅龄。

從上圖就可以基本知道，控制點(diǎn)在開始點(diǎn)和終點(diǎn)中間靠上的位置亭畜，這里以屏幕寬和高來(lái)做計(jì)算扮休，模擬出控制點(diǎn)。

val resources: Resources = this.resources
val dm: DisplayMetrics = resources.displayMetrics
val scWidth = dm.widthPixels
val scHeight = dm.heightPixels
val controlX : Int = scWidth/2 - 400//控制點(diǎn)x
val controlY : Int = scHeight/2 - 400//控制點(diǎn)y

終點(diǎn)同樣的道理贱案，以起點(diǎn)為參考值肛炮，計(jì)算出坐標(biāo)

val lastX = ivBomb.x-200
val lastY = ivBomb.y-800

有個(gè)控制點(diǎn)和終點(diǎn)的坐標(biāo)止吐，那就開始繪制二階貝塞爾曲線，實(shí)現(xiàn)貝塞爾曲線侨糟，Android中已經(jīng)有現(xiàn)成的API碍扔，Path中有個(gè)quadTo方法，只要傳入控制點(diǎn)和終點(diǎn)的坐標(biāo)秕重，即生成貝塞爾曲線路徑不同。

path.quadTo(
    -controlX,
    -controlY,
    -lastX,
    -lastY
)

有了path，接下來(lái)就是將炸彈按照貝塞爾曲線動(dòng)起來(lái)溶耘，這里就需要用到屬性動(dòng)畫結(jié)合PathMeasure二拐，讓炸彈??按照路徑移動(dòng)。

pathMeasure = PathMeasure(path, false)
valueAnimator = ValueAnimator.ofFloat(0f, pathMeasure.length)
valueAnimator.duration = MILLS + 100
valueAnimator.interpolator = LinearInterpolator()
valueAnimator.addUpdateListener { animation ->
    val animatedValue = animation.animatedValue as Float
    pathMeasure.getPosTan(animatedValue, mCurrentPosition, null)
    ivBomb.translationX = mCurrentPosition[0]
    ivBomb.translationY = mCurrentPosition[1]
    ivBomb.rotation = animatedValue
}

微信的炸彈在拋物線的同時(shí)凳兵，是有個(gè)不斷翻轉(zhuǎn)的效果百新。

那我們實(shí)現(xiàn)就只需要監(jiān)聽屬性動(dòng)畫的更新listener，在監(jiān)聽移動(dòng)的過程中庐扫，設(shè)置rotation饭望，使炸彈不斷進(jìn)行翻轉(zhuǎn)。

我們來(lái)看效果：

爆炸效果

接下來(lái)該說(shuō)的就是炸彈的爆炸效果形庭，這里給出的方案是使用Lottie庫(kù)來(lái)加載铅辞。微信的爆炸效果還是蠻逼真，找了好久萨醒，都沒找到相應(yīng)的素材斟珊，這里屬實(shí)無(wú)法模擬。

于是就從https://lottiefiles.com/ 資源庫(kù)中找到了一個(gè)類似爆炸效果的json文件富纸，結(jié)合Lottie實(shí)現(xiàn)爆炸的效果囤踩。

Lottie的使用也很簡(jiǎn)單，添加依賴

implementation 'com.airbnb.android:lottie:3.4.0'

在layout中添加LottieAnimationView

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_layer_view"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:layout_constraintBottom_toTopOf="@id/cl_ed_send"
    android:layout_marginBottom="140dp"/>

在炸彈執(zhí)行拋物線結(jié)束時(shí)胜嗓，開始播放

mLottieAnimation高职？.playAnimation()

來(lái)看下炸彈結(jié)合爆炸的整體效果

??炸開效果

當(dāng)炸彈爆炸后钩乍，有一個(gè)??被炸開的效果辞州，如下圖。

從微信效果上看寥粹，存在7個(gè)??的表情变过，并且每個(gè)表情隨機(jī)傾斜角度，從爆炸動(dòng)畫那里為起點(diǎn)涝涤，由小到大彈出媚狰，形成由遠(yuǎn)及近的效果。

實(shí)現(xiàn)的方案是自定義View繪制出7個(gè)相同的表情圖阔拳，利用Math.random隨機(jī)旋轉(zhuǎn)角度崭孤，且7個(gè)表情在可控范圍內(nèi)隨機(jī)擺放。

//爆炸剛開始時(shí)隨機(jī)分別7個(gè)圖，且旋轉(zhuǎn)角度隨機(jī)
for (i in 0..6) {
    dst?.let {
        it.left = i * 50 + 150
        it.top = mHeight + (Math.random() * 400).toInt() - mHeight / 4
        it.right = it.left + 100
        it.bottom = it.top + 100
    }
    
    val matrix = Matrix()
    matrix.postScale(i.toFloat() + 4, i.toFloat() + 4)
    matrix.postTranslate((-bitmap.width / 2).toFloat(), (-bitmap.height / 2).toFloat())
    matrix.postRotate((Math.random() * 70).toFloat())
    matrix.postTranslate(dst!!.top.toFloat(), dst!!.left.toFloat())
    val bitmap1 =
        Bitmap.createBitmap(bitmap, 0, 0, bitmap.width, bitmap.height, matrix, true)
    canvas.drawBitmap(bitmap1, null, dst!!, paint)
    matrix.reset()
}

至于由遠(yuǎn)及近的效果辨宠，就需要對(duì)自定義的粑粑View進(jìn)行縮放動(dòng)畫遗锣。

val scaleXAni = ObjectAnimator.ofFloat(baView, "scaleX", 0f, 1.8f)
val scaleYAni = ObjectAnimator.ofFloat(baView, "scaleY", 0f, 1.5f)

另外，在??炸開的最后嗤形，??會(huì)向下移動(dòng)并且同時(shí)漸變透明精偿，所以在縮放動(dòng)畫后開始平移動(dòng)畫
translation和漸變動(dòng)畫alpha。

val tranY1Ani = ObjectAnimator.ofFloat(baView, "translationY", 0f, -300f)
val tranYAni = ObjectAnimator.ofFloat(baView, "translationY", -300f, 300f)
val alphaAni = ObjectAnimator.ofFloat(baView, "alpha", 1f, 0f)

最后使用AnimatorSet將動(dòng)畫集合赋兵，開始播放笔咽。

val animatorSet = AnimatorSet()
animatorSet.play(scaleXAni).with(scaleYAni).with(tranY1Ani).before(tranYAni)
    .before(alphaAni)

看看效果。

408x425_boom2.gif

基本上每個(gè)拆解的部分都已經(jīng)實(shí)現(xiàn)霹期，現(xiàn)在開始將IM界面叶组、炸彈拋物線、爆炸效果以及最后的炸開效果合在一起历造。

最后的最后扶叉，實(shí)現(xiàn)的效果如下：

boom.gif

在炸彈爆炸的瞬間，用戶頭像和表情都會(huì)有被震到抖動(dòng)的效果帕膜，這里就沒實(shí)現(xiàn)了枣氧，有興趣的小伙伴可以試試。

好了垮刹，本篇文章就到這了达吞。覺得還湊合的，可以給個(gè)三連喲荒典！

推薦閱讀：

玩會(huì)兒Compose酪劫，原神主題列表
Compose版來(lái)啦！仿自如裸眼3D效果